Eventi JavaScript incorporati

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:

preparazione

Prima di poter interagire con l'iframe incorporato, devi intraprendere alcune azioni:

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 (/) in embed_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:

  1. 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.
  2. 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:
  • tileId: il numero ID del riquadro.
  • status: se la query del riquadro è stata eseguita correttamente, status restituisce "complete"; in caso contrario, status restituisce "error".
  • errors: 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 sulle dashboard precedenti.

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à:

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:

  1. Scrivi la richiesta in formato JSON.
  2. Pubblica la richiesta nell'contentWindow di iframe.

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",
dashboard_id: "string",
type: "newspaper",
active: boolean,
column_width: number,
width: number
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",
dashboard_layout_id: "string",
dashboard_element_id: "string",
row: number,
column: number,
width: number,
height: number,
deleted: boolean,
elements Oggetto Uno o più oggetti elemento dashboard restituiti dall'attributo options nell'evento dashboard:run:complete. Il formato sarà simile a:

id: {
  title: "string"

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", ...]