Ein einfaches Beispiel dafür, wie UI-Komponenten eine eingebettete Anwendung verbessern können, ist die Erstellung einer Navigation mit Tabs für Dashboards:
Im folgenden Beispiel werden Dashboards mit Tabs zu einer einfachen TypeScript-Erweiterung hinzugefügt, die mit dem Erweiterungs-Framework von Looker erstellt wurde.
Wenn Sie dieses Beispiel verwenden möchten, muss Ihre Einrichtung die Anforderungen erfüllen. Gehen Sie dann so vor:
- Grundlegende 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 KomponenteTabs
zu speichern. - Ersetzen Sie die HelloWorld-Referenz in
src/App.tsx
. - Aktualisiere die Datei
manifest.lkml
mit der Berechtigung zum Einbetten. - Veröffentlichen Sie die Erweiterung in Ihrer Looker-Instanz.
Voraussetzungen
Sie benötigen einige Elemente, um beginnen zu können:
- Sie müssen Zugriff auf eine Looker-Instanz mit aktiviertem Erweiterungs-Framework haben.
- Sie benötigen die Berechtigung
develop
. - In Looker sollten Sie mehrere benutzerdefinierte Dashboards auf den UI-Tabs platzieren.
- Unabhängig davon, ob Sie das Erweiterungs-Framework oder Ihre eigene eigenständige React-Anwendung erstellen, ist die Authentifizierung bei der Looker API und der Zugriff auf das Looker SDK-Objekt wichtig. Weitere Informationen finden Sie unter Looker API-Authentifizierung oder Erweiterungs-Framework.
- In diesem Beispiel wird das Looker Embed SDK verwendet. Damit das Embed SDK auf Ihrer Instanz ausgeführt werden kann, muss
http://localhost:8080
auf der Seite Einbetten des Steuerfelds Admin in die Zulassungsliste für eingebettete Domains aufgenommen werden. - Vergewissern Sie sich, dass das NPM-Paket für Looker-Komponenten installiert ist. Informationen zur Installation und Verwendung des Komponentenpakets finden Sie im README-Dokument, das Sie auf GitHub und NPM finden.
Schritt 1: Einfache TypeScript-Erweiterung erstellen
Folgen Sie der Anleitung auf der Dokumentationsseite zum Erstellen einer Looker-Erweiterung. So machen Sie die Erweiterung als TypeScript-Erweiterung:
- Wenn Sie die Erweiterungsvorlage
create-looker-extension
verwenden, wählen Sie TypeScript als Sprache aus, die Sie im zweiten Schritt verwenden möchten. - Wenn Sie das Git-Repository klonen, um die Erweiterungsvorlage zu erstellen, rufen Sie im zweiten Schritt das Verzeichnis
extension-examples/react/TypeScript/helloworld-ts
auf.
Schritt 2: Datei src/Dashboards.tsx
zum Verbinden und Speichern von Dashboards erstellen
Erstellen Sie im Verzeichnis src
der neuen Erweiterung die Datei Dashboards.tsx
. Mit dieser Datei werden die von Ihnen 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.
Der Code einer Instanz-URL enthält drei Speicherorte: https://mycompany.looker.com
. Ändern Sie sie in die URL der 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 Codebeispiel unten geschieht Folgendes:
Die Importanweisungen beziehen die erforderlichen Abhängigkeiten ein.
import React, { useCallback } from "react"; import { LookerEmbedSDK } from "@looker/embed-sdk"; import styled from "styled-components";
Der nächste Codeblock erstellt ein
EmbeddedDashboard1
-Objekt. Dabei handelt es sich um einEmbedContainer
-Objekt, das einen Dashboard-iFrame enthält. Der iFrame wird über das Looker Embed SDK mit der an ihn übergebenen Dashboard-ID generiert. 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>; };
Mit den nächsten beiden Codeblöcken wird dieser Vorgang für
EmbeddedDashboard2
undEmbeddedDashboard3
wiederholt. Aktualisieren Siehttps://mycompany.looker.com/
noch einmal auf die URL Ihrer Looker-Instanz.Der letzte Block gibt einen Stil für „EmbedContainer“ an.
export const EmbedContainer = styled.div` width: 100%; height: 95vh; & > iframe { width: 100%; height: 100%; } `;
Schritt 3: Datei src/Tabs.tsx
zum Speichern der Tabs
-Komponente erstellen
Erstellen Sie im Verzeichnis src
der neuen Erweiterung die Datei Tabs.tsx
. Diese Datei speichert die Komponente Tabs
und verweist auf die Looker-Dashboard-ID für jedes Dashboard.
Fügen Sie den folgenden Code in diese Datei ein. Der folgende Abschnitt erläutert die Funktion des Codes:
import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
} from "./Dashboard";
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 Codebeispiel unten geschieht Folgendes:
Die Importanweisungen enthalten die erforderlichen Abhängigkeiten und Komponenten sowie die
EmbeddedDashboard
-Objekte, die in der DateiDashboards.tsx
erstellt wurden.import React from "react"; import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components"; import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3, } from "./Dashboard";
Mit der Exportanweisung kann das
Tabs
-Objekt in andere Komponenten importiert werden.export const Tabs = () => (
Der
ComponentsProvider
schließt vor die einzelnen Komponenten, um sie zu erleichtern.<ComponentsProvider> </ComponentsProvider>
Tabs2
und seine untergeordnete KomponenteTab2
erstellen drei Tabs und verknüpfen 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>
- Das Attribut
id
vonTab2
akzeptiert eine eindeutige Tab-ID. Aktualisieren Sie die ID je nach Umgebung. - Das Attribut
label
akzeptiert das Label, das auf jedem Tab erscheint. Aktualisieren Sie die ID für das von Ihnen verwendete Dashboard. - Ein String, der in den Tab2-Tags platziert wird, wird oben im Contentbereich des Tabs angezeigt. Aktualisieren oder entfernen Sie den String.
- Die Objekte
EmbeddedDashboard1
,EmbeddedDashboard1
undEmbeddedDashboard1
werden auf dem Tab platziert. Dieid
-Eigenschaften akzeptieren die Dashboard-ID des Dashboards, das in diesen Tab eingebettet werden soll. Wenn Sie ein eigenes Dashboard mit Tabs erstellen, ersetzen Sie diesen Wert durch die Dashboard-ID des Dashboards, das Sie verwenden möchten. Die numerische Dashboard-ID finden Sie in der URL nachdashboards/
. Lautet die URL beispielsweisehttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US
, lautet die Dashboard-ID61
.
- Das Attribut
Schritt 4: HelloWorld-Referenz in src/App.tsx
ersetzen
Rufen Sie im Verzeichnis src
die Datei App.tsx
auf. Entfernen Sie die HelloWorld-Importanweisung:
import { HelloWorld } from './HelloWorld'
und ersetzen Sie sie durch:
import { Tabs } from './Tabs'
Sie können die Datei HelloWorld.tsx
auch aus diesem Verzeichnis löschen, da Sie sie nicht mehr verwenden.
Schritt 5: Datei manifest.lkml
mit eingebetteter Berechtigung 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 die Erweiterung aufrufen, die im linken Navigationsbereich im Ordner Anwendungen erscheint. Wenn Sie Ihren lokalen Entwicklungsserver mit yarn develop
gestartet haben, können Sie die eingebetteten Dashboards mit Tabs sehen.
Schritt 6: Erweiterung auf der Looker-Instanz veröffentlichen
Wenn Sie die Erweiterung anderen Looker-Nutzern zeigen möchten, veröffentlichen Sie sie auf Ihrer Looker-Instanz:
- Rufen Sie
localhost:8080/bundle.js
auf, während der Entwicklungsserver ausgeführt wird. - Speichern Sie den Inhalt des Browserfensters lokal auf Ihrem Computer als
.js
-Datei. - Prüfen Sie, ob Sie sich im Entwicklungsmodus befinden, und ziehen Sie dann die Datei
.js
per Drag-and-drop in das Erweiterungsprojekt. Speichern Sie die Änderungen. - Kommentieren Sie in der Datei
manifest.lkml
die Zeileurl: "http://localhost:8080/bundle.js"
aus. - Entfernen Sie in der Datei
manifest.lkml
den Kommentar aus der Zeile# file: "bundle.js"
und prüfen Sie, ob der Dateiname mit dem Dateinamen der Datei.js
übereinstimmt, die Sie in Ihr Projekt hochgeladen haben. Speichern Sie die Änderungen. - Übernehmen Sie die Änderungen 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 sie im linken Navigationsbereich im Ordner Anwendungen öffnen.