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 werden eine Reihe von SDK-Methoden aufrufen, die automatisch einen iFrame erstellen, Ihre Looker-Inhalte darin einbetten und die Kommunikation zwischen Ihrem iFrame und Ihrer Webseite einrichten.

Voraussetzungen

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

Aufgaben in diesem Lab

  • Looker-Inhalte mit dem Embed SDK privat einbetten
  • Nachrichten (Aktionen und Ereignisse) mit eingebetteten Looker-Inhalten über das Embed SDK senden und empfangen

Voraussetzungen

  • Zugriff auf den HTML- und JavaScript-Code Ihres Front-End-Codes
  • Zugriff auf die Einstellungen für das Einbetten von Inhalten in Ihrer Looker-Instanz

2. Vorbereitungen

Sie müssen Ihre HTML- und Looker-Instanz vorbereiten, bevor Sie sie mit dem Embed SDK einbetten können.

Containerelement des eingebetteten iFrames hinzufügen

Erstelle im HTML-Code deiner Webseite ein div-Element und definiere dafür ein id-Attribut.

<div id="looker-embed" />

Domain der Einbettung in der Looker-Instanz auf die Zulassungsliste setzen

Sie müssen die Domain der Einbettung in Ihrer Looker-Instanz auf die Zulassungsliste setzen.

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

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

Gib in das Feld Zulassungsliste für eingebettete Domains die Domain des Embeds ein. Drücken Sie nach der Eingabe die Tabulatortaste, sodass die Domain in einem Feld angezeigt wird. Fügen Sie keinen Schrägstrich (/) ein.

Wählen Sie die Schaltfläche Aktualisieren aus.

3. Einbettung erstellen

Jetzt erstellen und konfigurieren wir den Embed Builder des SDKs, 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

Bestimmen 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, lautet die Dashboard-ID 12345.

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

LookerEmbedSDK.createDashboardWithId(12345)

Einbettungs-Builder konfigurieren und erstellen

Konfigurieren wir nun den Einbettungs-Builder, bevor wir ihm den Befehl zum Erstellen des eingebetteten Iframes geben. Fügen Sie das folgende Codebeispiel direkt nach dem createDashboardWithId()-Methodenaufruf des vorherigen Codebeispiels hinzu.

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

Jede Methode des Embed-Builders gibt den Embed-Builder selbst zurück. Daher ketten wir die Methodenaufrufe aneinander. 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 „frame-margin“ im iFrame festgelegt. Dies ist eine von mehreren Methoden, mit denen HTML-Attribute im IFrame definiert werden.
  3. Die Methode build() erstellt den iFrame mit den konfigurierten HTML-Attributen

Letzte 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 den Iframe sendet, werden als Aktionen bezeichnet. Die Nachrichten, die Ihre Anwendung vom Iframe empfängt, werden als Ereignisse bezeichnet.

Ereignisse empfangen

Verwenden wir dazu den Code aus dem vorherigen Beispiel. Um Ereignisse zu überwachen, 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 wird die Methode on() aufgerufen, um einen Ereignislistener für das Ereignis dashboard:run:complete festzulegen, das vom iFrame stammt, wenn der iFrame erstellt wird. Anhand des Ereignisses können wir erkennen, wann das Dashboard vollständig geladen ist. In der Ereignisreferenz finden Sie weitere Ereignisse, die Sie sich anhören können.

Aktionen senden

Fahren wir mit dem vorherigen Code fort. Um Aktionen an den Iframe zu senden, wird die Methode connect() des Embed-Builders aufgerufen, nachdem die Methode build() aufgerufen wurde, um das Senden und Empfangen von Nachrichten über den 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 eingebettetes Objekt aufgelöst, das den eingebetteten iFrame darstellt, nachdem der Mechanismus zum Senden und Empfangen der Nachricht initialisiert wurde.
  2. Wir rufen die Methode send() für das eingebettete Objekt auf, um eine dashboard:run-Aktion zu senden. Informationen zu weiteren Aktionen, die gesendet werden können, finden Sie in der Referenz zu Aktionen.
  3. Wir fügen eine catch()-Methode hinzu, falls bei der Initialisierung Fehler auftreten.

Abschließende Prüfung

Mit den vorherigen Schritten sollte Ihr Code jetzt 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: