Ein einfaches Beispiel dafür, wie UI-Komponenten eine eingebettete Anwendung verbessern können, besteht darin, mit ihnen für Dashboards Navigation mit Tabs zu erstellen:
Im folgenden Beispiel werden einer einfachen TypeScript-Erweiterung, die mit dem Looker-Extension Framework erstellt wurde, Dashboards mit Tabs hinzugefügt.
Damit Sie dieses Beispiel durchgehen können, muss Ihre Einrichtung die Anforderungen erfüllen. Führen Sie dann die folgenden Schritte aus:
- Einfache TypeScript-Erweiterung erstellen
- Erstellen Sie die Datei
src/Dashboards.tsx, um Dashboards zu verbinden und zu speichern. - Erstellen Sie die Datei
src/Tabs.tsx, um die KomponenteTabszu speichern. - Ersetzen Sie die HelloWorld-Referenz in
src/App.tsx. - Aktualisiere die Datei
manifest.lkmlmit der Berechtigung zum Einbetten. - Veröffentlichen Sie die Erweiterung in Ihrer Looker-Instanz.
Voraussetzungen
Sie benötigen einige Elemente, bevor Sie beginnen können:
- Sie benötigen Zugriff auf eine Looker-Instanz, in der das Extension Framework aktiviert ist.
- Sie benötigen die Berechtigung
develop. - Sie sollten mehrere nutzerdefinierte Dashboards in Looker haben, die Sie auf den UI-Tabs platzieren können.
- Unabhängig davon, ob Sie das Erweiterungsframework oder Ihre eigene eigenständige React-Anwendung erstellen, ist es wichtig, sich mit der Looker API zu authentifizieren und Zugriff auf das Looker SDK-Objekt zu haben. Weitere Informationen finden Sie unter Looker API-Authentifizierung oder Erweiterungs-Framework.
- In diesem Beispiel wird das Looker Embed SDK verwendet. Damit das Embed SDK für Ihre Instanz ausgeführt werden kann, muss
http://localhost:8080in der Zulassungsliste für eingebettete Domains auf der Seite Einbetten des Admin-Bereichs aufgeführt sein. - Prüfen Sie, ob Sie das NPM-Paket für Looker-Komponenten installiert haben. Informationen zur Installation und Verwendung des Komponentenpakets finden Sie im README-Dokument auf GitHub und NPM.
Schritt 1: Einfache TypeScript-Erweiterung erstellen
Folgen Sie der Anleitung auf der Dokumentationsseite Einführung in das Erstellen einer Looker-Erweiterung, um eine Erweiterung zu erstellen. Nehmen Sie die folgenden Änderungen vor, um die Erweiterung in eine TypeScript-Erweiterung umzuwandeln:
- Wenn Sie die Erweiterungsvorlage mit dem
create-looker-extension-Tool erstellen, wählen Sie im zweiten Schritt TypeScript als Sprache aus. - Wenn Sie das Git-Repository klonen, um die Erweiterungsvorlage zu erstellen, rufen Sie im zweiten Schritt das Verzeichnis
extension-examples/react/TypeScript/helloworld-tsauf.
Schritt 2: Datei src/Dashboards.tsx zum Verbinden und Speichern von Dashboards erstellen
Erstellen Sie im Verzeichnis src Ihrer neuen Erweiterung eine Dashboards.tsx-Datei. Über diese Datei werden die in Looker erstellten Dashboards verbunden und gespeichert.
Fügen Sie den folgenden Code in die Datei ein. Mit diesem Code werden drei Dashboard-Objekte erstellt und anhand ihrer ID angegeben. Sie können je nach Bedarf mehr oder weniger Dashboard-Objekte erstellen.
Es gibt drei Stellen im Code einer Instanz-URL, https://mycompany.looker.com. Ändern Sie diese in die URL Ihrer Looker-Instanz.
import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";
export const EmbeddedDashboard1 = (props: { id: number | string }) => {
const [dashboard, setDashboard] = React.useState();
const setupDashboard = (dashboard: any) => {
setDashboard(dashboard);
};
const embedCtrRef = useCallback((el) => {
const hostUrl = "https://mycompany.looker.com/";
if (el && hostUrl) {
el.innerHTML = "";
LookerEmbedSDK.init(hostUrl);
LookerEmbedSDK.createDashboardWithId(props.id)
.withNext()
.appendTo(el)
.build()
.connect()
.then(setupDashboard)
.catch((error) => {
console.error("Connection error", error);
});
}
}, []);
return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};
export const EmbeddedDashboard2 = (props: { id: number }) => {
const [dashboard, setDashboard] = React.useState();
const setupDashboard = (dashboard: any) => {
setDashboard(dashboard);
};
const embedCtrRef = useCallback((el) => {
const hostUrl = "https://mycompany.looker.com/";
if (el && hostUrl) {
el.innerHTML = "";
LookerEmbedSDK.init(hostUrl);
LookerEmbedSDK.createDashboardWithId(props.id)
.withNext()
.appendTo(el)
.build()
.connect()
.then(setupDashboard)
.catch((error) => {
console.error("Connection error", error);
});
}
}, []);
return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};
export const EmbeddedDashboard3 = (props: { id: number }) => {
const [dashboard, setDashboard] = React.useState();
const setupDashboard = (dashboard: any) => {
setDashboard(dashboard);
};
const embedCtrRef = useCallback((el) => {
const hostUrl = "https://mycompany.looker.com/";
if (el && hostUrl) {
el.innerHTML = "";
LookerEmbedSDK.init(hostUrl);
LookerEmbedSDK.createDashboardWithId(props.id)
.withNext()
.appendTo(el)
.build()
.connect()
.then(setupDashboard)
.catch((error) => {
console.error("Connection error", error);
});
}
}, []);
return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};
export const EmbedContainer = styled.div`
width: 100%;
height: 95vh;
& > iframe {
width: 100%;
height: 100%;
}
`;
Im vorherigen Codebeispiel geschieht Folgendes:
Die Importanweisungen laden die erforderlichen Abhängigkeiten.
import React, { useCallback } from "react"; import { LookerEmbedSDK } from "@looker/embed-sdk"; import styled from "styled-components";Mit dem nächsten Codeblock wird ein
EmbeddedDashboard1-Objekt erstellt. Dabei handelt es sich um einEmbedContainer-Objekt, das einen Dashboard-iFrame enthält. Der iFrame wird vom Looker Embed SDK mithilfe der Dashboard-ID generiert, die an ihn übergeben wurde. Aktualisieren Siehttps://mycompany.looker.com/auf die URL Ihrer Looker-Instanz.export const EmbeddedDashboard1 = (props: { id: number | string }) => { const [dashboard, setDashboard] = React.useState(); const setupDashboard = (dashboard: any) => { setDashboard(dashboard); }; const embedCtrRef = useCallback((el) => { const hostUrl = "https://mycompany.looker.com/"; if (el && hostUrl) { el.innerHTML = ""; LookerEmbedSDK.init(hostUrl); LookerEmbedSDK.createDashboardWithId(props.id) .withNext() .appendTo(el) .build() .connect() .then(setupDashboard) .catch((error) => { console.error("Connection error", error); }); } }, []); return <EmbedContainer ref={embedCtrRef}></EmbedContainer>; };In den nächsten beiden Codeblöcken wird dieser Vorgang für
EmbeddedDashboard2undEmbeddedDashboard3wiederholt. Aktualisieren Siehttps://mycompany.looker.com/noch einmal auf die URL Ihrer Looker-Instanz.Der letzte Block fügt dem EmbedContainer einen Stil hinzu.
export const EmbedContainer = styled.div` width: 100%; height: 95vh; & > iframe { width: 100%; height: 100%; } `;
Schritt 3: Datei src/Tabs.tsx zum Speichern der Komponente Tabs erstellen
Erstellen Sie im Verzeichnis src der neuen Erweiterung eine Tabs.tsx-Datei. In dieser Datei wird die Tabs-Komponente gespeichert und auf die Looker-Dashboard-ID für jedes Dashboard verwiesen.
Fügen Sie den folgenden Code in die Datei ein. Im folgenden Abschnitt wird die Funktion des Codes erläutert:
import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
} from "./Dashboards";
export const Tabs = () => (
<ComponentsProvider>
<Tabs2>
<Tab2 id="5" label="Order Analysis Dashboard">
Order data from the last 12 months
<EmbeddedDashboard1 id={5} />
</Tab2>
<Tab2 id="2" label="Inventory Dashboard">
Current global inventory
<EmbeddedDashboard2 id={2} />
</Tab2>
<Tab2 id="7" label="Customer Dashboard">
Anonymized customer data
<EmbeddedDashboard3 id={7} />
</Tab2>
</Tabs2>
</ComponentsProvider>
)
Im vorherigen Codebeispiel passiert Folgendes:
Die Importanweisungen bringen die erforderlichen Abhängigkeiten und Komponenten sowie die
EmbeddedDashboard-Objekte hinzu, die in der DateiDashboards.tsxerstellt wurden.import React from "react"; import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components"; import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3, } from "./Dashboard";Durch die Exportanweisung wird das Objekt
Tabsfür den Import in andere Komponenten verfügbar gemacht.export const Tabs = () => (ComponentsProviderumschließt einzelne Komponenten, um die Themen zu optimieren.<ComponentsProvider> </ComponentsProvider>Erstellen Sie mit der Komponente
Tabs2und der untergeordneten KomponenteTab2drei Tabs und verknüpfen Sie sie mit den Looker-Dashboards.<Tabs2> <Tab2 id="5" label="Order Analysis Dashboard"> Order data from the last 12 months <EmbeddedDashboard1 id={5} /> </Tab2> <Tab2 id="2" label="Inventory Dashboard"> Current global inventory <EmbeddedDashboard2 id={2} /> </Tab2> <Tab2 id="7" label="Customer Dashboard"> Anonymized customer data <EmbeddedDashboard3 id={7} /> </Tab2> </Tabs2>- Für das Attribut „
id“ von „Tab2“ kann eine eindeutige Tab-ID angegeben werden. Aktualisieren Sie die ID nach Bedarf für Ihre Umgebung. - Das
label-Attribut akzeptiert das Label, das auf jedem Tab angezeigt wird. Aktualisieren Sie die ID entsprechend dem verwendeten Dashboard. - Ein String, der innerhalb der Tab2-Tags platziert wird, erscheint oben im Inhaltsbereich des Tabs. Aktualisieren oder entfernen Sie den String nach Bedarf.
- Die Objekte
EmbeddedDashboard1,EmbeddedDashboard1undEmbeddedDashboard1werden auf dem Tab platziert. In denid-Properties kann die Dashboard-ID des Dashboards angegeben werden, das in diesen Tab eingebettet werden soll. Wenn Sie Ihr eigenes Dashboard mit Tabs erstellen, ersetzen Sie diesen Wert durch die Dashboard-ID für das gewünschte Dashboard. Die numerische Dashboard-ID finden Sie in der URL nachdashboards/. Wenn die URL beispielsweisehttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=USlautet, lautet die Dashboard-ID61.
- Für das Attribut „
Schritt 4: HelloWorld-Referenz in src/App.tsx ersetzen
Rufen Sie die Datei App.tsx im Verzeichnis src auf. Entfernen Sie die HelloWorld-Importanweisung:
import { HelloWorld } from './HelloWorld'
und ersetzen Sie ihn durch:
import { Tabs } from './Tabs'
Ersetzen Sie außerdem in der Datei src/App.tsx die Variable <HelloWorld/> durch <Tabs/>.
Optional können Sie auch die Datei HelloWorld.tsx aus diesem Verzeichnis löschen, da Sie sie nicht mehr verwenden werden.
Schritt 5: manifest.lkml-Datei mit Einbettungsberechtigung aktualisieren
Fügen Sie dem Abschnitt „Berechtigungen“ der manifest.lkml-Datei in Ihrem LookML-Projekt die folgende Berechtigung hinzu:
use_embeds: yes
Die Datei manifest.lkml sollte so aussehen:
application: name {
label: "label"
url: "http://localhost:8080/bundle.js"
# file: "bundle.js
entitlements: {
core_api_methods: ["me"] #Add more entitlements here as you develop new functionality
use_embeds: yes
}
}
Sie können jetzt Ihre Erweiterung aufrufen, die im linken Navigationsbereich im Ordner Anwendungen angezeigt wird. Wenn Sie Ihren lokalen Entwicklungsserver mit yarn develop gestartet haben, können Sie die eingebetteten Dashboards mit Tabs sehen.
Schritt 6: Erweiterung in der Looker-Instanz veröffentlichen
Um die Erweiterung anderen Looker-Nutzern zu zeigen, veröffentlichen Sie sie in Ihrer Looker-Instanz. Gehen Sie dazu so vor:
- Rufen Sie
localhost:8080/bundle.jsauf, während der Entwicklungsserver ausgeführt wird. - Speichern Sie den Inhalt des Browserfensters lokal als
.js-Datei auf Ihrem Computer. - Achten Sie darauf, dass Sie sich im Entwicklungsmodus befinden, und ziehen Sie die Datei
.jsper Drag-and-drop in Ihr Erweiterungsprojekt. Speichern Sie die Änderungen. - Kommentieren Sie in der Datei
manifest.lkmldie Zeileurl: "http://localhost:8080/bundle.js"aus. - Entfernen Sie in der Datei
manifest.lkmldie Kommentarzeichen aus der Zeile# file: "bundle.js"und achten Sie darauf, dass der Dateiname mit dem Dateinamen der.js-Datei übereinstimmt, die Sie in Ihr Projekt hochgeladen haben. Speichern Sie die Änderungen. - Führen Sie einen Commit der Änderungen durch und stellen Sie sie bereit.
Nach der Bereitstellung müssen Sie Ihren lokalen Entwicklungsserver nicht mehr starten, um die Erweiterung zu sehen. Nutzer Ihrer Looker-Instanz sollten die Erweiterung sehen können, wenn sie im linken Navigationsbereich zum Ordner Anwendungen wechseln.