Un ejemplo simple de cómo los componentes de la IU pueden mejorar una aplicación incorporada es usarlos a fin de crear la navegación con pestañas para los paneles:
En el siguiente ejemplo, se agregan paneles con pestañas a una extensión básica de TypeScript que se compiló mediante el framework de extensiones de Looker.
Para revisar este ejemplo, asegúrate de que la configuración cumpla con los requisitos y, luego, sigue estos pasos:
- Crea una extensión básica de TypeScript.
- Crea el archivo
src/Dashboards.tsxpara conectar y almacenar paneles. - Crea el archivo
src/Tabs.tsxpara almacenar el componenteTabs. - Reemplaza la referencia HelloWorld en
src/App.tsx. - Actualiza el archivo
manifest.lkmlcon derechos de incorporación. - Publica la extensión en tu instancia de Looker.
Requisitos
Antes de comenzar, necesitarás algunos elementos:
- Debes tener acceso a una instancia de Looker con el framework de extensión habilitado.
- Debes tener el permiso
develop. - Debes tener varios paneles definidos por el usuario en Looker para colocarlos en las pestañas de la IU.
- Ya sea que compiles en el framework de extensiones o en tu propia aplicación de React independiente, es importante autenticarse con la API de Looker y tener acceso al objeto del SDK de Looker. Obtén más información sobre la autenticación de la API de Looker o sobre nuestro framework de extensión.
- En este ejemplo, se usa el SDK de incorporación de Looker. Para permitir que el SDK de Embed se ejecute en tu instancia, se debe incluir
http://localhost:8080en la lista de entidades permitidas de dominio incorporadas dentro de la página Embed del panel Admin. - Asegúrate de haber instalado el paquete de NPM de los componentes de Looker. Puedes encontrar información sobre la instalación y el uso del paquete de componentes en el documento README, disponible en GitHub y NPM.
Paso 1: Compila una extensión básica de TypeScript
Sigue las instrucciones de la página de documentación Introducción a la creación de una extensión de Looker para compilar una extensión. Para convertir la extensión en TypeScript, usa las siguientes modificaciones:
- Si usas la herramienta de
create-looker-extensionpara crear la plantilla de extensión, elige TypeScript como el idioma que quieres usar en el segundo paso. - Si clonas el repositorio de Git para crear la plantilla de extensión, navega al directorio
extension-examples/react/TypeScript/helloworld-tsen el segundo paso.
Paso 2: Crea el archivo src/Dashboards.tsx para conectar y almacenar paneles
Dentro del directorio src de tu nueva extensión, crea un archivo Dashboards.tsx. Este archivo conectará y almacenará los paneles que creaste dentro de Looker.
Dentro del archivo, pega el siguiente código. Este código crea tres objetos de panel y los especifica por ID. Puede crear más o menos objetos de panel, según sus necesidades.
Hay tres ubicaciones en el código de la URL de una instancia, https://mycompany.looker.com. Cámbialo a la URL de tu instancia de 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%;
}
`;
En el ejemplo de código anterior, sucede lo siguiente:
Las sentencias de importación aportan las dependencias necesarias.
import React, { useCallback } from "react"; import { LookerEmbedSDK } from "@looker/embed-sdk"; import styled from "styled-components";El siguiente bloque de código crea un objeto
EmbeddedDashboard1, que es un objetoEmbedContainerque contiene un iframe del panel. El iframe se genera a partir del SDK de incorporación de Looker con el ID del panel que se le pasa. Asegúrate de actualizarhttps://mycompany.looker.com/a la URL de tu instancia de 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>; };Los dos bloques de código siguientes repiten este proceso para
EmbeddedDashboard2yEmbeddedDashboard3. Una vez más, asegúrate de actualizarhttps://mycompany.looker.com/a la URL de tu instancia de Looker.El bloque final diseña el EmbedContainer.
export const EmbedContainer = styled.div` width: 100%; height: 95vh; & > iframe { width: 100%; height: 100%; } `;
Paso 3: Crea el archivo src/Tabs.tsx para almacenar el componente Tabs
Dentro del directorio src de tu nueva extensión, crea un archivo Tabs.tsx. En este archivo, se almacena el componente Tabs y se hace referencia al ID del panel de Looker para cada panel.
Dentro de ese archivo, pega el siguiente código (en la siguiente sección, se explica lo que hace el código):
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>
)
En el ejemplo de código anterior, sucede lo siguiente:
Las sentencias de importación aportan las dependencias y los componentes necesarios, así como los objetos
EmbeddedDashboardque se crearon en el archivoDashboards.tsx.import React from "react"; import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components"; import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3, } from "./Dashboard";La declaración de exportación hace que el objeto
Tabsesté disponible para importarlo a otros componentes.export const Tabs = () => (ComponentsProviderune los componentes individuales para ayudar con los temas.<ComponentsProvider> </ComponentsProvider>El componente
Tabs2y su componente secundario,Tab2, crean tres pestañas y las vinculan a los paneles de 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 prop de
iddeTab2acepta un ID de pestaña único. Actualiza el ID según sea necesario para tu entorno. - El prop
labelacepta la etiqueta que aparecerá en cada pestaña. Actualiza el ID según corresponda para el panel que usas. - Aparecerá una string colocada dentro de las etiquetas Tab2 en la parte superior del área de contenido de la pestaña. Actualiza o quita la string según sea necesario.
- Los objetos
EmbeddedDashboard1,EmbeddedDashboard1yEmbeddedDashboard1se ubican en la pestaña. Sus propiedadesidaceptan el ID del panel que se incorporará dentro de esa pestaña. Cuando cree su propio panel con pestañas, reemplace este valor por el ID del panel que desea usar. Puedes encontrar el ID del panel numérico en la URL después dedashboards/. Por ejemplo, si la URL eshttps://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, el ID del panel sería61.
- La prop de
Paso 4: Reemplaza la referencia HelloWorld en src/App.tsx
Navega al archivo App.tsx en el directorio src. Quita la sentencia de importación HelloWorld:
import { HelloWorld } from './HelloWorld'
y reemplácela por:
import { Tabs } from './Tabs'
De manera opcional, también puedes borrar el archivo HelloWorld.tsx de este directorio porque ya no lo usarás.
Paso 5: Actualiza el archivo manifest.lkml con derechos de incorporación
Agrega el siguiente derecho a la sección de derechos del archivo manifest.lkml en tu proyecto de LookML:
use_embeds: yes
El archivo manifest.lkml debería verse de la siguiente manera:
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
}
}
Ahora puedes navegar a tu extensión, que aparece en la carpeta Aplicaciones en el panel de navegación izquierdo. Si iniciaste tu servidor de desarrollo local con yarn develop, puedes ver los paneles incorporados con pestañas.
Paso 6: Publica la extensión en tu instancia de Looker
Para mostrar la extensión a otros usuarios de Looker, sigue estos pasos a fin de publicarla en tu instancia de Looker:
- Con el servidor de desarrollo en ejecución, navega a
localhost:8080/bundle.js. - Guarda el contenido de la ventana del navegador de forma local en tu computadora como un archivo
.js. - Asegúrate de estar en modo de desarrollo y arrastra y suelta el archivo
.jsen tu proyecto de extensión. Guarda los cambios. - En el archivo
manifest.lkml, marca como comentario la líneaurl: "http://localhost:8080/bundle.js". - En el archivo
manifest.lkml, quita el comentario de la línea# file: "bundle.js"y asegúrate de que coincida con el nombre del archivo.jsque subiste a tu proyecto. Guarda los cambios. - Confirma y, luego, implementa los cambios.
Una vez implementada, ya no necesitarás iniciar tu servidor de desarrollo local para ver la extensión, y los usuarios de tu instancia de Looker deberían poder ver la extensión si navegan a ella dentro de la carpeta Applications del panel de navegación izquierdo.