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
  • Machen Sie sich mit JavaScript- und JavaScript-Versprechen vertraut.

Aufgaben in diesem Lab

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

Voraussetzungen

  • Zugriff auf den HTML- und JavaScript-Code Ihres Front-End-Codes
  • Zugriff auf die Administrator-Einbettungseinstellungen 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.

Gehen Sie im Bereich Admin Ihrer Looker-Instanz zur Seite Einbetten. https://your_instance.looker.com/admin/embed

Geben Sie in das Feld Eingebettete Domain-Zulassungsliste die Domain der Einbettung 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. Ihren eingebetteten Looker-Inhalt.

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

Builder für Einbettungen 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 Einbettungs-Builder zu erstellen. Diese Methode gibt den Einbettungs-Builder zurück.

LookerEmbedSDK.createDashboardWithId(12345)

Einbettungs-Builder konfigurieren und erstellen

Nun konfigurieren wir den Embed Builder, bevor wir ihn auffordern, den eingebetteten iFrame zu erstellen. Fügen Sie das folgende Codebeispiel direkt nach dem createDashboardWithId()-Methodenaufruf des vorherigen Codebeispiels hinzu.

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

Jede Methode des Einbettungs-Builders gibt den Einbettungs-Builder selbst zurück, daher verketten wir die Methodenaufrufe miteinander. Sehen wir uns die beiden Methoden einmal genauer an:

  1. Mit der Methode appendTo() wird das übergeordnete Element des iFrames bestimmt. Wir übergeben die ID des HTML-Elements, das Sie zuvor im Vorbereitungsschritt definiert haben.
  2. Mit der Methode withFrameBorder() wird das Attribut „frame-margin“ im iFrame festgelegt. Dies ist eine von mehreren Methoden zum Definieren von HTML-Attributen im iFrame.
  3. Die Methode build() erstellt den iFrame mit den konfigurierten HTML-Attributen

Letzte Prüfung

Mit 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 und die Nachrichten, die Ihre App von dem iFrame empfängt, als Ereignisse bezeichnet.

Ereignisse empfangen

Wir verwenden den vorigen Code. Um auf Ereignisse zu warten, rufen wir die on()-Methode des Einbettungs-Builders auf, bevor wir die build()-Methode aufrufen.

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

Hier rufen wir die Methode on() auf, um einen Event-Listener für das dashboard:run:complete-Ereignis festzulegen, das beim Erstellen des iFrames vom iFrame kommt. Das Ereignis teilt uns mit, wann das Dashboard fertig geladen ist. In der Ereignisreferenz finden Sie weitere Ereignisse, die überwacht werden sollen.

Aktionen senden

Fahren wir mit dem vorherigen Code fort. Um Aktionen an den iFrame zu senden, rufen wir die Methode connect() 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 einmal genauer 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 für den Fall hinzu, dass bei der Initialisierung Fehler auftreten.

Letzte 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 diesen Ressourcen: