Messaggi iframe di Looker incorporati

1. Prima di iniziare

Devi aver incorporato 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 Looker per l'interazione JavaScript
  • Come ascoltare gli eventi dall'iframe
  • Come inviare messaggi di azione all'iframe

Che cosa ti serve

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

2. Preparativi

Prima di poter interagire con l'iframe, devi preparare l'iframe e l'istanza di Looker.

Aggiungi un id attributo all'iframe

Devi convalidare i messaggi provenienti dall'iframe. Per farlo, definisci un attributo id sull'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, allora il dominio della pagina web è https://mywebsite.com.

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

<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 di incorporamento.

Inserire il dominio dell'incorporamento nella lista consentita dell'istanza di Looker

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

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

Nel campo Embedded Domain Allowlist (Elenco consentito di domini incorporati), inserisci il dominio dell'incorporamento. Dopo averlo digitato, premi il tasto Tab in modo che il dominio venga visualizzato in una casella. Non includere una barra finale /.

Seleziona il pulsante Aggiorna.

3. Ascoltare i messaggi di eventi dall'iframe

L'iframe con i contenuti di Looker incorporati invia messaggi alla pagina web host. Questi messaggi di evento contengono informazioni tempestive sui contenuti di Looker incorporati, ad esempio se il caricamento della dashboard incorporata è iniziato o se l'utente ha selezionato l'opzione Download all'interno dei contenuti incorporati. Riceviamo ed eseguiamo l'analisi di questi eventi.

Informazioni sullo schema dell'oggetto evento

Lo schema dell'oggetto evento è:

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

L'evento avrà sempre una proprietà type che ti consente di determinare di che tipo di evento si tratta. Tutte le altre proprietà specifiche dell'evento sono definite nel nostro riferimento agli eventi.

Ricevere e analizzare l'evento

Aggiungi questo codice al punto in cui il codice JavaScript della 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 queste operazioni:

  1. Ascolta l'evento "message" dell'oggetto window.
  2. Verifica che la proprietà source del messaggio sia l'iframe con i contenuti di Looker incorporati.
  3. Verifica che la proprietà origin del messaggio sia il dominio dell'istanza di Looker.
  4. JSON analizza la proprietà data del messaggio per accedere all'oggetto evento e analizzarlo.
  5. I selettori della proprietà type dell'oggetto evento per determinare di quale evento si tratta e agire di conseguenza.

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

4. Inviare un 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 Looker incorporati, ad esempio aggiornando i filtri nel dashboard incorporato. Creiamo un messaggio di azione che indichi alla dashboard incorporata di eseguire le query e inviare il messaggio all'iframe.

Creare 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 definite nel nostro riferimento alle azioni. Il messaggio di azione deve essere in formato JSON.

Inviare il messaggio di azione

All'interno del JavaScript della pagina web, invia l'azione formattata in JSON all'iframe:

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

Ora la pagina web host può modificare dinamicamente lo stato dei contenuti Looker incorporati.

5. Informazioni aggiuntive

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