Messaggi iframe di Looker incorporati

1. Prima di iniziare

Devi incorporare i contenuti di Looker all'interno di un iframe con incorporamento privato o incorporamento SSO. In questo codelab, interagiremo con il tuo iframe tramite JavaScript per rendere la tua pagina web più dinamica. La tua pagina web invierà e riceverà messaggi dai contenuti Looker incorporati dell'iframe.

Prerequisiti

Cosa imparerai a fare

  • Come preparare l'iframe e l'istanza di Looker per l'interazione JavaScript
  • Come ascoltare gli eventi dall'iframe
  • Come inviare messaggi di azione all'iframe

Che cosa ti serve

  • Accesso ai file HTML e JavaScript del codice frontend che gestisce l'iframe
  • Accesso alle impostazioni di incorporamento dell'amministratore nell'istanza di Looker

2. Preparazioni

Devi preparare l'iframe e l'istanza di Looker prima di poter interagire con l'iframe.

Aggiungi un attributo id all'iframe

Dovrai convalidare i messaggi provenienti dall'iframe. Per farlo, definisci un attributo id nell'iframe:

<iframe 
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>

Aggiungi il dominio dell'incorporamento all'attributo src dell'iframe

Determina il dominio della pagina web che ospita l'iframe. Supponiamo che l'URL della pagina web sia https://mywebsite.com/with/embed, quindi il dominio della pagina web sia https://mywebsite.com.

Se utilizzi l'incorporamento privato, aggiungi il dominio nel tag src dell'iframe come parametro di query embed_domain:

<iframe
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>

Se utilizzi l'incorporamento SSO, aggiungi il dominio come parametro di query embed_domain all'URL incorporato.

Autorizza il dominio dell'incorporamento nell'istanza di Looker

Infine, per consentire l'invio dei messaggi, devi inserire nella lista consentita il dominio dell'incorporamento nella tua istanza di Looker.

Vai alla pagina Incorpora nella sezione Amministratore dell'istanza di Looker. https://your_instance.looker.com/admin/embed

Nel campo Autorizzazione dominio incorporato, inserisci il dominio dell'incorporamento. Dopo averlo digitato, premi il tasto Tab per visualizzare il dominio in una casella. Non includere una barra finale /.

Seleziona il pulsante Aggiorna.

3. Ascolta i messaggi di evento dall'iframe

L'iframe con contenuti Looker incorporati invia messaggi alla pagina web host. Questi messaggi di evento contengono informazioni tempestive sui contenuti di Looker incorporati, ad esempio se è iniziato il caricamento della dashboard incorporata o se l'utente ha selezionato l'opzione di download nei contenuti incorporati. Riceviamo e analizziamo questi eventi.

Informazioni sullo schema degli oggetti evento

Lo schema dell'oggetto evento è:

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

L'evento avrà sempre una proprietà type che ti consente di determinare di quale evento si tratta. Tutte le altre proprietà specifiche degli eventi sono definite nel nostro riferimento per gli eventi.

Ricevere e analizzare l'evento

Aggiungi questo indirizzo nel punto in cui il codice JavaScript della tua pagina web inizializza o gestisce il tuo iframe:

window.addEventListener("message", function(message) {
  const iframeElement = document.getElementById("looker");
  if (message.source === iframeElement.contentWindow) {
    if (message.origin === "https://instance_name.looker.com") {
      const event = JSON.parse(message.data);
      switch (event.type):
        case "dashboard:run:start":
          console.log("The embedded dashboard has started loading"); 
    }
  }
});

Lo snippet di codice esegue le seguenti operazioni:

  1. Rimane in ascolto dell'evento "message" dall'oggetto window.
  2. Controlla che la proprietà source del messaggio sia l'iframe con i contenuti di Looker incorporati.
  3. Controlla che la proprietà origin del messaggio sia il dominio della tua istanza di Looker.
  4. JSON analizza la proprietà data del messaggio per accedere all'oggetto evento e analizzarlo.
  5. Attiva la proprietà type dell'oggetto evento per determinare di che evento si tratta e agire su di esso.

Ora la tua pagina web host può reagire dinamicamente agli eventi generati dai contenuti di Looker incorporati.

4. Invia messaggio di azione all'iframe

La pagina web host può anche inviare messaggi ai contenuti di Looker incorporati nell'iframe. Questi messaggi di azione possono modificare lo stato dei contenuti di Looker incorporati, ad esempio aggiornare i filtri nella dashboard incorporata. Creiamo un messaggio di azione che indichi alla dashboard incorporata di eseguire le query e di inviare il messaggio al tuo iframe.

Crea un messaggio di azione

Crea un messaggio di azione all'interno del codice JavaScript della pagina web:

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

L'oggetto action segue lo stesso formato dell'oggetto event precedente. Avrà sempre una proprietà type e poi proprietà specifiche per le azioni, definite nel nostro riferimento azione. Il messaggio di azione deve essere in formato JSON.

Inviare il messaggio di azione

All'interno del codice JavaScript della tua pagina web, invia l'azione in formato JSON al tuo iframe:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Definisci l'iframe a cui invierai l'azione.
  2. Chiama il metodo postMessage() sulla proprietà contentWindow dell'iframe per inviare il messaggio.

Ora la tua pagina web host può modificare in modo dinamico lo stato dei contenuti di Looker incorporati.

5. Informazioni aggiuntive

Complimenti! Ora puoi ascoltare eventi e inviare azioni ai contenuti Looker incorporati nel tuo iframe. Per saperne di più, consulta queste risorse: