Créer un tableau de bord à onglets avec des composants Looker

Un exemple simple d'amélioration des applications intégrées à l'aide de composants d'interface utilisateur consiste à les utiliser pour créer une navigation par onglets pour les tableaux de bord:

Exemple de tableau de bord avec une interface à onglets

L'exemple suivant ajoute des tableaux de bord à onglets à une extension TypeScript de base créée à l'aide du framework d'extension de Looker.

Pour utiliser cet exemple, assurez-vous que votre configuration répond aux exigences, puis procédez comme suit:

  1. Créez une extension TypeScript de base.
  2. Créez le fichier src/Dashboards.tsx pour associer et stocker les tableaux de bord.
  3. Créez le fichier src/Tabs.tsx pour stocker le composant Tabs.
  4. Remplacez la référence HelloWorld dans src/App.tsx.
  5. Mettre à jour le fichier manifest.lkml avec les droits d'accès au bouton "Intégrer".
  6. Publiez l'extension sur votre instance Looker.

Conditions requises

Avant de commencer, vous devez disposer des éléments suivants:

  • Vous devez avoir accès à une instance Looker sur laquelle Extension Framework est activé.
  • Vous devez disposer de l'autorisation develop.
  • Vous devez disposer de plusieurs tableaux de bord définis par l'utilisateur dans Looker à placer dans les onglets de l'interface utilisateur.
  • Que vous compiliez dans le framework d'extension ou dans votre propre application React autonome, il est important de vous authentifier avec l'API Looker et d'accéder à l'objet SDK Looker. Pour en savoir plus, consultez Authentification de l'API Looker ou notre framework d'extensions.
  • Cet exemple utilise le SDK Looker Embed. Pour autoriser l'exécution du SDK Embed sur votre instance, http://localhost:8080 doit être inclus dans la liste d'autorisation de domaines intégrés de la page Intégrer du panneau Administration.
  • Assurez-vous d'avoir installé le package NPM des composants Looker. Vous trouverez des informations sur l'installation et l'utilisation du package de composants dans le document README, disponible sur GitHub et NPM.

Étape 1: Créez une extension TypeScript de base

Suivez les instructions de la page de documentation Présentation de la création d'une extension Looker pour créer une extension. Pour créer une extension TypeScript, utilisez les modifications suivantes:

  • Si vous utilisez l'outil create-looker-extension pour créer le modèle d'extension, choisissez TypeScript comme langage que vous souhaitez utiliser à la deuxième étape.
  • Si vous clonez le dépôt Git pour créer le modèle d'extension, accédez au répertoire extension-examples/react/TypeScript/helloworld-ts à la deuxième étape.

Étape 2: Créez le fichier src/Dashboards.tsx pour associer et stocker les tableaux de bord

Dans le répertoire src de votre nouvelle extension, créez un fichier Dashboards.tsx. Ce fichier connectera et stockera les tableaux de bord que vous avez créés dans Looker.

Dans le fichier, collez le code suivant : Ce code crée trois objets de tableau de bord et les spécifie par ID. Vous pouvez créer plus ou moins d'objets de tableau de bord, selon vos besoins.

Le code d'une URL d'instance contient trois emplacements, https://mycompany.looker.com. Remplacez-la par l'URL de votre instance Looker.

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%;
 }
`;

Dans l'exemple de code précédent, il se passe ce qui suit:

  • Les instructions d'importation importent les dépendances nécessaires.

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

  • Le bloc de code suivant crée un objet EmbeddedDashboard1, qui est un objet EmbedContainer contenant un iFrame de tableau de bord. L'iFrame est généré à partir du SDK Looker Embed en utilisant l'ID du tableau de bord qui lui est transmis. Assurez-vous de remplacer https://mycompany.looker.com/ par l'URL de votre instance Looker.

    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>;
};

  • Les deux blocs de code suivants répètent ce processus pour EmbeddedDashboard2 et EmbeddedDashboard3. Encore une fois, veillez à remplacer https://mycompany.looker.com/ par l'URL de votre instance Looker.

  • Le dernier bloc définit le style du composant EmbedContainer.

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

Étape 3: Créez le fichier src/Tabs.tsx pour stocker le composant Tabs

Dans le répertoire src de votre nouvelle extension, créez un fichier Tabs.tsx. Ce fichier stocke le composant Tabs et référence l'ID du tableau de bord Looker pour chaque tableau de bord.

Dans ce fichier, collez le code suivant (la section suivante décrit le code):

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>
)

Dans l'exemple de code précédent, il se passe ce qui suit:

  • Les instructions d'importation importent les dépendances et les composants nécessaires, ainsi que les objets EmbeddedDashboard créés dans le fichier Dashboards.tsx.

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

  • L'instruction d'exportation permet d'importer l'objet Tabs dans d'autres composants.

    export const Tabs = () => (

  • ComponentsProvider encapsule des composants individuels pour faciliter la thématisation.

    <ComponentsProvider>
</ComponentsProvider>

  • Le composant Tabs2 et son composant enfant, Tab2, créent trois onglets et les associent aux tableaux de bord Looker.

     <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>
    • La propriété id de Tab2 accepte un ID d'onglet unique. Mettez à jour l'ID, si nécessaire pour votre environnement.
    • La propriété label accepte le libellé qui s'affiche dans chaque onglet. Modifiez l'ID en fonction du tableau de bord que vous utilisez.
    • Une chaîne placée dans les balises Tab2 s'affiche en haut de la zone de contenu de cet onglet. Modifiez ou supprimez la chaîne si nécessaire.
    • Les objets EmbeddedDashboard1, EmbeddedDashboard1 et EmbeddedDashboard1 sont placés dans l'onglet. Leurs propriétés id acceptent l'ID du tableau de bord à intégrer dans cet onglet. Lorsque vous créez votre propre tableau de bord à onglets, remplacez cette valeur par l'ID du tableau de bord que vous souhaitez utiliser. L'ID du tableau de bord numérique se trouve dans l'URL après dashboards/. Par exemple, si l'URL est https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, l'ID du tableau de bord est 61.

Étape 4: Remplacez la référence HelloWorld dans src/App.tsx

Accédez au fichier App.tsx dans le répertoire src. Supprimez l'instruction d'importation HelloWorld:

import { HelloWorld } from './HelloWorld'

et le remplacer par:

import { Tabs } from './Tabs'

Vous pouvez également supprimer le fichier HelloWorld.tsx de ce répertoire, car vous ne l'utiliserez plus.

Étape 5: Mettez à jour le fichier manifest.lkml avec les droits d'intégration

Ajoutez le droit d'accès suivant à la section sur les droits du fichier manifest.lkml de votre projet LookML:

use_embeds: yes

Le fichier manifest.lkml devrait se présenter comme suit:

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
  }
}

Vous pouvez maintenant accéder à votre extension, qui s'affiche dans le dossier Applications du panneau de navigation de gauche. Si vous avez démarré votre serveur de développement local avec yarn develop, les tableaux de bord à onglets intégrés s'affichent.

Étape 6: Publiez l'extension dans votre instance Looker

Pour afficher l'extension auprès d'autres utilisateurs de Looker, publiez-la sur votre instance Looker en procédant comme suit:

  1. Une fois votre serveur de développement en cours d'exécution, accédez à localhost:8080/bundle.js.
  2. Enregistrez le contenu de la fenêtre du navigateur en local sur votre ordinateur dans un fichier .js.
  3. Assurez-vous que vous êtes en mode développement, puis glissez-déposez le fichier .js dans votre projet d'extension. Enregistrez les modifications.
  4. Dans le fichier manifest.lkml, mettez en commentaire la ligne url: "http://localhost:8080/bundle.js".
  5. Dans le fichier manifest.lkml, annulez la mise en commentaire de la ligne # file: "bundle.js" et assurez-vous que le nom du fichier .js correspond à celui que vous avez importé dans votre projet. Enregistrez les modifications.
  6. Validez et déployez vos modifications.

Une fois l'extension déployée, il n'est plus nécessaire de démarrer le serveur de développement local pour permettre aux utilisateurs de votre instance Looker de la voir s'ils y accèdent dans le dossier Applications du panneau de navigation de gauche.