Comment intégrer Looker avec le SDK Embed

1. Avant de commencer

Dans cet atelier de programmation, nous allons utiliser le SDK Embed de Looker pour intégrer un tableau de bord Looker dans votre page Web. Vous allez appeler une série de méthodes de SDK qui créeront automatiquement une iFrame, y intégreront votre contenu Looker et configureront les communications entre votre iFrame et votre page Web.

Prérequis

  • disposer d'une instance Looker en cours d'exécution ;
  • Vous disposez d'un tableau de bord Looker que vous souhaitez intégrer à votre application Web ou à votre page Web.
  • Familiarisez-vous avec les promesses JavaScript et JavaScript.

Points abordés

  • Intégrer en mode privé votre contenu Looker avec le SDK Embed
  • Envoyer et recevoir des messages (actions et événements) avec votre contenu Looker intégré à l'aide du SDK Embed

Prérequis

  • Accès au code HTML et JavaScript de votre code côté client
  • Accès aux paramètres d'intégration administrateur de votre instance Looker

2. Préparations

Vous devez préparer votre code HTML et votre instance Looker avant de pouvoir l'intégrer avec le SDK Embed.

Ajouter l'élément conteneur de l'iFrame d'intégration

Dans le code HTML de votre page Web, créez un élément div et définissez un attribut id sur celui-ci.

<div id="looker-embed" />

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

Vous devez ajouter le domaine d'intégration à la liste d'autorisation de votre instance Looker.

Déterminez le domaine de la page Web hébergeant votre contenu Looker intégré. Si l'URL de la page Web est https://mywebsite.com/with/embed, le domaine de la page Web est https://mywebsite.com.

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

Dans le champ Embedded Domain Allowlist (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 faire apparaître le domaine dans une zone. N'incluez pas de barre oblique finale /.

Sélectionnez le bouton Mettre à jour.

3. Créer l'élément intégré

Nous allons maintenant créer et configurer le compilateur d'intégrations du SDK pour "construire" votre contenu Looker intégré.

Initialiser le SDK

Commencez par importer, puis initialiser le SDK avec le domaine de votre instance Looker.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

Créer l'outil de création d'intégrations

Déterminez ensuite l'ID du tableau de bord Looker que vous souhaitez intégrer. Si votre tableau de bord se trouve à instance_name.looker.com/dashboard/12345, son ID est 12345.

Appelez la méthode createDashboardWithId() du SDK avec l'ID du tableau de bord pour créer un outil de création d'intégration. Cette méthode renvoie le compilateur d'éléments intégrés.

LookerEmbedSDK.createDashboardWithId(12345)

Configurer et créer l'outil de création d'intégration

À présent, configurons le compilateur d'intégrations avant de lui demander de créer l'iFrame intégré. Ajoutez l'exemple de code suivant immédiatement après l'appel de la méthode createDashboardWithId() de l'exemple de code précédent.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Chaque méthode du compilateur d'éléments intégrés renvoie le compilateur lui-même. Les appels de méthode sont donc chaînés. Examinons chacune de ces méthodes:

  1. La méthode appendTo() détermine l'élément parent de l'iFrame. Nous transmettons l'ID de l'élément HTML que nous avons défini précédemment à l'étape de préparation.
  2. La méthode withFrameBorder() définit l'attribut frame-border sur l'iframe. Il s'agit de l'une des méthodes permettant de définir des attributs HTML sur l'iFrame.
  3. La méthode build() crée l'iframe avec les attributs HTML configurés.

Dernière vérification

Avec les étapes précédentes, votre code devrait se présenter comme suit:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Votre tableau de bord Looker est désormais intégré à votre page Web grâce au SDK Embed.

4. Envoyer et recevoir des messages intégrés

Voyons maintenant comment envoyer et recevoir des messages avec votre contenu Looker intégré à l'aide du SDK Embed. Nous appelons les messages que votre application envoie à l'iFrame en tant qu'actions et ceux que votre application reçoit à partir de l'iFrame en tant qu'événements.

Recevoir des événements

Reprenons notre code précédent. Pour écouter les événements, nous appelons la méthode on() du générateur d'éléments intégrés avant d'appeler la méthode build().

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

Ici, nous appelons la méthode on() pour définir un écouteur d'événements sur l'événement dashboard:run:complete provenant de l'iframe lors de sa création. L'événement nous indiquera quand le chargement du tableau de bord sera terminé. Consultez la référence de l'événement pour découvrir d'autres événements à écouter.

Envoyer des actions

Continuons avec le code précédent. Pour envoyer des actions à l'iframe, nous appelons la méthode connect() du générateur d'intégration après avoir appelé la méthode build() pour initialiser l'envoi et la réception de messages avec l'iframe.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

Examinons cet exemple de code:

  1. Nous appelons la méthode connect(), qui renvoie une promesse. Une fois le mécanisme d'envoi et de réception des messages initialisé, la promesse renvoie un objet d'intégration représentant l'iFrame incorporé.
  2. Nous appelons la méthode send() sur l'objet intégré pour envoyer une action dashboard:run. Consultez la documentation de référence sur les actions pour connaître les autres actions à envoyer.
  3. Nous ajoutons une méthode catch() au cas où des erreurs se produiraient lors de l'initialisation.

Vérification finale

Avec les étapes précédentes, votre code devrait se présenter comme suit:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

Vous pouvez désormais communiquer avec votre tableau de bord Looker intégré !

5. Informations supplémentaires

Félicitations ! Vous pouvez désormais utiliser le SDK d'intégration pour intégrer de manière privée votre tableau de bord Looker, et envoyer et recevoir des messages depuis l'iFrame. Pour en savoir plus, consultez les ressources suivantes: