Dashboard mit Tabs und Looker-Komponenten erstellen

Tipp: Bitten Sie Ihren Administrator, die Vorschaufunktion Dashboards mit Tabs zu aktivieren, so dass Sie Dashboards Tabs hinzufügen können, indem Sie die Bearbeitungsoptionen für Dashboards verwenden. Mit Tabs können Sie Inhalte besser organisieren, Daten besser präsentieren, die Leistung verbessern und für mehr Übersichtlichkeit sorgen. Weitere Informationen zu Dashboards mit Tabs.

Ein Beispiel dafür, wie UI-Komponenten eine eingebettete Anwendung verbessern können, ist die Verwendung von Tabs für die Navigation in 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 durcharbeiten möchten, prüfen Sie, ob Ihre Einrichtung die Anforderungen erfüllt, und führen Sie dann die folgenden Schritte aus:

1. Erstellen Sie eine einfache TypeScript-Erweiterung.
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. Veröffentlichen Sie die Erweiterung in Ihrer Looker-Instanz.

Voraussetzungen

Bevor Sie beginnen, benötigen Sie Folgendes:

• Sie müssen Zugriff auf eine Looker-Instanz haben, in der das Erweiterungs-Framework aktiviert ist.
• Sie benötigen die Berechtigung develop.
• Sie sollten mehrere benutzerdefinierte Dashboards in Looker haben, die Sie in den UI-Tabs platzieren können.
• Unabhängig davon, ob Sie im Erweiterungs-Framework oder in einer eigenständigen React-Anwendung entwickeln, 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 unserem Erweiterungs-Framework.
• In diesem Beispiel wird das Looker Embed SDK verwendet. Damit das Embed SDK in Ihrer Instanz ausgeführt werden kann, muss http://localhost:8080 auf der Seite Einbetten im Bereich Admin in der Zulassungsliste für eingebettete Domains enthalten sein.

• Achten Sie darauf, dass Sie das Looker Components NPM-Paket installiert haben. Informationen zur Installation und Verwendung des Komponentenpakets finden Sie im README-Dokument, das 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 einer Looker-Erweiterung, um eine Erweiterung zu erstellen. Nehmen Sie die folgenden Änderungen vor, um die Erweiterung zu einer TypeScript-Erweiterung zu machen:

• Wenn Sie das Tool verwendencreate-looker-extension um die Erweiterungsvorlage zu erstellen, wählen Sie React für das Framework und TypeScript für die Sprache aus.
• Wenn Sie das Git-Repository klonen, um die Erweiterungsvorlage zu erstellen, wechseln Sie im zweiten Schritt zum extension-examples/react/TypeScript/helloworld-ts Verzeichnis.

Schritt 2: Datei src/Dashboards.tsx erstellen, um Dashboards zu verbinden und zu speichern

Erstellen Sie im Verzeichnis src Ihrer neuen Erweiterung eine Datei Dashboards.tsx. In dieser Datei werden die Dashboards verbunden und gespeichert, die Sie in Looker erstellt haben.

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

Im Code gibt es eine Stelle mit 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 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";
  

• Der nächste Codeblock erstellt ein EmbeddedDashboard-Objekt, das ein EmbedContainer-Objekt mit einem Dashboard-iFrame ist. Diese Komponente ist wiederverwendbar. Sie können sie für jedes Dashboard verwenden, indem Sie eine andere id-Eigenschaft übergeben. Der iFrame wird aus dem Looker Embed SDK generiert, indem die Dashboard-ID verwendet wird, die an ihn übergeben wird. Aktualisieren Sie https://mycompany.looker.com/ unbedingt in 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>;
  };
  

• Der letzte Block formatiert den EmbedContainer.

    export const EmbedContainer = styled.div`
      width: 100%;
      height: 95vh;
      & > iframe {
        width: 100%;
        height: 100%;
      }
  `;
  

Schritt 3: Datei src/Tabs.tsx erstellen, um die Komponente Tabs zu speichern

Erstellen Sie im Verzeichnis src Ihrer neuen Erweiterung eine Datei Tabs.tsx. In dieser Datei wird die Komponente Tabs gespeichert und die Looker-Dashboard-ID für jedes Dashboard referenziert.

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

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:

• Die Importanweisungen rufen die erforderlichen Abhängigkeiten und Komponenten sowie die EmbeddedDashboard-Objekte ab, die in der Datei Dashboards.tsx erstellt wurden.

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

• Die Exportanweisung macht das Objekt Tabs verfügbar, damit es in andere Komponenten importiert werden kann.

  export const Tabs = () => (
  

• Der ComponentsProvider umschließt einzelne Komponenten, um das Design 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>
  

  • Die id-Eigenschaft von Tab2 akzeptiert eine eindeutige Tab-ID. Aktualisieren Sie die ID nach Bedarf für Ihre Umgebung.
  • Die label-Eigenschaft akzeptiert die Beschriftung, die auf jedem Tab angezeigt wird. Aktualisieren Sie die ID entsprechend dem Dashboard, das Sie verwenden.
  • Ein String, der 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 im Tab platziert. Ihre id-Eigenschaften 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

Wechseln Sie im Verzeichnis src zur Datei App.tsx. Entfernen Sie die Importanweisung für HelloWorld:

import { HelloWorld } from './HelloWorld'

und ersetzen Sie sie durch:

import { Tabs } from './Tabs'

Ersetzen Sie außerdem in der Datei src/App.tsx <HelloWorld/> durch <Tabs/>.

Optional können Sie auch die Datei HelloWorld.tsx aus diesem Verzeichnis löschen, da sie nicht mehr verwendet wird.

Schritt 5: Datei manifest.lkml mit Einbettungsberechtigung aktualisieren

Fügen Sie im 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
  }
}

Jetzt können Sie zu Ihrer Erweiterung wechseln, 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

So machen Sie die Erweiterung für andere Looker-Nutzer sichtbar:

1. Wechseln Sie bei laufendem Entwicklungsserver zu localhost:8080/bundle.js.
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 .js-Datei dann 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 Auskommentierung der Zeile # file: "bundle.js" und prüfen Sie, ob der Dateiname mit dem Dateinamen der .js-Datei ü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.

Nachdem 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 im Ordner Anwendungen dorthin wechseln.