Un exemple simple de la façon dont les composants d'interface utilisateur peuvent améliorer une application intégrée 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 suivre cet exemple, assurez-vous que votre configuration respecte les conditions requises, puis procédez comme suit:
- Créez une extension TypeScript de base.
- Créez le fichier
src/Dashboards.tsxpour associer et stocker des tableaux de bord. - Créez le fichier
src/Tabs.tsxpour stocker le composantTabs. - Remplacez la référence HelloWorld dans
src/App.tsx. - Mettez à jour le fichier
manifest.lkmlavec des droits d'accès intégrés. - Publiez l'extension sur votre instance Looker.
Conditions requises
Vous aurez besoin de quelques éléments avant de commencer:
- 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 conceviez dans le framework d'extension ou dans votre propre application React autonome, il est important de vous authentifier avec l'API de Looker et d'avoir accès à l'objet SDK Looker. Pour en savoir plus, consultez les articles sur l'authentification de l'API Looker ou sur notre framework d'extension.
- Cet exemple utilise le SDK Looker Embed. Pour permettre au SDK Embed de s'exécuter sur votre instance,
http://localhost:8080doit être inclus dans la liste d'autorisation du domaine intégré sur la page Intégrer du panneau Administration. - Assurez-vous d'avoir installé le package NPM des composants Looker. Pour en savoir plus sur l'installation et l'utilisation du package de composants, consultez 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 transformer l'extension en extension TypeScript, appliquez les modifications suivantes:
- Si vous utilisez l'outil
create-looker-extensionpour créer le modèle d'extension, sélectionnez TypeScript comme langage à 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, en fonction de vos besoins.
Le code d'une URL d'instance comporte 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, voici ce qui se passe:
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 objetEmbedContainercontenant un iFrame de tableau de bord. L'iFrame est généré à partir du SDK Looker Embed à l'aide de l'ID du tableau de bord qui lui est transmis. Veillez à 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
EmbeddedDashboard2etEmbeddedDashboard3. Une fois encore, veillez à remplacerhttps://mycompany.looker.com/par l'URL de votre instance Looker.Le bloc final applique un style à 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 de chaque tableau de bord Looker.
Dans ce fichier, collez le code suivant (la section qui suit explique ce que fait le code):
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>
)
Dans l'exemple de code précédent, voici ce qui se passe:
Les instructions d'importation importent les dépendances et les composants nécessaires, ainsi que les objets
EmbeddedDashboardcréé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
Tabsdans d'autres composants.export const Tabs = () => (ComponentsProviderencapsule des composants individuels pour faciliter la thématisation.<ComponentsProvider> </ComponentsProvider>Le composant
Tabs2et 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é
iddeTab2accepte un ID d'onglet unique. Mettez à jour l'ID si nécessaire pour votre environnement. - L'objet
labelaccepte le libellé qui apparaîtra dans chaque onglet. Mettez à jour l'ID approprié pour le tableau de bord que vous utilisez. - Une chaîne placée à l'intérieur des balises Tab2 apparaîtra en haut de la zone de contenu de cet onglet. Mettez à jour ou supprimez la chaîne, si nécessaire.
- Les objets
EmbeddedDashboard1,EmbeddedDashboard1etEmbeddedDashboard1sont placés dans l'onglet. Leurs propriétésidacceptent 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 numérique du tableau de bord 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 sera61.
- La propriété
Étape 4: Remplacez la référence HelloWorld dans src/App.tsx
Accédez à votre fichier App.tsx dans le répertoire src. Supprimez l'instruction d'importation HelloWorld:
import { HelloWorld } from './HelloWorld'
et remplacez-le par:
import { Tabs } from './Tabs'
De plus, dans le fichier src/App.tsx, remplacez <HelloWorld/> par <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 des droits d'accès intégrés
Ajoutez le droit suivant à la section des droits du fichier manifest.lkml de votre projet LookML:
use_embeds: yes
Le fichier manifest.lkml doit 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 apparaît dans le dossier Applications du panneau de navigation de gauche. Si vous avez démarré votre serveur de développement local avec yarn develop, vous pouvez voir les tableaux de bord intégrés sous forme d'onglets.
Étape 6: Publiez l'extension sur votre instance Looker
Pour afficher l'extension auprès d'autres utilisateurs 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 localement sur votre ordinateur dans un fichier
.js. - Assurez-vous d'être en mode Développement, puis glissez-déposez le fichier
.jsdans 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 correspond à celui du fichier.jsque vous avez importé dans votre projet. Enregistrez les modifications. - Validez et déployez vos modifications.
Une fois l'extension déployée, vous n'aurez plus besoin de démarrer votre serveur de développement local pour la voir. De plus, les utilisateurs de votre instance Looker devraient pouvoir voir l'extension s'ils y accèdent dans le dossier Applications du panneau de navigation de gauche.