Messagerie iFrame Looker intégrée

1. Avant de commencer

Le contenu Looker doit être intégré dans un iFrame avec une intégration privée ou SSO. Dans cet atelier de programmation, nous allons interagir avec votre iFrame via JavaScript afin de 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 les interactions JavaScript
  • Écouter des événements depuis votre iFrame
  • Envoyer des messages d'action vers 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 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'élément intégré à l'attribut src de l'iFrame.

Déterminez le domaine de la page Web hébergeant l'iFrame. Imaginons que l'URL de la page Web est https://mywebsite.com/with/embed et que le domaine de la page Web soit 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 tag 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 SSO, ajoutez le domaine en tant que paramètre de requête embed_domain à l'URL d'intégration.

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

Enfin, vous devez ajouter le domaine d'intégration à la liste d'autorisation dans votre instance Looker pour permettre l'envoi de messages.

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

Dans le champ Autorisation de domaine intégré, saisissez le domaine de l'élément intégré. 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 Update (Mettre à jour).

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

Votre iFrame avec du contenu Looker intégré envoie des messages à la page Web qui l'héberge. Ces messages d'événement contiennent des informations d'actualité sur le contenu Looker intégré, par exemple si le chargement du tableau de bord intégré a commencé ou si l'utilisateur a sélectionné l'option "Télécharger" dans le contenu intégré. Nous allons recevoir et analyser ces événements.

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

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

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

L'événement sera toujours associé à une propriété type qui vous permet 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 la documentation de référence sur les événements.

Recevoir et analyser l'événement

Ajoutez ceci à 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. Il écoute l'événement "message" à partir de l'objet window.
  2. Vérifie que la propriété source du message est l'iFrame avec le contenu Looker intégré.
  3. Vérifiez que la propriété origin du message est le domaine de votre instance Looker.
  4. JSON analyse la propriété data du message pour accéder à l'objet é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é, comme la mise à jour des filtres de votre tableau de bord intégré. Nous allons maintenant créer un message d'action indiquant à votre tableau de bord intégré d'exécuter ses requêtes et d'envoyer le message vers 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. Elle comportera toujours une propriété type, puis des propriétés spécifiques aux actions, qui sont définies dans la documentation de référence des 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 vers lequel vous allez envoyer 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 de façon dynamique l'état de votre contenu Looker intégré !

5. Informations complémentaires

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