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 Tabs für die Navigation in Dashboards:

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:

1. Eine 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 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, 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:8080 in der Zulassungsliste für eingebettete Domains auf der Seite Embed im Bereich Verwaltung enthalten sein.
• Achten Sie darauf, dass Sie das NPM-Paket für Looker-Komponenten installiert haben. Informationen zur Installation und Verwendung des Komponentenpakets finden Sie im README-Dokument, das auf GitHub und NPM verfügbar ist.

Schritt 1: Einfache TypeScript-Erweiterung erstellen

Folgen Sie der Anleitung auf der Dokumentationsseite Einführung in die Erstellung 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 create-looker-extension-Vorlage zum Erstellen der Erweiterungsvorlage verwenden, 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-ts auf.

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. Je nach Bedarf können Sie 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 passiert Folgendes:

• Die Importanweisungen laden die erforderlichen Abhängigkeiten.

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

• Im nächsten Codeblock wird ein EmbeddedDashboard1-Objekt erstellt. Das ist ein EmbedContainer-Objekt, das einen Dashboard-Iframe enthält. Der IFrame wird vom Looker Embed SDK mit der ü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>;
  };
  

• In 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 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 Ihrer 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 in diese Datei den folgenden Code ein. Im nächsten Abschnitt wird erläutert, was der Code bewirkt:

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 laden die erforderlichen Abhängigkeiten und Komponenten sowie die EmbeddedDashboard-Objekte, die in der Dashboards.tsx-Datei erstellt wurden, ein.

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

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

  export const Tabs = () => (
  

• Die ComponentsProvider umschließt einzelne Komponenten, um das Design zu vereinfachen.

  <ComponentsProvider>
  </ComponentsProvider>
  

• Mit der Komponente Tabs2 und ihrer untergeordneten Komponente Tab2 werden drei Tabs erstellt und mit den Looker-Dashboards verknüpft.

   <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 id-Attribut von Tab2 akzeptiert eine eindeutige Tab-ID. 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, wird oben im Inhaltsbereich dieses Tabs angezeigt. Aktualisieren oder entfernen Sie den String nach Bedarf.
  • Die Objekte EmbeddedDashboard1, EmbeddedDashboard1 und EmbeddedDashboard1 werden auf dem Tab platziert. In den id-Properties kann die Dashboard-ID des Dashboards angegeben werden, das in diesen Tab eingebettet werden soll. Wenn Sie ein eigenes Dashboard mit Tabs erstellen, ersetzen Sie diesen Wert durch die Dashboard-ID des gewünschten Dashboards. 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, lautet die Dashboard-ID 61.

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

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

import { HelloWorld } from './HelloWorld'

und ersetzen Sie es durch Folgendes:

import { Tabs } from './Tabs'

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

Optional können Sie die Datei HelloWorld.tsx auch 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 manifest.lkml-Datei 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, sehen Sie die eingebetteten Dashboards mit Tabs.

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

Wenn Sie die Erweiterung für andere Looker-Nutzer sichtbar machen 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 der 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 Entwicklungsmodus befinden, und ziehen Sie die Datei .js 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".
5. Entfernen Sie in der Datei manifest.lkml die 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.
6. Führen Sie einen Commit aus und stellen Sie die Änderungen 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.