Dashboard mit Tabs und Looker-Komponenten erstellen

Ein einfaches Beispiel dafür, wie UI-Komponenten eine eingebettete Anwendung verbessern können, ist die Verwendung von Komponenten zum Erstellen einer Tab-Navigation für Dashboards:

Im folgenden Beispiel werden einem einfachen TypeScript-Add-on, das mit dem Looker-Extension Framework erstellt wurde, Dashboards mit Tabs hinzugefügt.

Damit Sie dieses Beispiel durcharbeiten können, muss Ihre Einrichtung die Anforderungen erfüllen. Gehen Sie dann so vor:

1. Einfache 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 den HelloWorld-Verweis in src/App.tsx.
5. Aktualisieren Sie die Datei manifest.lkml mit der Einbettungsberechtigung.
6. Erweiterung in Ihrer Looker-Instanz veröffentlichen

Voraussetzungen

Bevor Sie beginnen, benötigen Sie Folgendes:

• Sie benötigen Zugriff auf eine Looker-Instanz, in der das Extension Framework aktiviert ist.
• Sie benötigen die Berechtigung develop.
• Sie sollten mehrere benutzerdefinierte Dashboards in Looker haben, die Sie auf den UI-Tabs platzieren können.
• Unabhängig davon, ob Sie die Erweiterung im Erweiterungsframework oder in Ihrer eigenen eigenständigen React-Anwendung erstellen, ist es wichtig, sich bei der Looker API zu authentifizieren und Zugriff auf das Looker SDK-Objekt zu haben. Weitere Informationen finden Sie unter Looker API-Authentifizierung oder im 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:8080 in der Zulassungsliste für eingebettete Domains auf der Seite Einbetten im Admin-Bereich enthalten sein.

• Prüfen Sie, ob Sie das NPM-Paket für Looker-Komponenten installiert haben. Informationen zur Installation und Verwendung des Komponentenpakets finden Sie in der README-Datei, die sowohl auf GitHub als auch auf NPM verfügbar ist:

  • Komponentenpaket installieren und verwenden (GitHub)
  • Komponentenpaket installieren und verwenden (NPM)

Schritt 1: Einfache TypeScript-Erweiterung erstellen

Folgen Sie der Anleitung auf der Dokumentationsseite Einführung in die Entwicklung von Looker-Erweiterungen, um eine Erweiterung zu erstellen. Um die Erweiterung zu einer TypeScript-Erweiterung zu machen, nehmen Sie die folgenden Änderungen vor:

• Wenn Sie die Erweiterungsvorlage mit dem Tool create-looker-extension erstellen, wählen Sie React als Framework und TypeScript als Sprache aus.
• Wenn Sie das Git-Repository klonen, um die Erweiterungsvorlage zu erstellen, gehen Sie im zweiten Schritt zum Verzeichnis extension-examples/react/TypeScript/helloworld-ts.

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. In dieser Datei werden die Dashboards, die Sie in Looker erstellt haben, verknüpft und gespeichert.

Fügen Sie den folgenden Code in die Datei ein. Mit diesem Code wird eine wiederverwendbare Dashboard-Komponente erstellt.

Die Instanz-URL https://mycompany.looker.com ist an einer Stelle im Code enthalten. Ändern Sie dies in die URL Ihrer Looker-Instanz.

import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";

export const EmbeddedDashboard = (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 EmbedContainer = styled.div`
 width: 100%;
 height: 95vh;
 & > iframe {
   width: 100%;
   height: 100%;
 }
`;

Im vorherigen Codebeispiel passiert Folgendes:

• Die Importanweisungen rufen die erforderlichen Abhängigkeiten ab.

  import React, { useCallback } from "react";
  import { LookerEmbedSDK } from "@looker/embed-sdk";
  import styled from "styled-components";
  

• Im nächsten Codeblock wird ein EmbeddedDashboard-Objekt erstellt. Das ist ein EmbedContainer-Objekt, das einen Dashboard-iFrame enthält. Diese Komponente ist wiederverwendbar. Sie können sie für jedes Dashboard verwenden, indem Sie eine andere id-Eigenschaft übergeben. Der iFrame wird mit dem Looker Embed SDK anhand der Dashboard-ID generiert, die an ihn übergeben wird. Aktualisieren Sie https://mycompany.looker.com/ auf die URL Ihrer Looker-Instanz.

  export const EmbeddedDashboard = (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 dem letzten Block wird der EmbedContainer formatiert.

    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 Ihrer neuen Erweiterung eine Tabs.tsx-Datei. In dieser Datei wird die Tabs-Komponente gespeichert und die Looker-Dashboard-ID für jedes Dashboard referenziert.

Fügen Sie den folgenden Code in diese Datei ein. Im nächsten Abschnitt wird erläutert, was der Code bewirkt:

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard } 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:

• Mit den Importanweisungen werden die erforderlichen Abhängigkeiten und Komponenten sowie die EmbeddedDashboard-Objekte aus der Datei Dashboards.tsx importiert.

  import React from "react";
  import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
  import { EmbeddedDashboard } from "./Dashboard";
  

• Durch die Exportanweisung wird das Tabs-Objekt für den Import in andere Komponenten verfügbar gemacht.

  export const Tabs = () => (
  

• Das ComponentsProvider umschließt einzelne Komponenten, um das Theming zu erleichtern.

  <ComponentsProvider>
  </ComponentsProvider>
  

• Die Komponente Tabs2 und ihre 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
     <EmbeddedDashboard id={5} />
   </Tab2>
   <Tab2 id="2" label="Inventory Dashboard">
     Current global inventory
     <EmbeddedDashboard id={2} />
   </Tab2>
   <Tab2 id="7" label="Customer Dashboard">
     Anonymized customer data
     <EmbeddedDashboard id={7} />
   </Tab2>
  </Tabs2>
  

  • Für die id-Eigenschaft von Tab2 ist eine eindeutige Tab-ID erforderlich. Aktualisieren Sie die ID nach Bedarf für Ihre Umgebung.
  • Die Property label akzeptiert das Label, das auf jedem Tab angezeigt wird. Aktualisieren Sie die ID entsprechend dem verwendeten Dashboard.
  • Eine Zeichenfolge, die in die Tab2-Tags eingefügt wird, wird oben im Inhaltsbereich für diesen Tab angezeigt. Aktualisieren oder entfernen Sie den String nach Bedarf.
  • Die EmbeddedDashboard-Objekte werden auf dem Tab platziert. Die id-Properties akzeptieren die ID des Dashboards, das in diesen Tab eingebettet werden soll. Wenn Sie ein eigenes Dashboard mit Tabs erstellen, ersetzen Sie diesen Wert durch die ID des Dashboards, das Sie verwenden möchten. Die numerische Dashboard-ID finden Sie in der URL nach dashboards/. Wenn die URL beispielsweise https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US lautet, ist die Dashboard-ID 61.

Schritt 4: HelloWorld-Verweis in src/App.tsx ersetzen

Rufen Sie die Datei App.tsx im Verzeichnis src auf. Entfernen Sie die HelloWorld-Importanweisung:

import { HelloWorld } from './HelloWorld'

Ersetzen Sie es durch:

import { Tabs } from './Tabs'

Ersetzen Sie außerdem in der Datei src/App.tsx die Variable <HelloWorld/> durch den Wert <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 Berechtigungsabschnitt 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 zu Ihrer Erweiterung navigieren, die im linken Navigationsbereich im Ordner Anwendungen angezeigt wird. Wenn Sie den lokalen Entwicklungsserver mit yarn develop gestartet haben, können Sie die eingebetteten Dashboards mit Tabs sehen.

Schritt 6: Erweiterung in Ihrer Looker-Instanz veröffentlichen

Wenn Sie die Erweiterung anderen Looker-Nutzern zur Verfügung stellen möchten, veröffentlichen Sie sie in Ihrer Looker-Instanz. Gehen Sie dazu so vor:

1. Rufen Sie localhost:8080/bundle.js auf, während Ihr Entwicklungsserver ausgeführt wird.
2. Speichern Sie den Inhalt des Browserfensters lokal auf Ihrem Computer als .js-Datei.
3. Achten Sie darauf, dass Sie sich im Entwicklermodus befinden, und ziehen Sie die Datei .js dann per Drag-and-drop in Ihr 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 die Kommentarzeichen der Zeile # file: "bundle.js" und achten Sie darauf, dass der Dateiname mit dem Dateinamen der Datei .js übereinstimmt, die Sie in Ihr Projekt hochgeladen haben. Speichern Sie die Änderungen.
6. Führen Sie einen Commit durch und stellen Sie die Änderungen bereit.

Sobald Ihre Änderungen bereitgestellt wurden, müssen Sie den lokalen Entwicklungsserver nicht mehr starten, um die Erweiterung zu sehen. Nutzer Ihrer Looker-Instanz sollten die Erweiterung sehen können, wenn sie im Hauptnavigationsbereich zum Ordner Anwendungen navigieren.