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 l'iframe tramite JavaScript per rendere la pagina web più dinamica. La pagina web invierà e riceverà messaggi dai contenuti di Looker incorporati nell'iframe.

Prerequisiti

Cosa imparerai a fare

  • Come preparare l'iframe e l'istanza di Looker per l'interazione con 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. Preparativi

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'integrazione SSO, aggiungi il dominio come parametro di query embed_domain all'URL di incorporamento.

Autorizza il dominio dell'incorporamento nell'istanza di Looker

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

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

Nel campo Embedded Domain Allowlist, inserisci il dominio dell'embed. 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 i contenuti di Looker incorporati invia messaggi alla pagina web host. Questi messaggi event 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 Scarica all'interno dei 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 dell'evento sono definite nel nostro riferimento sugli eventi.

Ricevere e analizzare l'evento

Aggiungi questo codice al punto in cui il codice JavaScript della tua pagina web inizializza o gestisce l'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 e analizzare l'oggetto evento.
  5. Attiva la proprietà type dell'oggetto evento per determinare di che tipo di evento si tratta e intervenire di conseguenza.

Ora la tua pagina web host può reagire dinamicamente agli eventi emessi 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 della dashboard incorporata. Creiamo un messaggio di azione che indichi alla dashboard incorporata di eseguire le query e inviare il messaggio all'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 dell'azione che sono definite nel nostro riferimento all'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 pagina web dell'host può modificare dinamicamente lo stato dei contenuti di Looker incorporati.

5. Informazioni aggiuntive

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