Comment intégrer Looker avec le SDK Embed

1. Avant de commencer

Dans cet atelier de programmation, nous utiliserons le SDK Looker Embed pour intégrer un tableau de bord Looker à votre page Web. Vous allez appeler une série de méthodes SDK qui créeront automatiquement un 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.
  • Vous devez connaître JavaScript et les promesses JavaScript.

Points abordés

  • Comment intégrer en privé votre contenu Looker avec le SDK d'intégration
  • Comment 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 interface utilisateur
  • Accès aux paramètres d'intégration de l'administrateur dans votre instance Looker

2. préparations

Vous devez préparer votre instance HTML et Looker avant de pouvoir intégrer 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-y un attribut id.

<div id="looker-embed" />

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

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

Déterminez le domaine de la page Web qui héberge votre contenu Looker intégré. 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.

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. Créer l'intégration

Nous allons maintenant créer et configurer le générateur d'intégration du SDK pour "créer" votre contenu Looker intégré.

Initialiser le SDK

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

// Import the Embed SDK as LookerEmbedSDK

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

Créer le générateur d'intégration

Ensuite, déterminez l'ID du tableau de bord Looker que vous souhaitez intégrer. Si votre tableau de bord se trouve à l'adresse 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 compilateur d'intégration. Cette méthode renvoie le générateur d'intégration.

LookerEmbedSDK.createDashboardWithId(12345)

Configurer et compiler le générateur d'intégrations

Maintenant, configurons le générateur d'intégration avant de lui demander de créer l'iframe intégrée. Ajoutez l'exemple de code suivant directement 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 générateur d'intégration renvoie le générateur d'intégration lui-même. Nous enchaînons donc les appels de méthode. Examinons chaque méthode :

  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 nombreuses 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

Après avoir suivi 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()

Vous avez maintenant intégré votre tableau de bord Looker à votre page Web avec le 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 actions et les messages que votre application reçoit de l'iFrame é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'intégration 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 lorsque l'iFrame est créé. L'événement nous indique quand le tableau de bord a fini de se charger. Consultez la référence des événements pour découvrir d'autres événements à écouter.

Envoyer des actions

Continuons avec notre 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. La promesse est résolue en un objet d'intégration représentant l'iframe intégrée une fois que le mécanisme d'envoi et de réception des messages a été initialisé.
  2. Nous appelons la méthode send() sur l'objet d'intégration pour envoyer une action dashboard:run. Consultez la documentation de référence sur les actions pour découvrir d'autres actions à envoyer.
  3. Nous ajoutons une méthode catch() en cas d'erreur lors de l'initialisation.

Dernière vérification

Après 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 votre tableau de bord Looker de manière privée, et envoyer et recevoir des messages depuis l'iFrame. Pour en savoir plus, consultez les ressources suivantes :