Looker mit dem Embed SDK einbetten

1. Hinweis

In diesem Codelab verwenden wir das Looker Embed SDK, um ein Looker-Dashboard in Ihre Webseite einzubetten. Sie rufen eine Reihe von SDK-Methoden auf, mit denen automatisch ein iFrame erstellt, Ihre Looker-Inhalte darin eingebettet und die Kommunikation zwischen Ihrem iFrame und Ihrer Webseite eingerichtet wird.

Voraussetzungen

  • Sie haben eine aktive Looker-Instanz.
  • Sie haben ein Looker-Dashboard, das Sie in Ihre Webanwendung oder Webseite einbetten möchten.
  • Sie sollten sich mit JavaScript und JavaScript-Promises auskennen.

Lerninhalte

  • Private Einbettung von Looker-Inhalten mit dem Embed SDK
  • Senden und Empfangen von Nachrichten (Aktionen und Ereignisse) mit dem Embed SDK für eingebettete Looker-Inhalte

Voraussetzungen

  • Zugriff auf das HTML und JavaScript Ihres Frontend-Codes
  • Zugriff auf die Einstellungen für das Einbetten von Administratoren in Ihrer Looker-Instanz

2. Vorbereitungen

Sie müssen Ihr HTML und Ihre Looker-Instanz vorbereiten, bevor Sie das Embed SDK verwenden können.

Container-Element für das Einbettungs-iFrame hinzufügen

Erstellen Sie im HTML-Code Ihrer Webseite ein div-Element und definieren Sie ein id-Attribut dafür.

<div id="looker-embed" />

Domain des eingebetteten Inhalts in der Looker-Instanz auf die Zulassungsliste setzen

Sie müssen die Domain des eingebetteten Inhalts in Ihrer Looker-Instanz auf die Zulassungsliste setzen.

Ermitteln Sie die Domain der Webseite, auf der Ihre eingebetteten Looker-Inhalte gehostet werden. Wenn die URL der Webseite https://mywebsite.com/with/embed lautet, ist die Domain der Webseite https://mywebsite.com.

Rufen Sie in Ihrer Looker-Instanz im Bereich Admin die Seite Einbetten auf. https://your_instance.looker.com/admin/embed

Geben Sie im Feld Zulassungsliste für eingebettete Domains die Domain der Einbettung ein. Drücken Sie nach der Eingabe die Tabulatortaste, damit die Domain in einem Feld angezeigt wird. Fügen Sie keinen abschließenden Schrägstrich / ein.

Wählen Sie die Schaltfläche Aktualisieren aus.

3. Einbettung erstellen

Erstellen und konfigurieren Sie nun den Einbettungs-Builder des SDK, um Ihre eingebetteten Looker-Inhalte zu erstellen.

SDK initialisieren

Importieren Sie zuerst das SDK und initialisieren Sie es dann mit der Domain Ihrer Looker-Instanz.

// Import the Embed SDK as LookerEmbedSDK

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

Embed-Builder erstellen

Ermitteln Sie als Nächstes die ID des Looker-Dashboards, das Sie einbetten möchten. Wenn sich Ihr Dashboard unter instance_name.looker.com/dashboard/12345 befindet, ist die ID des Dashboards 12345.

Rufen Sie die SDK-Methode createDashboardWithId() mit der Dashboard-ID auf, um einen Einbettungs-Builder zu erstellen. Diese Methode gibt den Embed-Builder zurück.

LookerEmbedSDK.createDashboardWithId(12345)

Einbettungs-Builder konfigurieren und erstellen

Konfigurieren wir nun den Einbettungsgenerator, bevor wir ihn anweisen, das eingebettete iFrame zu erstellen. Fügen Sie das folgende Codebeispiel direkt nach dem createDashboardWithId()-Methodenaufruf des vorherigen Codebeispiels ein.

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

Jede Methode des Embed-Builders gibt den Embed-Builder selbst zurück, sodass wir die Methodenaufrufe verketten. Sehen wir uns die einzelnen Methoden an:

  1. Mit der Methode appendTo() wird das übergeordnete Element des iFrames bestimmt. Wir übergeben die ID des HTML-Elements, das wir zuvor im Vorbereitungsschritt definiert haben.
  2. Mit der Methode withFrameBorder() wird das Attribut „frameborder“ für den iFrame festgelegt. Dies ist eine von mehreren Methoden, mit denen HTML-Attribute für das iFrame definiert werden.
  3. Mit der Methode build() wird der iFrame mit den konfigurierten HTML-Attributen erstellt.

Abschließende Prüfung

Nach den vorherigen Schritten sollte Ihr Code so aussehen:

// Import the Embed SDK as LookerEmbedSDK

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

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

Ihr Looker-Dashboard ist jetzt mit dem Embed SDK in Ihre Webseite eingebettet.

4. Eingebettete Nachrichten senden und empfangen

Sehen wir uns nun an, wie Sie mit dem Embed SDK Nachrichten mit Ihren eingebetteten Looker-Inhalten senden und empfangen. Die Nachrichten, die Ihre Anwendung an das iFrame sendet, werden als Aktionen bezeichnet. Die Nachrichten, die Ihre Anwendung vom iFrame empfängt, werden als Ereignisse bezeichnet.

Ereignisse empfangen

Wir arbeiten mit unserem vorherigen Code. Um auf Ereignisse zu warten, rufen wir die Methode on() des Embed-Builders auf, bevor wir die Methode build() aufrufen.

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

Hier rufen wir die Methode on() auf, um einen Ereignis-Listener für das Ereignis dashboard:run:complete festzulegen, das vom iFrame stammt, wenn das iFrame erstellt wird. Das Ereignis gibt an, wann das Dashboard geladen wurde. In der Ereignisreferenz finden Sie weitere Ereignisse, die erfasst werden können.

Aktionen senden

Wir fahren mit unserem vorherigen Code fort. Um Aktionen an das iFrame zu senden, rufen wir die connect()-Methode des Embed-Builders auf, nachdem wir die build()-Methode aufgerufen haben, um das Senden und Empfangen von Nachrichten mit dem iFrame zu initialisieren.

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

Sehen wir uns dieses Codebeispiel an:

  1. Wir rufen die Methode connect() auf, die ein Promise zurückgibt. Das Promise wird in ein Einbettungsobjekt aufgelöst, das den eingebetteten iFrame darstellt, nachdem der Mechanismus zum Senden und Empfangen von Nachrichten initialisiert wurde.
  2. Wir rufen die Methode send() für das Einbettungsobjekt auf, um eine dashboard:run-Aktion zu senden. In der Aktionsreferenz finden Sie weitere Aktionen, die Sie senden können.
  3. Wir fügen eine catch()-Methode hinzu, falls bei der Initialisierung Fehler auftreten.

Abschließende Prüfung

Nach den vorherigen Schritten sollte Ihr Code so aussehen:

// 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!')

Sie können jetzt mit Ihrem eingebetteten Looker-Dashboard kommunizieren.

5. Weitere Informationen

Glückwunsch! Sie können jetzt das Embed SDK verwenden, um Ihr Looker-Dashboard privat einzubetten und Nachrichten über den iFrame zu senden und zu empfangen. Weitere Informationen finden Sie in den folgenden Ressourcen: