Messagerie iFrame Looker intégrée

1. Avant de commencer

Vous devez avoir intégré du contenu Looker dans un iFrame avec l'intégration privée ou l'intégration SSO. Dans cet atelier de programmation, nous allons interagir avec votre iFrame via JavaScript pour rendre votre page Web plus dynamique. Votre page Web enverra des messages au contenu Looker intégré à l'iframe et en recevra.

Prérequis

Points abordés

  • Préparer votre iFrame et votre instance Looker pour l'interaction JavaScript
  • Écouter les événements de votre iFrame
  • Envoyer des messages d'action à votre iFrame

Prérequis

  • Accès au code HTML et JavaScript de votre code d'interface qui gère l'iFrame
  • Accès aux paramètres d'intégration de l'administrateur dans votre instance Looker

2. préparations

Vous devez préparer votre iframe et votre instance Looker avant de pouvoir interagir avec l'iframe.

Ajoutez un attribut id à l'iFrame.

Vous devrez valider les messages provenant de l'iFrame. Pour ce faire, définissez un attribut id sur l'iFrame :

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

Ajoutez le domaine de l'intégration à l'attribut src de l'iFrame.

Déterminez le domaine de la page Web hébergeant l'iFrame. Par exemple, si l'URL d'une page Web est https://mywebsite.com/with/embed, le domaine de la page Web est https://mywebsite.com.

Si vous utilisez l'intégration privée, ajoutez le domaine en tant que paramètre de requête embed_domain dans le src de l'iframe :

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

Si vous utilisez l'intégration de l'authentification unique, ajoutez le domaine en tant que paramètre de requête embed_domain à l'URL d'intégration.

Ajouter le domaine de l'intégration à la liste d'autorisation dans l'instance Looker

Enfin, vous devez ajouter le domaine de l'intégration à la liste autorisée de votre instance Looker pour autoriser l'envoi de messages.

Accédez à la page Intégrer dans la section Admin de votre instance Looker. https://your_instance.looker.com/admin/embed

Dans le champ Liste d'autorisation des domaines intégrés, saisissez le domaine de l'intégration. Après l'avoir saisi, appuyez sur la touche Tabulation pour que le domaine s'affiche dans une zone. N'incluez pas de barre oblique finale /.

Sélectionnez le bouton Mettre à jour.

3. Écouter les messages d'événement de l'iFrame

Votre iFrame avec du contenu Looker intégré envoie des messages à sa page Web hôte. Ces messages d'événement contiennent des informations à jour sur le contenu Looker intégré, par exemple si le tableau de bord intégré a commencé à se charger ou si l'utilisateur a sélectionné l'option de téléchargement dans le contenu intégré. Recevons et analysons ces événements.

Comprendre le schéma de l'objet d'événement

Le schéma de l'objet d'événement est le suivant :

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

L'événement aura toujours une propriété type qui vous permettra de déterminer de quel événement il s'agit. Toutes les autres propriétés spécifiques aux événements sont définies dans notre documentation de référence sur les événements.

Recevoir et analyser l'événement

Ajoutez ce code à l'endroit où le code JavaScript de votre page Web initialise ou gère votre 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"); 
    }
  }
});

L'extrait de code effectue les opérations suivantes :

  1. Écoute l'événement "message" de l'objet window.
  2. Vérifie que la propriété source du message est l'iFrame contenant le contenu Looker intégré.
  3. Vérifie que la propriété origin du message correspond au domaine de votre instance Looker.
  4. JSON analyse la propriété data du message pour accéder à l'objet d'événement et l'analyser.
  5. Active la propriété type de l'objet événement pour déterminer de quel événement il s'agit et agir en conséquence.

Votre page Web hôte peut désormais réagir de manière dynamique aux événements émis par votre contenu Looker intégré.

4. Envoyer un message d'action à l'iFrame

Votre page Web hôte peut également envoyer des messages au contenu Looker intégré à votre iFrame. Ces messages d'action peuvent modifier l'état de votre contenu Looker intégré, par exemple en mettant à jour les filtres de votre tableau de bord intégré. Créons un message d'action qui indique à votre tableau de bord intégré d'exécuter ses requêtes et d'envoyer le message à votre iFrame.

Créer un message d'action

Créez un message d'action dans le code JavaScript de votre page Web :

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

L'objet action suit le même format que l'objet event précédent. Il aura toujours une propriété type, puis des propriétés spécifiques à l'action, définies dans notre documentation de référence sur les actions. Le message d'action doit être au format JSON.

Envoyer le message d'action

Dans le code JavaScript de votre page Web, envoyez l'action au format JSON à votre iFrame :

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Déterminez l'iframe auquel vous enverrez votre action.
  2. Appelez la méthode postMessage() sur la propriété contentWindow de l'iFrame pour envoyer le message.

Votre page Web hôte peut désormais modifier dynamiquement l'état de votre contenu Looker intégré.

5. Informations supplémentaires

Félicitations ! Vous pouvez désormais écouter les événements et envoyer des actions au contenu Looker intégré à votre iFrame. Pour en savoir plus, consultez les ressources suivantes :