Un semplice esempio di come i componenti dell'interfaccia utente possono migliorare un'applicazione incorporata è utilizzarli per creare una navigazione a schede per le dashboard:
L'esempio seguente aggiunge dashboard con schede a un'estensione TypeScript di base creata utilizzando il framework di estensioni di Looker.
Per svolgere questo esempio, assicurati che la configurazione soddisfi i requisiti e poi segui questi passaggi:
- Crea un'estensione TypeScript di base.
- Crea il file
src/Dashboards.tsxper collegare e archiviare le dashboard. - Crea il file
src/Tabs.tsxper archiviare il componenteTabs. - Sostituisci il riferimento a HelloWorld in
src/App.tsx. - Aggiorna il file
manifest.lkmlcon il diritto di incorporamento. - Pubblica l'estensione nella tua istanza Looker.
Requisiti
Prima di iniziare, ti serviranno alcuni elementi:
- Devi avere accesso a un'istanza Looker con il Framework di estensione abilitato.
- Devi disporre dell'autorizzazione
develop. - In Looker dovresti avere diverse dashboard definite dall'utente da inserire nelle schede dell'interfaccia utente.
- Indipendentemente dal fatto che tu stia creando nel framework di estensione o nella tua applicazione React autonoma, è importante autenticarsi con l'API di Looker e avere accesso all'oggetto SDK di Looker. Per saperne di più, consulta l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensioni.
- Questo esempio utilizza l'SDK Embed di Looker. Per consentire l'esecuzione dell'SDK Embed nella tua istanza,
http://localhost:8080deve essere incluso nella lista consentita dei domini incorporati nella pagina Incorpora del riquadro Amministrazione. - Assicurati di aver installato il pacchetto NPM di Looker Components. Le informazioni sull'installazione e sull'utilizzo del pacchetto di componenti sono disponibili nel documento README, disponibile su GitHub e NPM.
Passaggio 1: crea un'estensione TypeScript di base
Per creare un'estensione, segui le istruzioni nella pagina della documentazione Introduzione alla creazione di un'estensione di Looker. Per rendere l'estensione un'estensione TypeScript, utilizza le seguenti modifiche:
- Se utilizzi lo strumento
create-looker-extensionper creare il modello di estensione, scegli TypeScript come lingua da utilizzare nel secondo passaggio. - Se cloni il repository Git per creare il modello di estensione, vai alla directory
extension-examples/react/TypeScript/helloworld-tsnel secondo passaggio.
Passaggio 2: crea il file src/Dashboards.tsx per collegare e archiviare le dashboard
Nella directory src della nuova estensione, crea un file Dashboards.tsx. Questo file collegherà e memorizzerà le dashboard che hai creato in Looker.
All'interno del file, incolla il seguente codice. Questo codice crea tre oggetti dashboard e li specifica in base all'ID. Puoi creare più o meno oggetti dashboard, a seconda delle tue esigenze.
Esistono tre posizioni nel codice di un URL istanza, https://mycompany.looker.com. Sostituiscilo con l'URL dell'istanza di 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%;
}
`;
Nell'esempio di codice precedente si verificano le seguenti operazioni:
Le istruzioni di importazione importano le dipendenze necessarie.
import React, { useCallback } from "react"; import { LookerEmbedSDK } from "@looker/embed-sdk"; import styled from "styled-components";Il blocco di codice successivo crea un oggetto
EmbeddedDashboard1, ovvero un oggettoEmbedContainercontenente un iframe della dashboard. L'iframe viene generato dall'SDK di incorporamento di Looker utilizzando l'ID dashboard a cui viene passato. Assicurati di aggiornarehttps://mycompany.looker.com/con l'URL dell'istanza 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>; };I due blocchi di codice successivi ripetono questa procedura per
EmbeddedDashboard2eEmbeddedDashboard3. Ancora una volta, assicurati di aggiornarehttps://mycompany.looker.com/con l'URL dell'istanza Looker.Il blocco finale applica gli stili a EmbedContainer.
export const EmbedContainer = styled.div` width: 100%; height: 95vh; & > iframe { width: 100%; height: 100%; } `;
Passaggio 3: crea il file src/Tabs.tsx per archiviare il componente Tabs
Nella directory src della nuova estensione, crea un file Tabs.tsx. Questo file memorizza il componente Tabs e fa riferimento all'ID dashboard di Looker per ogni dashboard.
Incolla il seguente codice all'interno del file (la sezione successiva spiega cosa fa il codice):
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>
)
Nell'esempio di codice precedente si verificano le seguenti operazioni:
Le istruzioni di importazione importano le dipendenze e i componenti necessari, nonché gli oggetti
EmbeddedDashboardcreati nel fileDashboards.tsx.import React from "react"; import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components"; import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3, } from "./Dashboard";L'istruzione export rende l'oggetto
Tabsdisponibile per l'importazione in altri componenti.export const Tabs = () => (ComponentsProviderracchiude i singoli componenti per facilitare la scelta dei temi.<ComponentsProvider> </ComponentsProvider>Il componente
Tabs2e il relativo componente secondarioTab2creano tre schede e le collegano alle dashboard di 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 proprietà
iddiTab2accetta un ID scheda univoco. Aggiorna l'ID in base alle necessità del tuo ambiente. - La proprietà
labelaccetta l'etichetta che verrà visualizzata in ogni scheda. Aggiorna l'ID in base alla dashboard in uso. - Una stringa inserita all'interno dei tag Tab2 viene visualizzata nella parte superiore dell'area dei contenuti della scheda. Aggiorna o rimuovi la stringa in base alle tue esigenze.
- Gli oggetti
EmbeddedDashboard1,EmbeddedDashboard1eEmbeddedDashboard1vengono posizionati all'interno della scheda. Le loro proprietàidaccettano l'ID della dashboard da incorporare all'interno della scheda. Quando crei la tua dashboard con schede, sostituisci questo valore con l'ID della dashboard che vuoi utilizzare. Puoi trovare l'ID numerico della dashboard nell'URL dopodashboards/. Ad esempio, se l'URL èhttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, l'ID dashboard sarà61.
- La proprietà
Passaggio 4: sostituisci il riferimento a HelloWorld in src/App.tsx
Vai al file App.tsx nella directory src. Rimuovi l'istruzione di importazione HelloWorld:
import { HelloWorld } from './HelloWorld'
e sostituiscila con:
import { Tabs } from './Tabs'
Inoltre, nel file src/App.tsx, sostituisci <HelloWorld/> con <Tabs/>.
Se vuoi, puoi anche eliminare il file HelloWorld.tsx da questa directory perché non lo utilizzerai più.
Passaggio 5: aggiorna il file manifest.lkml con il diritto di incorporamento
Aggiungi il seguente diririttto alla sezione Diritti del file manifest.lkml nel tuo progetto LookML:
use_embeds: yes
Il file manifest.lkml dovrebbe avere il seguente aspetto:
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
}
}
Ora puoi passare all'estensione, che viene visualizzata nella cartella Applicazioni nel riquadro di navigazione a sinistra. Se hai avviato il server di sviluppo locale con yarn develop, puoi vedere le dashboard con schede incorporate.
Passaggio 6: pubblica l'estensione nell'istanza di Looker
Per mostrare l'estensione ad altri utenti di Looker, pubblicala nella tua istanza di Looker seguendo questi passaggi:
- Con il server di sviluppo in esecuzione, vai a
localhost:8080/bundle.js. - Salva i contenuti della finestra del browser localmente sul computer come file
.js. - Assicurati di essere in modalità di sviluppo, quindi trascina il file
.jsnel progetto dell'estensione. Salva le modifiche. - Nel file
manifest.lkml, commenta la rigaurl: "http://localhost:8080/bundle.js". - Nel file
manifest.lkml, rimuovi il commento dalla riga# file: "bundle.js"e assicurati che il nome del file corrisponda a quello del file.jsche hai caricato nel progetto. Salva le modifiche. - Esegui il commit e il deployment delle modifiche.
Una volta eseguito il deployment, non dovrai più avviare il server di sviluppo locale per visualizzare l'estensione e gli utenti della tua istanza Looker dovrebbero essere in grado di visualizzarla se accedono alla cartella Applications nel riquadro di navigazione a sinistra.