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 a schede a un'estensione TypeScript di base creata utilizzando il framework di estensioni di Looker.
Per seguire questo esempio, assicurati che la configurazione soddisfi i requisiti, quindi segui questi passaggi:
- Crea un'estensione TypeScript di base.
- Crea il file
src/Dashboards.tsxper connettere e archiviare le dashboard. - Crea il file
src/Tabs.tsxper archiviare il componenteTabs. - Sostituisci il riferimento HelloWorld in
src/App.tsx. - Aggiorna il file
manifest.lkmlcon diritto di incorporamento. - Pubblica l'estensione sull'istanza di Looker.
Requisiti
Prima di iniziare, saranno necessari alcuni elementi:
- Devi avere accesso a un'istanza Looker con il framework delle estensioni abilitato.
- Devi avere l'autorizzazione
develop. - All'interno di Looker dovresti avere diverse dashboard definite dall'utente da posizionare nelle schede dell'interfaccia utente.
- Che tu stia creando nel framework di estensione o nella tua applicazione React autonoma, è importante eseguire l'autenticazione con l'API Looker e avere accesso all'oggetto SDK Looker. Per saperne di più, consulta l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensioni.
- In questo esempio viene utilizzato l'SDK Looker Embed. Per consentire l'esecuzione dell'SDK Embed sulla tua istanza, è necessario includere
http://localhost:8080nella Lista consentita dei domini incorporati nella pagina Incorpora del riquadro Amministrazione. - Assicurati di aver installato il pacchetto NPM dei componenti di Looker. Le informazioni sull'installazione e sull'utilizzo del pacchetto dei componenti sono disponibili nel documento README, disponibile in GitHub e NPM.
Passaggio 1: crea un'estensione TypeScript di base
Per creare un'estensione, segui le istruzioni riportate nella pagina della documentazione Introduzione alla creazione di un'estensione 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
All'interno della directory src della nuova estensione, crea un file Dashboards.tsx. Questo file si connetterà e archivierà le dashboard che hai creato in Looker.
Incolla il codice seguente all'interno del file. Questo codice crea tre oggetti della dashboard e li specifica in base all'ID. Puoi creare un numero maggiore o minore di oggetti della dashboard, a seconda delle tue esigenze.
Nel codice di un URL di istanza, https://mycompany.looker.com, sono presenti tre posizioni. Cambia 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 verifica quanto segue:
Le istruzioni di importazione introducono 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, che è un oggettoEmbedContainerche contiene un iframe della dashboard. L'iframe viene generato dall'SDK Embed di Looker utilizzando l'ID della dashboard che gli è stato trasmesso. Assicurati di aggiornarehttps://mycompany.looker.com/nell'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/nell'URL dell'istanza di Looker.Il blocco finale definisce lo stile dell'oggetto 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
All'interno della directory src della nuova estensione, crea un file Tabs.tsx. Questo file archivia il componente Tabs e fa riferimento all'ID della dashboard di Looker per ogni dashboard.
All'interno del file, incolla il seguente codice (la sezione successiva spiega il funzionamento del 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 verifica quanto segue:
Le istruzioni di importazione apportano 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 di esportazione rende l'oggetto
Tabsdisponibile per l'importazione in altri componenti.export const Tabs = () => (L'
ComponentsProvideraggrega i singoli componenti per aiutarti a creare i temi.<ComponentsProvider> </ComponentsProvider>Il componente
Tabs2e il relativo componente figlio,Tab2, creano 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>- L'elemento
iddiTab2accetta un ID scheda univoco. Aggiorna l'ID in base alle esigenze del tuo ambiente. - L'elemento di scena
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 verrà visualizzata nella parte superiore dell'area dei contenuti di quella scheda. Aggiorna o rimuovi la stringa in base alle esigenze.
- Gli oggetti
EmbeddedDashboard1,EmbeddedDashboard1eEmbeddedDashboard1vengono posizionati all'interno della scheda. Le loro proprietàidaccettano l'ID della dashboard da incorporare all'interno di questa scheda. Quando crei la tua dashboard a schede, sostituisci questo valore con l'ID della dashboard che vuoi utilizzare. Puoi trovare l'ID numerico della dashboard nell'URL dopo il giornodashboards/. Ad esempio, se l'URL èhttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, l'ID della dashboard sarà61.
- L'elemento
Passaggio 4: sostituisci il riferimento HelloWorld in src/App.tsx
Vai al tuo file App.tsx nella directory src. Rimuovi l'istruzione di importazione HelloWorld:
import { HelloWorld } from './HelloWorld'
e sostituiscilo con:
import { Tabs } from './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 diritto di incorporamento
Aggiungi il seguente diritto alla sezione dei 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 accedere all'estensione, visualizzata nella cartella Applicazioni del pannello di navigazione a sinistra. Se hai avviato il tuo server di sviluppo locale con yarn develop, puoi visualizzare le dashboard a schede incorporate.
Passaggio 6: pubblica l'estensione nell'istanza di Looker
Per mostrare l'estensione ad altri utenti di Looker, pubblicala nell'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 tuo computer come file
.js. - Assicurati di essere in modalità 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 file corrisponda a quello del file.jsche hai caricato nel progetto. Salva le modifiche. - Esegui il commit delle modifiche ed eseguine il deployment.
Una volta eseguito il deployment, non sarà più necessario avviare il server di sviluppo locale per visualizzare l'estensione e gli utenti dell'istanza Looker dovrebbero riuscire a vederla accedendo alla cartella Applicazioni nel pannello di navigazione a sinistra.