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:
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:
- Créez une extension TypeScript de base.
- Créez le fichier
src/Dashboards.tsx
pour associer et stocker les tableaux de bord. - Créez le fichier
src/Tabs.tsx
pour stocker le composantTabs
. - Remplacez la référence HelloWorld dans
src/App.tsx
. - Mettre à jour le fichier
manifest.lkml
avec les droits d'accès au bouton "Intégrer". - 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 objetEmbedContainer
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 remplacerhttps://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
etEmbeddedDashboard3
. Encore une fois, veillez à remplacerhttps://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 fichierDashboards.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
deTab2
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
etEmbeddedDashboard1
sont placés dans l'onglet. Leurs propriétésid
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èsdashboards/
. Par exemple, si l'URL esthttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US
, l'ID du tableau de bord est61
.
- La propriété
É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:
- Une fois votre serveur de développement en cours d'exécution, accédez à
localhost:8080/bundle.js
. - Enregistrez le contenu de la fenêtre du navigateur en local sur votre ordinateur dans un fichier
.js
. - Assurez-vous que vous êtes en mode développement, puis glissez-déposez le fichier
.js
dans votre projet d'extension. Enregistrez les modifications. - Dans le fichier
manifest.lkml
, mettez en commentaire la ligneurl: "http://localhost:8080/bundle.js"
. - 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. - 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.