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:
- 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. - 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. - 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:
- 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. - Wir rufen die Methode
send()
für das eingebettete Objekt auf, um einedashboard:run
-Aktion zu senden. Informationen zu weiteren Aktionen, die gesendet werden können, finden Sie in der Referenz zu Aktionen. - 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:
- SDK-Repository einbetten, um weitere Informationen zum Einbetten von Looker zu erhalten, insbesondere wenn Sie Looker-Inhalte in SSO einbetten möchten.
- Ereignisreferenz für alle verfügbaren Ereignisse und ihre Eigenschaften
- Referenz für Aktionen mit allen verfügbaren Aktionen und ihren Properties
- Best Practices für die Sicherheit beim Einbetten von Looker-Inhalten