Un semplice esempio di come i componenti dell'interfaccia utente possono migliorare un'applicazione incorporata è il loro utilizzo 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 utilizzare 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 connetterti 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 il diritto di incorporamento. - Pubblica l'estensione nell'istanza di Looker.
Requisiti
Prima di iniziare, avrai bisogno di alcuni elementi:
- Devi avere accesso a un'istanza di Looker con il framework delle estensioni abilitato.
- Devi disporre dell'autorizzazione
develop. - Looker dovresti avere diverse dashboard definite dall'utente da inserire nelle schede della UI.
- Che tu stia creando nel framework di estensione o nella tua applicazione React autonoma, è importante eseguire l'autenticazione con l'API di Looker e avere accesso all'oggetto SDK di Looker. Per saperne di più, leggi 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,
http://localhost:8080deve essere incluso nella Lista consentita di domini incorporati nella pagina Incorpora del riquadro Amministrazione. - Assicurati di aver installato il pacchetto NPM dei componenti 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 nella pagina della documentazione Introduzione alla creazione di un'estensione di Looker. Per rendere l'estensione un'estensione TypeScript, apporta le seguenti modifiche:
- Se usi lo strumento
create-looker-extensionper creare il modello di estensione, scegli TypeScript come linguaggio 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 connettere e archiviare le dashboard
Nella directory src della nuova estensione, crea un file Dashboards.tsx. Questo file connetterà e archivierà le dashboard che hai creato in Looker.
Incolla il codice seguente all'interno del file. Questo codice crea tre oggetti dashboard e li specifica per ID. Puoi creare un numero maggiore o minore di oggetti della dashboard, a seconda delle esigenze.
Il codice di un URL dell'istanza contiene tre posizioni, https://mycompany.looker.com. Modificalo 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, ovvero un oggettoEmbedContainerche contiene un iframe della dashboard. L'iframe viene generato dall'SDK Looker Embed utilizzando l'ID dashboard che gli è stato passato. Assicurati di aggiornarehttps://mycompany.looker.com/con l'URL dell'istanza di 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 la procedura per
EmbeddedDashboard2eEmbeddedDashboard3. Ancora una volta, assicurati di aggiornarehttps://mycompany.looker.com/all'URL dell'istanza di Looker.L'ultimo blocco definisce lo stile di 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 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 che segue 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 trasferiscono 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 = () => (ComponentsProviderricopre i singoli componenti per agevolare la assegnazione dei temi.<ComponentsProvider> </ComponentsProvider>Il componente
Tabs2e il relativo componente secondario,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>- La proposta
iddiTab2accetta un ID scheda univoco. Aggiorna l'ID in base alle esigenze del tuo ambiente. - La proposta
labelaccetta l'etichetta che verrà visualizzata su ogni scheda. Aggiorna l'ID in base alle esigenze della dashboard in uso. - Una stringa posizionata 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 tue esigenze.
- Gli oggetti
EmbeddedDashboard1,EmbeddedDashboard1eEmbeddedDashboard1vengono posizionati all'interno della scheda. Le loro proprietàidaccettano l'ID dashboard della dashboard per l'incorporamento in 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 dopodashboards/. Ad esempio, se l'URL èhttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, l'ID della dashboard sarà61.
- La proposta
Passaggio 4: sostituisci il riferimento HelloWorld in src/App.tsx
Vai al file App.tsx nella directory src. Rimuovi l'istruzione di importazione HelloWorld:
import { HelloWorld } from './HelloWorld'
e sostituirlo 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 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, che viene 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 incorporate a schede.
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 in locale sul computer come file
.js. - Assicurati di essere in modalità di sviluppo, quindi trascina il file
.jsnel progetto di 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 e il deployment delle modifiche.
Una volta eseguito il deployment, non dovrai più avviare il server di sviluppo locale per vedere l'estensione e gli utenti dell'istanza di Looker dovrebbero essere in grado di vederla se vi accedono all'interno della cartella Applications (Applicazioni) nel pannello di navigazione a sinistra.