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 à 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'intégration à 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 l'attribut "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'intégration à 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é. Une fois le domaine saisi, appuyez sur la touche Tabulation pour qu'il 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énements de l'iFrame

Votre iFrame avec du contenu Looker intégré envoie des messages à la page Web hôte. 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 de l'objet événement

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

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

L'événement comporte toujours 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 à l'événement sont définies dans notre documentation de référence sur les événements.

Recevoir et analyser l'événement

Ajoutez-le à l'emplacement 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 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 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 y réagir.

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é. 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 à votre iFrame.

Créer un message d'incitation à l'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 comporte toujours une propriété type, puis des propriétés spécifiques à l'action définies dans notre 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 vers votre iFrame:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Déterminez l'iframe à laquelle 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 l'état de votre contenu Looker intégré de façon dynamique.

5. Informations supplémentaires

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