Dashboard mit Tabs und Looker-Komponenten erstellen

Ein einfaches Beispiel dafür, wie UI-Komponenten eine eingebettete Anwendung verbessern können, ist die Erstellung einer Navigation mit Tabs für Dashboards:

Beispiel für ein Dashboard mit Tabs

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:

  1. Grundlegende TypeScript-Erweiterung erstellen
  2. Erstellen Sie die Datei src/Dashboards.tsx, um Dashboards zu verbinden und zu speichern.
  3. Erstellen Sie die Datei src/Tabs.tsx, um die Komponente Tabs zu speichern.
  4. Ersetzen Sie die HelloWorld-Referenz in src/App.tsx.
  5. Aktualisiere die Datei manifest.lkml mit der Berechtigung zum Einbetten.
  6. 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:

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 ein EmbedContainer-Objekt, das einen Dashboard-iFrame enthält. Der iFrame wird über das Looker Embed SDK mit der an ihn übergebenen Dashboard-ID generiert. Aktualisieren Sie https://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 und EmbeddedDashboard3 wiederholt. Aktualisieren Sie https://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 Datei Dashboards.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 Komponente Tab2 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 von Tab2 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 und EmbeddedDashboard1 werden auf dem Tab platziert. Die id-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 nach dashboards/. Lautet die URL beispielsweise https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, lautet die Dashboard-ID 61.

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:

  1. Rufen Sie localhost:8080/bundle.js auf, während der Entwicklungsserver ausgeführt wird.
  2. Speichern Sie den Inhalt des Browserfensters lokal auf Ihrem Computer als .js-Datei.
  3. 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.
  4. Kommentieren Sie in der Datei manifest.lkml die Zeile url: "http://localhost:8080/bundle.js" aus.
  5. 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.
  6. Ü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.