Dopo aver creato un incorporamento, puoi farlo pubblicamente, privatamente con il Single Sign-On (SSO) o tramite l'API, puoi interagire con quegli iframe tramite JavaScript. Puoi rendere la tua pagina più dinamica, in base allo stato dell'elemento incorporato, o persino apportare modifiche all'elemento incorporato dalla tua pagina web.
Tieni presente che Looker non controlla l'ordine in cui i browser inviano gli eventi alle applicazioni web. Ciò significa che l'ordine degli eventi non è garantito per tutti i browser o le piattaforme. Assicurati di scrivere il JavaScript in modo da tenere conto della gestione degli eventi dei diversi browser.
Puoi utilizzare JavaScript in due modi per i contenuti incorporati di Looker:
- usando l'SDK Software Development Kit (SDK) di Looker, descritto nella pagina della documentazione relativa all'incorporamento SDK.
- usando gli eventi JavaScript, descritti nella sezione Accedere agli eventi in JavaScript di questa pagina.
preparazione
Prima di poter interagire con l'iframe incorporato, devi intraprendere alcune azioni:
- Aggiungere un ID all'iframe
- Aggiungere il dominio di incorporamento all'attributo iframe
src
- Aggiungere il dominio di incorporamento alla lista consentita
Aggiungere un ID all'iframe
Una delle cose che devi fare in seguito è verificare che le informazioni con cui lavori provengono effettivamente dall'iframe di Looker. Per facilitare questa operazione, assicurati di aggiungere un ID all'iframe, se non lo hai già fatto. Nell'esempio seguente, abbiamo aggiunto id="looker"
:
<iframe id="looker" src="https://instance_name.looker.com/embed/dashboards/1"></iframe>
Aggiunta del dominio di incorporamento all'attributo iframe src
In src
di iframe, aggiungi il dominio in cui viene utilizzato l'iframe. Nell'esempio seguente, abbiamo aggiunto ?embed_domain=https://mywebsite.com"
:
<iframe
id="looker"
src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com">
</iframe>
Se utilizzi l'incorporamento SSO, assicurati di aggiungere embed_domain
all'URL di incorporamento.
Non includere una barra finale (
/
) inembed_domain
.
Aggiungere il dominio di incorporamento alla lista consentita
Infine, devi aggiungere il dominio in cui l'iframe viene utilizzato alla lista consentita nella pagina Incorpora del riquadro Amministratore di Looker:
- Inserisci il dominio in cui viene utilizzato l'iframe. Dopo averlo digitato, assicurati di premere il tasto Tab per visualizzare il dominio in una casella. Non includere una barra finale (
/
) nell'URL del dominio. - Fai clic sul pulsante Aggiorna.
Puoi utilizzare il carattere jolly *
nella lista consentita per creare uno schema di dominio. Ad esempio, https://*.mycompany.com
consentirebbe sia https://analytics.mycompany.com
che https://data.mycompany.com
.
Recupero dei dati dall'iframe
Dopo aver completato i passaggi di preparazione, puoi accedere agli eventi trasmessi tra l'iframe di Looker e il tuo dominio ascoltando gli eventi di postMessage
.
Assicurati che gli eventi provengano dall'iframe del dominio e dal dominio Looker per evitare messaggi dannosi.
L'iframe incorporato può creare alcuni tipi di eventi, come descritto nella sezione Riferimento per i tipi di eventi in questa pagina.
Accesso agli eventi in JavaScript
Ecco un esempio di ascolto di questi eventi in JavaScript nativo, per poi registrarli alla console:
window.addEventListener("message", function(event) {
if (event.source === document.getElementById("looker").contentWindow) {
if (event.origin === "https://instance_name.looker.com") {
console.log(JSON.parse(event.data));
}
}
});
Ecco un esempio di ascolto di questi eventi in jQuery, per poi registrarli alla console:
$(window).on("message", function(event) {
if (event.originalEvent.source === $("#looker")[0].contentWindow) {
if (event.origin === "https://instance_name.looker.com") {
console.log(JSON.parse(event.data));
}
}
});
Tabella di riepilogo dei tipi di evento
La tabella seguente riepiloga i tipi di eventi. Fai clic su un tipo di evento per visualizzarne i dettagli.
Tipo di evento | Causa dell'evento |
---|---|
dashboard:loaded |
Nelle dashboard in cui i riquadri non sono impostati sull'esecuzione automatica, viene caricata una dashboard con i relativi elementi, ma le query non sono ancora in esecuzione. |
dashboard:run:start |
Una dashboard ha iniziato a caricarsi e i relativi riquadri hanno iniziato a caricarsi e a eseguire query sui dati. |
dashboard:run:complete |
L'esecuzione di una dashboard è stata completata e tutti i riquadri hanno terminato il caricamento e l'esecuzione di query. |
dashboard:download |
È iniziato il download del PDF di una dashboard. |
dashboard:save:complete |
AGGIUNTO 21.6 Una dashboard è stata modificata e salvata. |
dashboard:delete:complete |
AGGIUNTO 21.6 Una dashboard è stata eliminata. |
dashboard:tile:start |
Un riquadro ha iniziato a caricare o a eseguire query sui dati. |
dashboard:tile:complete |
Un riquadro ha terminato l'esecuzione della query. |
dashboard:tile:download |
È iniziato il download dei dati di un riquadro. |
dashboard:tile:explore |
Un utente ha fatto clic sull'opzione Esplora da qui in un riquadro della dashboard. |
dashboard:tile:view |
Un utente ha fatto clic sull'opzione Visualizza look originale in un riquadro della dashboard. |
dashboard:filters:changed |
I filtri di una dashboard sono stati applicati o modificati. |
look:ready |
È iniziato il caricamento dei dati di una query da parte di Look, indipendentemente dal fatto che la query venga eseguita o meno. |
look:run:start |
È iniziato il caricamento dei dati di una query da parte di Look e l'esecuzione della query è iniziata. |
look:run:complete |
La query è stata terminata in un look. |
look:save:complete |
AGGIUNTO 21.6 Un look è stato modificato e salvato. |
look:delete:complete |
AGGIUNTO 21.6 Un look è stato spostato nella cartella Cestino. |
drillmenu:click |
Un utente ha fatto clic su un menu drill in una dashboard creata con il parametro LookML link . |
drillmodal:download |
Un utente ha aperto una finestra di dialogo drill-down da un riquadro della dashboard e ha fatto clic sull'opzione Scarica. |
drillmodal:explore |
Un utente ha fatto clic sull'opzione Esplora da qui in una finestra di dialogo drill-down. |
explore:ready |
Un'esplorazione ha iniziato a caricare i dati sulle query, indipendentemente dal fatto che la query venga eseguita o meno. |
explore:run:start |
Un'esplorazione ha iniziato a caricare dati sulle query e l'esecuzione della query è iniziata. |
explore:run:complete |
Un'esplorazione ha terminato l'esecuzione della query. |
explore:state:changed |
L'URL di una pagina di esplorazione è cambiato a seguito delle azioni dell'utente. |
page:changed |
Un utente è passato a una nuova pagina all'interno dell'iframe. |
page:properties:changed |
L'altezza di un iframe della dashboard è stata modificata. |
Informazioni sui tipi di eventi
L'iframe incorporato può creare molti tipi di eventi diversi:
dashboard:loaded
Nelle dashboard in cui non è impostata l'esecuzione automatica dei riquadri, questo evento viene creato dopo il caricamento di una dashboard e dei relativi elementi, ma prima dell'esecuzione delle query.
L'attributo options
non è disponibile sulle dashboard precedenti.
type: "dashboard:loaded",
status: "complete",
dashboard: {
id: 1,
title: "Business Pulse",
dashboard_filters: {
"date": "Last 6 Years",
"state": ""
},
absoluteUrl: "https://self-signed.looker.com:9999/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
url: "/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
options: {
layouts: [
{
id: 1,
dashboard_id: 1,
type: "newspaper",
active: true,
column_width: null,
width: null,
deleted: false,
dashboard_layout_components: [
{
id: 1,
dashboard_layout_id: 1,
dashboard_element_id: 1,
row: 0,
column: 0,
width: 8,
height: 4,
deleted: false
},
{
id: 2,
dashboard_layout_id: 1,
dashboard_element_id: 2,
row: 0,
column: 8,
width: 8,
height: 4,
deleted: false
}
]
}
],
elements: {
1: {
title: "Total Orders",
title_hidden: false,
vis_config: {
type: "single_value",
font_size: "medium",
title: "Total Orders"
}
},
2: {
title: "Average Order Profit",
title_hidden: false,
vis_config: {
type: "single_value",
title: "Average Order Profit"
}
}
}
}
}
Attributo | Formatta | Descrizione |
---|---|---|
status |
Stringa | Indica se la dashboard e i suoi elementi sono stati caricati correttamente. |
dashboard.id |
Numero | Il numero ID della dashboard. |
dashboard.title |
Stringa | Il titolo, come indicato nella parte superiore della dashboard. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso). |
dashboard.options |
Oggetto | Le proprietà e i valori del layout dashboard, del componente layout della dashboard e dell'elemento della dashboard. A tutte le proprietà restituite nell'oggetto options possono essere assegnati valori aggiornati usando l'evento dashboard:options:set . Questa opzione non è disponibile nelle dashboard precedenti. |
dashboard:run:start
Questo evento viene creato quando inizia il caricamento di una dashboard e inizia l'avvio del caricamento dei riquadri e l'esecuzione di query sui dati.
type: "dashboard:run:start",
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | Il numero ID della dashboard. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso). |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard. |
dashboard.title |
Stringa | Il titolo, come indicato nella parte superiore della dashboard. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard:run:complete
Questo evento viene creato quando la dashboard è terminata e tutti i riquadri hanno terminato il caricamento e l'esecuzione delle query. Questo evento viene creato indipendentemente dal fatto che tutti i riquadri vengano caricati o meno.
Gli attributi options
e tileStatuses
non sono disponibili nelle dashboard precedenti.
type: "dashboard:run:complete",
status: "complete",
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://my.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
options: {
layouts: [
{
id: 1,
dashboard_id: 1,
type: "newspaper",
active: true,
column_width: null,
width: null,
deleted: false,
dashboard_layout_components: [
{
id: 1,
dashboard_layout_id: 1,
dashboard_element_id: 1,
row: 0,
column: 0,
width: 8,
height: 4,
deleted: false
},
{
id: 2,
dashboard_layout_id: 1,
dashboard_element_id: 2,
row: 0,
column: 8,
width: 8,
height: 4,
deleted: false
}
]
}
],
elements: {
1: {
title: "Total Orders",
title_hidden: false,
vis_config: {
type: "single_value",
font_size: "medium",
title: "Total Orders"
}
},
2: {
title: "Average Order Profit",
title_hidden: false,
vis_config: {
type: "single_value",
title: "Average Order Profit"
}
}
}
}
}
Attributo | Formatta | Descrizione |
---|---|---|
status |
Stringa | Indica se la dashboard e i suoi elementi sono stati eseguiti correttamente. Se la dashboard e i suoi elementi sono stati eseguiti correttamente, status restituisce "complete" , altrimenti status restituisce "error" . Se la dashboard in esecuzione è stata arrestata, dall'interfaccia utente o con l'azione dashboard:stop , status restituirà "stopped" . |
dashboard.id |
Numero | Il numero ID della dashboard. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso). |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard. |
dashboard.title |
Stringa | Il titolo, come indicato nella parte superiore della dashboard. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard.options |
Oggetto | Le proprietà e i valori del layout dashboard, del componente layout della dashboard e dell'elemento della dashboard. A tutte le proprietà restituite nell'oggetto options possono essere assegnati valori aggiornati usando l'azione dashboard:options:set . Questa opzione non è disponibile nelle dashboard precedenti. |
dashboard.tileStatuses |
Array di oggetti | Un array di oggetti che forniscono stati dei riquadri. Le proprietà dell'oggetto sono:
|
dashboard:download
Questo evento viene creato quando viene avviato il download del PDF di una dashboard.
type: "dashboard:download",
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
fileFormat: "pdf"
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | Il numero ID della dashboard. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso). |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard. |
dashboard.title |
Stringa | Il titolo della dashboard, come mostrato nella parte superiore. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
fileFormat |
Stringa | Il formato della dashboard scaricata (solo "pdf" al momento). |
dashboard:save:complete
Questo evento viene creato quando una dashboard viene modificata e poi salvata.
Questo evento non è disponibile nelle dashboard precedenti.
type: "dashboard:save:complete",
dashboard: {
id: 23,
title: "My Dashboard",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
url: "/embed/dashboards/...",
options: {
layouts: [
{
id: 1,
dashboard_id: 1,
type: "newspaper",
active: true,
column_width: null,
width: null,
deleted: false,
dashboard_layout_components: [
{
id: 1,
dashboard_layout_id: 1,
dashboard_element_id: 1,
row: 0,
column: 0,
width: 8,
height: 4,
deleted: false
},
{
id: 2,
dashboard_layout_id: 1,
dashboard_element_id: 2,
row: 0,
column: 8,
width: 8,
height: 4,
deleted: false
}
]
}
],
elements: {
1: {
title: "Total Orders",
title_hidden: false,
vis_config: {
type: "single_value",
font_size: "medium",
title: "Total Orders"
}
},
2: {
title: "Average Order Profit",
title_hidden: false,
vis_config: {
type: "single_value",
title: "Average Order Profit"
}
}
}
}
}
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | Il numero ID della dashboard. |
dashboard.title |
Stringa | Il titolo, come indicato nella parte superiore della dashboard. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso). |
dashboard.options |
Oggetto | Le proprietà e i valori del layout dashboard, del componente layout della dashboard e dell'elemento della dashboard. A tutte le proprietà restituite nell'oggetto options possono essere assegnati valori aggiornati usando l'evento dashboard:options:set . |
dashboard:delete:complete
Questo evento viene creato quando viene eliminata una dashboard.
Questo evento non è disponibile nelle dashboard precedenti.
type: "dashboard:delete:complete",
dashboard: {
id: 23,
title: "My Dashboard",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
url: "/embed/dashboards/...",
options: {
layouts: [
{
id: 1,
dashboard_id: 1,
type: "newspaper",
active: true,
column_width: null,
width: null,
deleted: false,
dashboard_layout_components: [
{
id: 1,
dashboard_layout_id: 1,
dashboard_element_id: 1,
row: 0,
column: 0,
width: 8,
height: 4,
deleted: false
},
{
id: 2,
dashboard_layout_id: 1,
dashboard_element_id: 2,
row: 0,
column: 8,
width: 8,
height: 4,
deleted: false
}
]
}
],
elements: {
1: {
title: "Total Orders",
title_hidden: false,
vis_config: {
type: "single_value",
font_size: "medium",
title: "Total Orders"
}
},
2: {
title: "Average Order Profit",
title_hidden: false,
vis_config: {
type: "single_value",
title: "Average Order Profit"
}
}
}
}
}
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | Il numero ID della dashboard. |
dashboard.title |
Stringa | Il titolo, come indicato nella parte superiore della dashboard. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso). |
dashboard.options |
Oggetto | Le proprietà e i valori del layout dashboard, del componente layout della dashboard e dell'elemento della dashboard. A tutte le proprietà restituite nell'oggetto options possono essere assegnati valori aggiornati usando l'evento dashboard:options:set . |
dashboard:tile:start
Questo evento viene creato quando un riquadro inizia a caricarsi o a eseguire query sui dati.
type: "dashboard:tile:start",
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | L'ID della dashboard a cui appartiene il riquadro. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso) a cui appartiene il riquadro. |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard a cui appartiene il riquadro. |
dashboard.title |
Stringa | Il titolo della dashboard, come mostrato nella parte superiore della dashboard a cui appartiene il riquadro. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard a cui appartiene il riquadro. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
tile.id |
Numero intero | Il numero ID dell'evento, non il riquadro. |
tile.title |
Stringa | Il titolo del riquadro, come mostrato nella parte superiore. |
tile.listen |
Oggetto | La dashboard globale filtra questo riquadro in ascolto. Questo oggetto ha il formato: {"Filter Label": "Filter Field", ...} |
dashboard:tile:complete
Questo evento viene creato quando un riquadro ha terminato l'esecuzione della query.
L'attributo errors
non è disponibile sulle dashboard precedenti.
type: "dashboard:tile:complete",
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
status: "complete",
truncated: false,
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | L'ID della dashboard a cui appartiene il riquadro. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso) a cui appartiene il riquadro. |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard a cui appartiene il riquadro. |
dashboard.title |
Stringa | Il titolo della dashboard, come mostrato nella parte superiore della dashboard a cui appartiene il riquadro. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard a cui appartiene il riquadro. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
status |
Stringa | Indica se la query del riquadro è stata completata correttamente. I valori possibili sono "complete" o "error" . |
truncated |
Booleano | Se i risultati della query del riquadro sono stati troncati perché la query restituisce più righe rispetto al limite di righe della query. Il limite di righe può essere un limite di righe specificato dall'utente o il limite predefinito di Looker di 5000. |
tile.id |
Numero intero | Il numero ID dell'evento, non il riquadro. |
tile.title |
Stringa | Il titolo del riquadro, come mostrato nella parte superiore. |
tile.listen |
Oggetto | La dashboard globale filtra questo riquadro in ascolto. Questo oggetto ha il formato: {"Filter Label": "Filter Field", ...} |
tile.errors |
Array di oggetti | Completato quando la proprietà status è "error" . Un array di oggetti che forniscono dettagli sull'errore, tra cui il testo del messaggio di errore, una descrizione più dettagliata dell'errore e la query SQL del riquadro che ha prodotto l'errore. Questa opzione non è disponibile nelle dashboard precedenti. |
dashboard:tile:download
Questo evento viene creato quando inizia il download dei dati di un riquadro.
type: "dashboard:tile:download",
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
tile: {
id: 123,
title: "Quarterly Sales"
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
fileFormat: "pdf"
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | L'ID della dashboard a cui appartiene il riquadro. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso) a cui appartiene il riquadro. |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard a cui appartiene il riquadro. |
dashboard.title |
Stringa | Il titolo della dashboard, come mostrato nella parte superiore della dashboard a cui appartiene il riquadro. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard a cui appartiene il riquadro. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
tile.id |
Numero intero | Il numero ID dell'evento, non il riquadro. |
tile.title |
Stringa | Il titolo del riquadro, come mostrato nella parte superiore. |
tile.listen |
Oggetto | La dashboard globale filtra questo riquadro in ascolto. Questo oggetto ha il formato: {"Filter Label": "Filter Field", ...} |
fileFormat |
Stringa | Il formato del riquadro scaricato (solo "pdf" al momento). |
dashboard:tile:explore
Questo evento viene creato quando un utente fa clic sull'opzione Esplora da qui in un riquadro della dashboard.
type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
Attributo | Formatta | Descrizione |
---|---|---|
label |
Stringa | Etichetta del pulsante. |
url |
Stringa | L'URL relativo (solo il percorso) dell'esplorazione da visualizzare. |
dashboard.id |
Numero | L'ID della dashboard a cui appartiene il riquadro. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso) a cui appartiene il riquadro. |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard a cui appartiene il riquadro. |
dashboard.title |
Stringa | Il titolo della dashboard, come mostrato nella parte superiore della dashboard a cui appartiene il riquadro. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard a cui appartiene il riquadro. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
tile.id |
Numero intero | Il numero ID dell'evento, non il riquadro. |
tile.title |
Stringa | Il titolo del riquadro, come mostrato nella parte superiore. |
tile.listen |
Oggetto | La dashboard globale filtra questo riquadro in ascolto. Questo oggetto ha il formato: {"Filter Label": "Filter Field", ...} |
dashboard:tile:view
Questo evento viene creato quando un utente fa clic sull'opzione Visualizza look originale in un riquadro della dashboard.
type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
Attributo | Formatta | Descrizione |
---|---|---|
label |
Stringa | Etichetta del pulsante. |
url |
Stringa | L'URL relativo (solo il percorso) dell'aspetto da visualizzare. |
dashboard.id |
Numero | L'ID della dashboard a cui appartiene il riquadro. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso) a cui appartiene il riquadro. |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard a cui appartiene il riquadro. |
dashboard.title |
Stringa | Il titolo della dashboard, come mostrato nella parte superiore della dashboard a cui appartiene il riquadro. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard a cui appartiene il riquadro. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
tile.id |
Numero intero | Il numero ID dell'evento, non il riquadro. |
tile.title |
Stringa | Il titolo del riquadro, come mostrato nella parte superiore. |
tile.listen |
Oggetto | La dashboard globale filtra questo riquadro in ascolto. Questo oggetto ha il formato: {"Filter Label": "Filter Field", ...} |
dashboard:filters:changed
Questo evento viene creato quando i filtri di una dashboard sono stati applicati o modificati.
L'attributo options
non è disponibile sulle dashboard precedenti.
type: "dashboard:filters:changed",
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
options: {
layouts: [
{
id: 1,
dashboard_id: 1,
type: "newspaper",
active: true,
column_width: null,
width: null,
deleted: false,
dashboard_layout_components: [
{
id: 1,
dashboard_layout_id: 1,
dashboard_element_id: 1,
row: 0,
column: 0,
width: 8,
height: 4,
deleted: false
},
{
id: 2,
dashboard_layout_id: 1,
dashboard_element_id: 2,
row: 0,
column: 8,
width: 8,
height: 4,
deleted: false
}
]
}
],
elements: {
1: {
title: "Total Orders",
title_hidden: false,
vis_config: {
type: "single_value",
font_size: "medium",
title: "Total Orders"
}
},
2: {
title: "Average Order Profit",
title_hidden: false,
vis_config: {
type: "single_value",
title: "Average Order Profit"
}
}
}
}
}
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | Il numero ID della dashboard. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso). |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard. |
dashboard.title |
Stringa | Il titolo, come indicato nella parte superiore della dashboard. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard.options |
Oggetto | Le proprietà e i valori del layout dashboard, del componente layout della dashboard e dell'elemento della dashboard. A tutte le proprietà restituite nell'oggetto options possono essere assegnati valori aggiornati usando l'evento dashboard:options:set . Questa opzione non è disponibile nelle dashboard precedenti. |
look:ready
Questo evento viene creato quando inizia a caricare i dati delle query, indipendentemente dal fatto che la query venga eseguita o meno.
type: "look:ready",
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
}
}
Attributo | Formatta | Descrizione |
---|---|---|
look.url |
Stringa | L'URL relativo (solo il percorso) |
look.absoluteUrl |
Stringa | L'URL completo Look |
look:run:start
Questo evento viene creato quando inizia il caricamento dei dati delle query e inizia l'esecuzione della query.
type: "look:run:start",
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
}
}
Attributo | Formatta | Descrizione |
---|---|---|
look.url |
Stringa | L'URL relativo (solo il percorso) |
look.absoluteUrl |
Stringa | L'URL completo Look |
look:run:complete
Questo evento viene creato al termine dell'esecuzione della query in un look.
type: look:run:complete
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
}
}
Attributo | Formatta | Descrizione |
---|---|---|
look.url |
Stringa | L'URL relativo (solo il percorso) |
look.absoluteUrl |
Stringa | L'URL completo Look |
look:save:complete
Questo evento viene creato quando un look viene modificato e salvato. Questo evento viene creato quando un utente esegue una delle seguenti attività:
- Fai clic sul pulsante Modifica per modificare il look, poi fai clic su Salva
- Salva un look con l'opzione di menu Salva > Salva con nome...
- Sposta un look da una cartella all'altra
Questo evento non viene creato se l'aspetto è salvato con l'opzione di menu Salva > Nella dashboard esistente o Modifica impostazioni.
type: look:save:complete
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
spaceId: 123
}
}
Attributo | Formatta | Descrizione |
---|---|---|
look.url |
Stringa | L'URL relativo (solo il percorso) |
look.absoluteUrl |
Stringa | L'URL completo Look |
look.spaceID |
Numero intero | L'ID cartella in cui è archiviato il look |
look:delete:complete
Questo evento viene creato quando un look viene spostato nella cartella Cestino.
type: look:delete:complete
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
}
}
Attributo | Formatta | Descrizione |
---|---|---|
look.url |
Stringa | L'URL relativo (solo il percorso) |
look.absoluteUrl |
Stringa | L'URL completo Look |
drillmenu:click
Questo evento viene creato quando un utente fa clic su un menu di drill in una dashboard creata con il parametro LookML link
. Ad esempio, il seguente codice LookML crea un menu drill-down in cui un utente può visualizzare i dati filtrati in base alla dimensione state
:
dimension: state {
type: string
sql: ${TABLE}.state ;;
link: {
label: "Filter by {{ state | encode_uri }}"
url: "filter::q={{ state | encode_uri }}"
icon_url: "https://google.com/favicon.ico"
}
}
Quando il filtro state
è impostato su Illinois
, l'evento drillmenu:click
restituisce quanto segue all'host dell'iframe:
type: "drillmenu:click",
label: "Filter by Illinois",
link_type: "url",
modal: false,
target: '_self',
url: "#filter::state=Illinois"
context: ' '
Attributo | Formatta | Descrizione |
---|---|---|
label |
Stringa | Etichetta del link mostrata nel menu drill |
link_type |
Stringa | Il tipo di oggetto nella destinazione del link |
modal |
Booleano | Indica se verrà utilizzata la finestra di dialogo drill-down anziché la navigazione nel browser. |
target |
Stringa | È _self se la destinazione del link sostituirà l'iframe corrente, _blank se la destinazione del link aprirà una nuova finestra |
url |
Stringa | L'URL della destinazione del link. |
context |
Stringa | Attributo interno utilizzato da alcuni tipi di visualizzazioni |
La sandbox dell'iframe impedisce l'apertura dei clic nel menu drill-down in una nuova finestra. Utilizza questi valori di sandbox all'interno del tag iframe:
sandbox = "allow-same-origin allow-scripts"
drillmodal:download
Questo evento viene creato quando un utente apre una finestra di dialogo dedicata da un riquadro della dashboard e fa clic sull'opzione Scarica.
{
type: "drillmodal:download",
dashboard: {
id: 23,
title: "My Dashboard",
url: "/embed/dashboards/…",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/…",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
drillExploreUrl: "/embed...",
fileFormat: "pdf"
}
Attributo | Formatta | Descrizione |
---|---|---|
dashboard.id |
Numero | L'ID della dashboard a cui appartiene il riquadro. |
dashboard.title |
Stringa | Il titolo della dashboard, come mostrato nella parte superiore della dashboard a cui appartiene il riquadro. |
dashboard.url |
Stringa | L'URL relativo della dashboard (solo il percorso) a cui appartiene il riquadro. |
dashboard.absoluteUrl |
Stringa | L'URL completo della dashboard a cui appartiene il riquadro. |
dashboard.dashboard_filters |
Oggetto | I filtri applicati alla dashboard a cui appartiene il riquadro. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
drillExploreUrl |
Stringa | L'URL relativo (solo il percorso) da scaricare. |
fileFormat |
Stringa | Il formato file del download dei dati. |
drillmodal:explore
Questo evento viene creato quando un utente fa clic sull'opzione Esplora da qui in una finestra di dialogo drill-down.
type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."
Attributo | Formatta | Descrizione |
---|---|---|
label |
Stringa | Etichetta del pulsante mostrata nel menu drill |
url |
Stringa | L'URL relativo relativo (solo il percorso) da visualizzare |
explore:ready
Questo evento viene creato all'inizio dell'esplorazione dei dati delle query, indipendentemente dal fatto che la query venga eseguita o meno.
type: "explore:ready",
explore: {
url: "/embed/explore/...",
absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
}
}
Attributo | Formatta | Descrizione |
---|---|---|
explore.url |
Stringa | L'URL relativo relativo (solo il percorso) |
explore.absoluteUrl |
Stringa | URL di esplorazione completo |
explore:run:start
Questo evento viene creato quando un'esplorazione inizia a caricare i dati delle query e inizia l'esecuzione della query.
type: "explore:run:start",
explore: {
url: "/embed/explore/...",
absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
}
}
Attributo | Formatta | Descrizione |
---|---|---|
explore.url |
Stringa | L'URL relativo relativo (solo il percorso) |
explore.absoluteUrl |
Stringa | URL di esplorazione completo |
explore:run:complete
Questo evento viene creato quando un'esplorazione termina l'esecuzione della query.
type: "explore:run:complete",
explore: {
url: "/embed/explore/...",
absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
}
}
Attributo | Formatta | Descrizione |
---|---|---|
explore.url |
Stringa | L'URL relativo relativo (solo il percorso) |
explore.absoluteUrl |
Stringa | URL di esplorazione completo |
explore:state:changed
Questo evento viene creato quando l'URL di una pagina Esplora cambia in seguito alle azioni dell'utente.
type: "explore:state:changed",
explore: {
url: "/embed/explore/...",
absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}
Attributo | Formatta | Descrizione |
---|---|---|
explore.url |
Stringa | L'URL relativo relativo (solo il percorso) |
explore.absoluteUrl |
Stringa | URL di esplorazione completo |
page:changed
Questo evento viene creato quando un utente accede a una nuova pagina all'interno dell'iframe.
type: "page:changed",
page: {
type: "dashboard",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}
Attributo | Formatta | Descrizione |
---|---|---|
page.type |
Stringa | Il tipo di pagina appena raggiunta, ad esempio "dashboard" , "look" o "explore" |
page.url |
Stringa | L'URL relativo (solo il percorso) della pagina appena raggiunta |
page.absoluteUrl |
Stringa | L'URL completo della pagina appena raggiunta |
page:properties:changed
Questo evento viene creato quando l'altezza di un iframe della dashboard cambia. Non è disponibile per Look o esplorazioni, in quanto questi elementi regolano automaticamente l'altezza in base alle dimensioni dell'iframe.
type: "page:properties:changed",
height: 1000
Attributo | Formatta | Descrizione |
---|---|---|
height |
Numero intero | L'altezza dell'iframe della dashboard in pixel |
Apportare modifiche all'iframe
Dopo aver preparato l'iframe per il recupero dei dati, puoi apportare modifiche all'iframe con i seguenti passaggi:
Scrittura della richiesta in formato JSON
Puoi apportare diverse modifiche all'iframe, che invierai in formato JSON. Le opzioni disponibili sono descritte nella sezione Riferimento azione in questa pagina. Non dimenticare di utilizzare JSON.stringify
per trasformare la tua azione in JSON, in questo modo:
var my_request = JSON.stringify(
{
type: "dashboard:run"
}
);
Pubblicazione della richiesta nella proprietà contentWindow
dell'iframe
Infine, pubblica il messaggio nella contentWindow
dell'iframe, in questo modo:
var my_iframe = document.getElementById("my_iframe_id");
my_iframe.contentWindow.postMessage(my_request, 'https://instance_name.looker.com');
Tabella di riepilogo delle azioni
La tabella seguente riepiloga le azioni. Fai clic su un'azione per visualizzarne i dettagli.
Azione | Descrizione azione |
---|---|
dashboard:load |
Carica una nuova dashboard nell'iframe, sostituendo una dashboard esistente. |
dashboard:run |
Esegue la dashboard nell'iframe. |
dashboard:filters:update |
Aggiorna un filtro di dashboard esistente nell'iframe. |
dashboard:options:set |
Scrive nuovi valori nel layout e nelle proprietà degli elementi della dashboard. |
dashboard:schedule_modal:open |
Apre lo scheduler che consente agli utenti di distribuire contenuti di Looker a varie destinazioni. |
dashboard:stop |
Arresta una dashboard che esegue o ricarica dati. |
look:run |
Esegue il look nell'iframe. |
look:filters:update |
Aggiorna un filtro Look esistente nell'iframe. |
explore:run |
Esegue l'esplorazione nell'iframe. |
explore:filters:update |
Aggiorna o rimuove un filtro Esplora esistente nell'iframe. |
Riferimento azioni
Di seguito sono riportate le azioni disponibili che puoi pubblicare nell'iframe incorporato:
dashboard:load
Questa azione non è disponibile nelle dashboard precedenti.
Utilizza questa azione per caricare una nuova dashboard nell'iframe, sostituendo una dashboard esistente. La nuova dashboard inizierà a eseguire query come se fosse stata aperta una nuova pagina della dashboard.
{
type: "dashboard:load",
id: "101",
pushHistory: false
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo dashboard:load indica che vuoi caricare una nuova dashboard nell'iframe. |
id |
Stringa | L'ID della dashboard da caricare. |
pushHistory |
Booleano | Se true , la dashboard caricata crea una nuova voce della cronologia del browser e l'utente può utilizzare il pulsante Indietro del browser per tornare alla dashboard precedente. Se false , la dashboard corrente è sostituita e non è possibile utilizzarla per tornare alla dashboard. |
dashboard:run
Utilizza questa azione per eseguire la dashboard nell'iframe. La stessa azione consiste nel premere il pulsante Esegui o Ricarica dati nella dashboard.
{
type: "dashboard:run"
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo dashboard:run indica che vuoi eseguire la dashboard. |
dashboard:filters:update
Utilizza questa azione per aggiornare un filtro della dashboard esistente nell'iframe. Non puoi aggiungere un nuovo filtro alla dashboard con questo metodo.
{
type: "dashboard:filters:update",
filters: {
"Sale date": "Last 28 days",
"Sale amount": "Greater than 100"
}
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo dashboard:filters:update indica che vuoi aggiornare i filtri utilizzati dalla dashboard. |
filters |
Oggetto | I nuovi filtri da applicare alla dashboard. Questo oggetto ha il formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard:options:set
Questa azione è disponibile dopo l'evento dashboard:run:complete
e non sulle dashboard precedenti.
L'incorporamento crea il messaggio e lo invia all'iframe, ma la dashboard non risponde fino a quando non si verifica l'evento dashboard:run:complete
. L'azione dashboard:options:set
scrive nuovi valori nel layout e nelle proprietà degli elementi della dashboard. Solo le proprietà che sono state restituite nell'attributo options
dell'evento dashboard:run:complete
possono essere aggiornate utilizzando dashboard:options:set
. Le proprietà impostate in precedenza che non sono state restituite dall'attributo options
dell'evento dashboard:run:complete
vengono ignorate.
{
type: "dashboard:options:set",
layouts: [
{
id: 1,
dashboard_id: 1,
type: "newspaper",
active: true,
column_width: null,
width: null,
deleted: false,
dashboard_layout_components: [
{
id: 1,
dashboard_layout_id: 1,
dashboard_element_id: 1,
row: 0,
column: 0,
width: 8,
height: 4,
deleted: false
},
{
id: 2,
dashboard_layout_id: 1,
dashboard_element_id: 2,
row: 0,
column: 8,
width: 8,
height: 4,
deleted: false
}
]
}
],
elements: {
1: {
title: "Total Orders",
title_hidden: false,
vis_config: {
type: "single_value",
font_size: "medium",
title: "Total Orders"
}
},
2: {
title: "Average Order Profit",
title_hidden: false,
vis_config: {
type: "single_value",
title: "Average Order Profit"
}
}
}
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo dashboard:options:set indica che vuoi scrivere nuovi valori per il layout e le proprietà degli elementi della dashboard. |
layouts |
Oggetto | Le proprietà del layout dashboard restituite dall'attributo options nell'evento dashboard:run:complete . Il formato sarà simile a: id: "string", |
layouts.dashboard_layout_components |
Oggetto | Uno o più oggetti del componente layout di dashboard restituiti dall'attributo options nell'evento dashboard:run:complete . Il formato sarà simile a:id: "string", |
elements |
Oggetto | Uno o più oggetti elemento dashboard restituiti dall'attributo options nell'evento dashboard:run:complete . Il formato sarà simile a:id: { |
dashboard:schedule_modal:open
Utilizza questa azione per aprire lo scheduler, che consente agli utenti di fornire contenuti Looker a varie destinazioni.
Questo evento non è disponibile nelle dashboard precedenti.
{
type: "dashboard:schedule_modal:open"
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'uso del tipo dashboard:schedule_modal:open indica che vuoi aprire la finestra di dialogo Pianificazione. |
dashboard:stop
Utilizza questa azione per interrompere una dashboard che sta eseguendo o ricaricando dati. La stessa azione viene eseguita facendo clic sul pulsante Annulla nella dashboard. Se la dashboard viene interrotta tramite dashboard:stop
, viene inviato un evento dashboard:run:complete
con status:
impostato su "stopped"
.
Questa azione non è disponibile nelle dashboard precedenti.
{
type: "dashboard:stop"
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo dashboard:stop indica che vuoi interrompere la dashboard in esecuzione. |
look:run
Utilizza questa azione per eseguire la query su cui si basa il look nell'iframe. È simile a premere il pulsante Esegui sul look, ad eccezione del fatto che look:run
interroga sempre il database direttamente e non recupera i dati dalla cache di Looker.
{
type: "look:run"
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo look:run indica che vuoi eseguire il look. |
look:filters:update
Utilizza questa azione per aggiornare un filtro Look esistente nell'iframe. Non puoi aggiungere un nuovo filtro al look utilizzando questo metodo.
{
type: "look:filters:update",
filters: {
"orders.created_at": "90 days",
"products.department": "sweaters"
}
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo look:filters:update indica che vuoi aggiornare i filtri utilizzati dal look. |
filters |
Oggetto | I nuovi filtri che vuoi applicare al look. Questo oggetto ha il formato: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...} |
explore:run
Utilizza questa azione per eseguire Explore nell'iframe. È simile a premere il pulsante Esegui in Esplora, ad eccezione del fatto che explore:run
interroga sempre il database direttamente e non recupera i dati dalla cache di Looker.
{
type: "explore:run"
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo explore:run indica che vuoi eseguire Explore. |
explore:filters:update
Utilizza questa azione per aggiornare o rimuovere un filtro Esplora esistente nell'iframe. Se includi un nuovo filtro che fa riferimento a un campo valido, verrà aggiunto il nuovo filtro a Esplora.
{
type: "explore:filters:update",
filters: {
"orders.created_at": "90 days",
"orders.status": "complete"
}
deleteFilters: ["products.department"]
}
Attributo | Formatta | Descrizione |
---|---|---|
type |
Stringa | L'utilizzo del tipo explore:filters:update indica che vuoi aggiornare i filtri utilizzati da Esplora. |
filters |
Oggetto | I nuovi filtri da applicare all'esplorazione. Se filters include un filtro che al momento non esiste nell'esplorazione, ma che fa riferimento a un campo valido, il filtro verrà aggiunto all'esplorazione. Questo oggetto ha il formato: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...} |
deleteFilters |
Array | I filtri esistenti che vuoi rimuovere dall'area di esplorazione. L'array ha il formato: ["view_name.field_name_1", "view_name.field_name_2", ...] |