Codebeispiele für das Erweiterungs-Framework React und für JavaScript

Auf dieser Seite finden Sie in React und JavaScript geschriebene Codebeispiele für gängige Funktionen, die Sie in Ihren Erweiterungen verwenden möchten.

Looker-Erweiterungs-SDK verwenden

Erweiterungen müssen eine Verbindung zum Looker-Host herstellen. In React wird die Erweiterung dazu in eine ExtensionProvider40-Komponente eingebunden. Diese Komponente stellt eine Verbindung mit dem Looker-Host her und stellt der Erweiterung das Looker Extension SDK und das Looker SDK zur Verfügung.

import React from 'react'
import { ExtensionProvider40 } from '@looker/extension-sdk-react'
import { DemoCoreSDK } from './DemoCoreSDK'


export const App = () => {
 return (
   <ExtensionProvider40 chattyTimeout={-1}>
     <DemoCoreSDK />
   </ExtensionProvider40>
 )
}

Hintergrundinformationen zu Erweiterungsanbietern

Erweiterungsanbieter stellen Erweiterungen das Looker-Erweiterungs-SDK und die SDK-API zur Verfügung. Seit der Erstellung des Erweiterungs-Frameworks wurden verschiedene Versionen des Erweiterungsanbieters erstellt. In diesem Abschnitt werden die bisherigen Erweiterungsanbieter erläutert und es wird erklärt, warum ExtensionProvider40 der empfohlene Anbieter ist.

Der erste Erweiterungsanbieter war ExtensionProvider, der die Looker SDKs 3.1 und 4.0 verfügbar gemacht hat. Der Nachteil war, dass das endgültige Produktions-Bundle durch das Hinzufügen beider SDKs größer wurde.

Anschließend wurde ExtensionProvider2 erstellt. Diese Funktion wurde erstellt, weil es für eine Erweiterung nicht sinnvoll ist, beide SDKs zu verwenden und den Entwickler dazu zu zwingen, sich für das eine oder das andere zu entscheiden. Leider hat das immer noch dazu geführt, dass beide SDKs in die Größe des endgültigen Produktions-Bundles einbezogen werden.

Bei der Umstellung von SDK 4.0 auf die allgemeine Verfügbarkeit wurde ExtensionProvider40 erstellt. Der Vorteil von ExtensionProvider40 besteht darin, dass sich der Entwickler nicht entscheiden muss, welches SDK er verwenden möchte, da nur SDK 4.0 verfügbar ist. Da SDK 3.1 nicht im endgültigen Bundle enthalten ist, hat dies den Vorteil, dass sich die Größe des Bundles verringert.

Wenn Sie Funktionen aus dem Looker Extension SDK hinzufügen möchten, benötigen Sie zuerst einen Verweis auf das SDK. Dies kann entweder vom Anbieter oder global erfolgen. Anschließend können Sie SDK-Funktionen wie in jeder JavaScript-Anwendung aufrufen.

  • So greifen Sie auf das SDK des Anbieters zu:
  import { ExtensionContext40 } from '@looker/extension-sdk-react'

  export const Comp1 = () => {
    const extensionContext = useContext(
      ExtensionContext40
    )
    const { extensionSDK, coreSDK } = extensionContext
  • Gehen Sie so vor, um global auf das SDK zuzugreifen. Vor dem Aufruf muss die Erweiterung initialisiert werden:
    const coreSDK = getCoreSDK()

Jetzt können Sie das SDK genau wie in jeder JavaScript-Anwendung verwenden:

  const GetLooks = async () => {
    try {
      const looks = await sdk.ok(sdk.all_looks('id'))
      // process looks
      . . .
    } catch (error) {
      // do error handling
      . . .
    }
}

Da die Erweiterung in einem Sandbox-iFrame ausgeführt wird, können Sie innerhalb der Looker-Instanz nicht zu einer anderen Stelle wechseln, indem Sie das window.location-Objekt des übergeordneten Elements aktualisieren. Die Navigation ist über das Looker Extension SDK möglich.

Für diese Funktion ist die Berechtigung navigation erforderlich.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  extensionSDK.updateLocation('/browse')

Öffnen eines neuen Browserfensters

Da die Erweiterung in einem Sandbox-iFrame ausgeführt wird, können Sie das übergeordnete Fenster nicht zum Öffnen eines neuen Browserfensters verwenden. Mit dem Looker Extension SDK können Sie ein Browserfenster öffnen.

Für diese Funktion ist entweder die Berechtigung new_window zum Öffnen eines neuen Fensters zu einem Speicherort in der aktuellen Looker-Instanz oder die Berechtigung new_window_external_urls zum Öffnen eines neuen Fensters erforderlich, das auf einem anderen Host ausgeführt wird.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  extensionSDK.openBrowserWindow('/browse', '_blank')
. . .
  extensionSDK.openBrowserWindow('https://docs.looker.com/reference/manifest-params/application#entitlements', '_blank')

Routing und Deeplinks

Folgendes gilt für React-basierte Erweiterungen.

Die Komponenten ExtensionProvider, ExtensionProvider2 und ExtensionProvider40 erstellen automatisch einen React-Router mit dem Namen MemoryRouter. Versuche nicht, ein BrowserRouter zu erstellen, da es in Sandbox-iFrames nicht funktioniert. Versuche nicht, eine HashRouter zu erstellen, da sie in der nicht auf Chromium basierenden Version des Microsoft Edge-Browsers nicht in Sandbox-iFrames funktioniert.

Wenn MemoryRouter und react-router in Ihrer Erweiterung verwendet werden, synchronisiert das Erweiterungs-Framework automatisch den Router der Erweiterung mit dem Looker-Hostrouter. Das bedeutet, dass die Erweiterung über Klicks auf die Vorwärts- und Rückwärtsschaltflächen des Browsers sowie über die aktuelle Route informiert wird, wenn die Seite neu geladen wird. Das bedeutet auch, dass die Erweiterung automatisch Deeplinks unterstützen sollte. In den Erweiterungsbeispielen findest du Informationen zur Verwendung von react-router.

Erweiterungskontextdaten

Kontextdaten des Erweiterungs-Frameworks dürfen nicht mit React-Kontexten verwechselt werden.

Erweiterungen können Kontextdaten zwischen allen Nutzern einer Erweiterung teilen. Die Kontextdaten können für Daten verwendet werden, die sich nicht häufig ändern und keine besonderen Sicherheitsanforderungen unterliegen. Beim Schreiben der Daten ist Vorsicht geboten, da es keine Datensperrung gibt und der letzte Schreibvorgang gewinnt. Die Kontextdaten stehen der Erweiterung unmittelbar nach dem Start zur Verfügung. Das Looker Extension SDK bietet Funktionen, mit denen die Kontextdaten aktualisiert und aktualisiert werden können.

Die maximale Größe der Kontextdaten beträgt ungefähr 16 MB. Kontextdaten werden in einen JSON-String serialisiert. Dies muss also auch berücksichtigt werden, wenn Sie Kontextdaten für Ihre Erweiterung verwenden.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  // Get loaded context data. This will reflect any updates that have
  // been made by saveContextData.
  let context = await extensionSDK.getContextData()

. . .

  // Save context data to Looker server.
  context = await extensionSDK.saveContextData(context)

. . .

  // Refresh context data from Looker server.
  context = await extensionSDK.refreshContextData()

Nutzerattribute

Das Looker Extension SDK bietet eine API für den Zugriff auf Looker-Nutzerattribute. Es gibt zwei Arten des Zugriffs auf Nutzerattribute:

  • Begrenzt – mit der Erweiterung verknüpft. Ein auf den Bereich beschränktes Benutzerattribut wird der Erweiterung mit einem Namespace versehen und das Benutzerattribut muss in der Looker-Instanz definiert werden, bevor es verwendet werden kann. Wenn Sie einen Namespace für ein Nutzerattribut verwenden möchten, stellen Sie dem Attributnamen den Namen der Erweiterung voran. Bindestriche und die Zeichen „::“ im Erweiterungsnamen müssen durch einen Unterstrich ersetzt werden, da Bindestriche und Doppelpunkte in Namen von Nutzerattributen nicht verwendet werden dürfen.

    Beispiel: Für ein Nutzerattribut mit Umfang und dem Namen „my_value“ und der Erweiterungs-ID my-extension::my-extension muss der Nutzerattributname „my_extension_my_extension_my_value“ definiert sein. Einmal definiert, kann das Nutzerattribut von der Erweiterung gelesen und aktualisiert werden.

  • Global: Dies sind globale Nutzerattribute und schreibgeschützt. Ein Beispiel hierfür ist das Nutzerattribut locale.

Im Folgenden finden Sie eine Liste der API-Aufrufe für Nutzerattribute:

  • userAttributeGetItem: Liest ein Nutzerattribut. Es kann ein Standardwert definiert werden. Dieser wird verwendet, wenn für den Nutzer kein Nutzerattributwert vorhanden ist.
  • userAttributeSetItem: speichert ein Nutzerattribut für den aktuellen Nutzer. Schlägt bei globalen Nutzerattributen fehl. Der gespeicherte Wert ist nur für den aktuellen Nutzer sichtbar.
  • userAttributeResetItem: Setzt ein Nutzerattribut für den aktuellen Nutzer auf den Standardwert zurück. Schlägt bei globalen Nutzerattributen fehl.

Für den Zugriff auf Nutzerattribute musst du die Attributnamen in den Berechtigungen global_user_attributes und/oder scoped_user_attributes angeben. In der Manifestdatei des LookML-Projekts würden Sie beispielsweise Folgendes hinzufügen:

  entitlements: {
    scoped_user_attributes: ["my_value"]
    global_user_attributes: ["locale"]
  }

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  // Read global user attribute
  const locale = await extensionSDK.userAttributeGetItem('locale')

  // Read scoped user attribute
  const value = await extensionSDK.userAttributeGetItem('my_value')

  // Update scoped user attribute
  const value = await extensionSDK.userAttributeSetItem('my_value', 'abcd1234')

  // Reset scoped user attribute
  const value = await extensionSDK.userAttributeResetItem('my_value')

Lokale Speicherung

In einer Sandbox ausgeführte iFrames lassen keinen Zugriff auf den lokalen Browserspeicher zu. Mit dem Looker Extension SDK kann eine Erweiterung Lese- und Schreibvorgänge im lokalen Speicher des übergeordneten Fensters ausführen. Der lokale Speicher ist der Erweiterung mit einem Namespace zugeordnet, d. h., er kann den lokalen Speicher, der vom übergeordneten Fenster oder anderen Erweiterungen erstellt wird, nicht lesen.

Für die Verwendung des lokalen Speichers ist die Berechtigung local_storage erforderlich.

Die Erweiterung localhost API ist asynchron und nicht die lokale Speicher-API des synchronen Browsers.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  // Read from local storage
  const value = await extensionSDK.localStorageGetItem('my_storage')

  // Write to local storage
  await extensionSDK.localStorageSetItem('my_storage', 'abcedefh')

  // Delete item from local storage
  await extensionSDK.localStorageRemoveItem('my_storage')

Seitentitel aktualisieren

Durch Erweiterungen kann der aktuelle Seitentitel aktualisiert werden. Für diese Aktion sind keine Berechtigungen erforderlich.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

  extensionSDK.updateTitle('My Extension Title')

In die Systemzwischenablage schreiben

In einer Sandbox ausgeführte iFrames lassen keinen Zugriff auf die Systemzwischenablage zu. Mit dem Looker Extension SDK kann eine Erweiterung Text in die Zwischenablage des Systems schreiben. Aus Sicherheitsgründen darf die Erweiterung nicht aus der Systemzwischenablage lesen.

Wenn Sie in die Systemzwischenablage schreiben möchten, benötigen Sie die Berechtigung use_clipboard.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

    // Write to system clipboard
    try {
      await extensionSDK.clipboardWrite(
        'My interesting information'
      )
      . . .
    } catch (error) {
      . . .
    }

Dashboards, Looks und Explores einbetten

Das Erweiterungs-Framework unterstützt das Einbetten von Dashboards, Looks und Explores.

Die Berechtigung use_embeds ist erforderlich. Wir empfehlen, Inhalte mit dem Looker JavaScript Embed SDK einzubetten. Weitere Informationen finden Sie in der Dokumentation zum Embed SDK.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  const canceller = (event: any) => {
    return { cancel: !event.modal }
  }

  const updateRunButton = (running: boolean) => {
    setRunning(running)
  }

  const setupDashboard = (dashboard: LookerEmbedDashboard) => {
    setDashboard(dashboard)
  }

  const embedCtrRef = useCallback(
    (el) => {
      const hostUrl = extensionContext?.extensionSDK?.lookerHostData?.hostUrl
      if (el && hostUrl) {
        el.innerHTML = ''
        LookerEmbedSDK.init(hostUrl)
        const db = LookerEmbedSDK.createDashboardWithId(id as number)
          .withNext()
          .appendTo(el)
          .on('dashboard:loaded', updateRunButton.bind(null, false))
          .on('dashboard:run:start', updateRunButton.bind(null, true))
          .on('dashboard:run:complete', updateRunButton.bind(null, false))
          .on('drillmenu:click', canceller)
          .on('drillmodal:explore', canceller)
          .on('dashboard:tile:explore', canceller)
          .on('dashboard:tile:view', canceller)
          .build()
          .connect()
          .then(setupDashboard)
          .catch((error: Error) => {
            console.error('Connection error', error)
          })
      }
    },
    []
  )

  return (&#60;EmbedContainer ref={embedCtrRef} /&#62;)

In den Erweiterungsbeispielen werden Komponenten mit benutzerdefinierten Stilen verwendet, um einfache Stile für den generierten iFrame bereitzustellen. Beispiel:

import styled from "styled-components"

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

Auf externe API-Endpunkte zugreifen

Das Erweiterungs-Framework bietet zwei Methoden für den Zugriff auf externe API-Endpunkte:

  • Server-Proxy: Greift über den Looker-Server auf den Endpunkt zu. Mit diesem Mechanismus können Client-IDs und geheime Schlüssel sicher vom Looker-Server festgelegt werden.
  • Der Abruf-Proxy – greift über den Browser des Nutzers auf den Endpunkt zu. Der Proxy ist die Looker-Benutzeroberfläche.

In beiden Fällen musst du den externen API-Endpunkt in der Berechtigung external_api_urls der Erweiterung angeben.

Server-Proxy

Im folgenden Beispiel wird die Verwendung des Server-Proxys zum Abrufen eines Zugriffstokens zur Verwendung durch den Abruf-Proxy veranschaulicht. Die Client-ID und das Secret müssen als Nutzerattribute für die Erweiterung definiert werden. In der Regel wird beim Einrichten des Nutzerattributs der Standardwert auf die Client-ID oder das Secret festgelegt.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  const requestBody = {
    client_id: extensionSDK.createSecretKeyTag('my_client_id'),
    client_secret: extensionSDK.createSecretKeyTag('my_client_secret'),
  },
  try {
    const response = await extensionSDK.serverProxy(
      'https://myaccesstokenserver.com/access_token',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody),
      }
    )
    const { access_token, expiry_date } = response.body
. . .
  } catch (error) {
    // Error handling
    . . .
  }

Der Name des Benutzerattributs muss der Erweiterung zugeordnet sein. Bindestriche müssen durch Unterstriche ersetzt werden und die ::-Zeichen müssen durch einen einzelnen Unterstrich ersetzt werden.

Wenn der Name Ihrer Erweiterung beispielsweise my-extension::my-extension lautet, müssen für das vorherige Beispiel die folgenden Nutzerattribute definiert werden:

my_extension_my_extension_my_client_id
my_extension_my_extension_'my_client_secret'

Proxy abrufen

Im folgenden Beispiel wird die Verwendung des Abruf-Proxys veranschaulicht. Dabei wird das Zugriffstoken aus dem vorherigen Server-Proxy-Beispiel verwendet.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  try {
    const response = await extensionSDK.fetchProxy(
      'https://myaccesstokenserver.com/myendpoint',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${accessToken}`,
        },
        body: JSON.stringify({
          some_value: someValue,
          another_value: anotherValue,
        }),
      }
    )
    // Handle success

. . .

  } catch (error) {
    // Handle failure

. . .

  }

OAuth-Integration

Das Erweiterungs-Framework unterstützt die Integration mit OAuth-Anbietern. Mit OAuth kann ein Zugriffstoken für den Zugriff auf eine bestimmte Ressource abgerufen werden, z. B. ein Google Tabellen-Dokument.

Du musst den OAuth-Serverendpunkt in der Berechtigung extension oauth2_urls angeben. Möglicherweise musst du in der Berechtigung external_api_urls weitere URLs angeben.

Die Erweiterungs-Frameworks unterstützen folgende Abläufe:

  • Impliziter Ablauf
  • Autorisierungscode-Berechtigungstyp mit geheimem Schlüssel
  • PKCE-Code-Abfrage und -Verifizierung

Im Allgemeinen wird ein untergeordnetes Fenster geöffnet, in dem eine OAuth-Serverseite geladen wird. Der OAuth-Server authentifiziert den Nutzer und leitet zurück zum Looker-Server mit zusätzlichen Details, die zum Abrufen eines Zugriffstokens verwendet werden können.

Impliziter Fluss:

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

    const response = await extensionSDK.oauth2Authenticate(
      'https://accounts.google.com/o/oauth2/v2/auth',
      {
        client_id: GOOGLE_CLIENT_ID!,
        scope: GOOGLE_SCOPES,
        response_type: 'token',
      }
    )
    const { access_token, expires_in } = response

Autorisierungscode-Berechtigungstyp mit geheimem Schlüssel:

  const authenticateParameters: Record&#60;string, string&#62; = {
    client_id: GITHUB_CLIENT_ID!,
    response_type: 'code',
  }
  const response = await extensionSDK.oauth2Authenticate(
    'https://github.com/login/oauth/authorize',
    authenticateParameters,
   'GET'
  )
  const exchangeParameters: Record&#60;string, string&#62; = {
    client_id: GITHUB_CLIENT_ID!,
    code: response.code,
    client_secret: extensionSDK.createSecretKeyTag('github_secret_key'),
  }
  const codeExchangeResponse = await extensionSDK.oauth2ExchangeCodeForToken(
    'https://github.com/login/oauth/access_token',
    exchangeParameters
  )
  const { access_token, error_description } = codeExchangeResponse

PKCE-Code-Abfrage und -Verifizierung:

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .

  const authRequest: Record&#60;string, string&#62; = {
    client_id: AUTH0_CLIENT_ID!,
    response_type: 'code',
    scope: AUTH0_SCOPES,
    code_challenge_method:  'S256',
  }
  const response = await extensionSDK.oauth2Authenticate(
    'https://sampleoauthserver.com/authorize',
    authRequest,
    'GET'
  )
  const exchangeRequest: Record&#60;string, string&#62; = {
    grant_type: 'authorization_code',
    client_id: AUTH0_CLIENT_ID!,
    code: response.code,
  }
  const codeExchangeResponse = await extensionSDK.oauth2ExchangeCodeForToken(
    'https://sampleoauthserver.com/login/oauth/token',
    exchangeRequest
  )
  const { access_token, expires_in } = codeExchangeResponse

Spartanisch

Spartan bezieht sich auf eine Methode, bei der die Looker-Instanz als Umgebung verwendet wird, um Erweiterungen und Erweiterungen nur einer bestimmten Gruppe von Benutzern zur Verfügung zu stellen. Ein spartanischer Benutzer, der zu einer Looker-Instanz geht, wird dem Anmeldevorgang angezeigt, den der Looker-Administrator konfiguriert hat. Sobald der Nutzer authentifiziert ist, wird ihm entsprechend dem Nutzerattribut landing_page eine Erweiterung angezeigt, wie unten dargestellt. Der Benutzer kann nur auf Erweiterungen zugreifen; er kann auf keinen anderen Teil von Looker zugreifen. Wenn der Nutzer Zugriff auf mehrere Erweiterungen hat, steuern die Erweiterungen, ob der Nutzer mithilfe von extensionSDK.updateLocation zu den anderen Erweiterungen wechseln kann. Es gibt eine bestimmte Methode für das Looker Extension SDK, mit der sich der Nutzer von der Looker-Instanz abmelden kann.

import { ExtensionContext40 } from '@looker/extension-sdk-react'

. . .

  const extensionContext = useContext(
    ExtensionContext40
  )
  const { extensionSDK } = extensionContext

. . .
  // Navigate to another extension
  extensionSDK.updateLocation('/spartan/another::extension')

. . .
  // Logout
  extensionSDK.spartanLogout()

Definieren von spartanischen Nutzern

Um einen spartanischen Nutzer zu definieren, müssen Sie eine Gruppe namens „Nur Erweiterungen“ erstellen.

Nachdem die Gruppe „Nur Erweiterungen“ erstellt wurde, rufen Sie im Looker-Bereich Admin die Seite Nutzerattribute auf und bearbeiten Sie das Nutzerattribut landing_page. Wählen Sie den Tab Gruppenwerte aus und fügen Sie die Gruppe „Nur Erweiterungen“ hinzu. Der Wert sollte auf /spartan/my_extension::my_extension/ festgelegt werden, wobei my_extension::my_extension die ID der Erweiterung ist. Wenn sich dieser Nutzer nun anmeldet, wird er zur entsprechenden Erweiterung weitergeleitet.

Codeaufteilung

Bei der Codeaufteilung wird Code nur dann angefordert, wenn er benötigt wird. In der Regel sind Code-Chunks mit React-Routen verknüpft, wobei jede Route ihren eigenen Code-Chunk erhält. In React werden dafür die Komponenten Suspense und React.lazy verwendet. Die Suspense-Komponente zeigt eine Fallback-Komponente an, während der Code-Chunk geladen wird. React.lazy ist für das Laden des Code-Chunks verantwortlich.

Codeaufteilung wird eingerichtet:

import { AsyncComp1 as Comp1 } from './Comp1.async'
import { AsyncComp1 as Comp2 } from './Comp2.async'

. . .

                <Suspense fallback={<div>Loading...</div>}>
                  <Switch>
                      <Route path="/comp1">
                        <Comp1 />
                      </Route>
                      <Route path="/comp2">
                        <Comp2 />
                      </Route>
                  </Switch>
                <Suspense>

Die Lazy-Loading-Komponente wird so implementiert:

import { lazy } from 'react'

const Comp1 = lazy(
 async () => import(/* webpackChunkName: "comp1" */ './Comp1')
)

export const AsyncComp1 = () => &#60;Home />

Die Komponente wird wie folgt implementiert. Die Komponente muss als Standardkomponente exportiert werden:

const Comp1 = () => {
  return (
    &#60;div&#62;Hello World&#60;/div&#62;
  )
}

export default Comp1

Baumzittern

Obwohl die Looker-SDKs derzeit das Baumschütteln unterstützen, muss diese Funktion noch verbessert werden. Wir aktualisieren unsere SDKs kontinuierlich, um die Unterstützung von Baumwicken zu verbessern. Einige dieser Änderungen erfordern möglicherweise eine Refaktorierung des Codes, damit sie davon profitieren können. Sollte dies erforderlich sein, wird dies in den Versionshinweisen dokumentiert.

Wenn Sie das Baumwackeln nutzen möchten, müssen Sie das verwendete Modul als ESmodul exportieren. Die importierten Funktionen dürfen keine Nebenwirkungen enthalten. Das Looker SDK für TypeScript/JavaScript, die Looker SDK-Laufzeitbibliothek, die Looker-UI-Komponenten, das Looker Extension SDK und das Extension SDK for React erfüllen diese Anforderungen.

Verwenden Sie in einer Erweiterung das Looker SDK 4.0 und entweder die ExtensionProvider2- oder die ExtensionProvider40-Komponente aus dem Extension SDK for React.

Mit dem folgenden Code wird der Erweiterungsanbieter eingerichtet. Sie müssen dem Anbieter mitteilen, welches SDK Sie verwenden möchten:

import { MyExtension } from './MyExtension'
import { ExtensionProvider40 } from '@looker/extension-sdk-react'
import { Looker40SDK } from '@looker/sdk/lib/4.0/methods'
import { hot } from 'react-hot-loader/root'

export const App = hot(() => {

  return (
    &#60;ExtensionProvider2 type={Looker40SDK}&#62;
      &#60;MyExtension /&#62;
    &#60;/ExtensionProvider2&#62;
  )
})

Verwenden Sie in Ihrer Erweiterung nicht den folgenden Importstil:

import * as lookerComponents from `@looker/components`

Im vorherigen Beispiel wird alles aus dem Modul übernommen. Importieren Sie stattdessen nur die Komponenten, die Sie wirklich benötigen. Beispiel:

import { Paragraph }  from `@looker/components`

Glossar

  • Code-Splitting – Eine Technik zum Lazy Loading von JavaScript, bis es tatsächlich benötigt wird. Idealerweise sollte das anfänglich geladene JavaScript-Bundle so klein wie möglich sein. Dies kann durch Codeaufteilung erreicht werden. Funktionen, die nicht sofort benötigt werden, werden erst geladen, wenn sie tatsächlich benötigt werden.
  • IDE – integrierte Entwicklungsumgebung Ein Editor zum Erstellen und Ändern einer Erweiterung. Beispiele sind Visual Studio Code, Intellij und WebStorm.
  • Scene (Szene): Im Allgemeinen ein Seitenaufruf in Looker. Szenen mit den wichtigsten Routen. Manchmal hat eine Szene untergeordnete Szenen, die Unterrouten innerhalb der Hauptroute zugeordnet sind.
  • Transpilieren – Der Prozess, bei dem in einer Sprache geschriebener Quellcode in eine andere Sprache mit einem ähnlichen Abstraktionsniveau umgewandelt wird. Ein Beispiel ist TypeScript zu JavaScript.