Un ejemplo sencillo de cómo los componentes de la interfaz de usuario pueden mejorar una aplicación incorporada es usarlos para crear una 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ó con 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:
- Compila 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 de HelloWorld en
src/App.tsx. - Actualiza el archivo
manifest.lkmlcon derecho de incorporación. - Publicar la extensión en tu instancia de Looker
Requisitos
Necesitarás algunos elementos antes de empezar:
- Debes tener acceso a una instancia de Looker con el framework de extensiones habilitado.
- Debes tener el permiso
develop. - Deberías tener varios paneles definidos por el usuario en Looker para colocar 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 autenticar con la API de Looker y tener acceso al objeto del SDK de Looker. Lee sobre la autenticación de la API de Looker o nuestro framework de extensión para obtener más información.
- En este ejemplo, se usa el SDK de Looker Embed. Para permitir que el SDK de Embed se ejecute en tu instancia, se debe incluir
http://localhost:8080en la Lista de dominios incorporados, dentro de la página Incorporar del panel Administrador. - 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 compilación de una extensión de Looker para crear una extensión. Para convertir la extensión en una extensión de TypeScript, usa las siguientes modificaciones:
- Si usas la herramienta
create-looker-extensionpara crear la plantilla de extensión, elige TypeScript como el lenguaje que deseas usar en el segundo paso. - Si clona 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 se conectará y almacenará los paneles que creaste en Looker.
Dentro del archivo, pega el siguiente código. Este código crea tres objetos de panel y los especifica por ID. Puedes crear más o menos objetos de panel, según tus necesidades.
Hay tres ubicaciones en el código de la URL de una instancia, https://mycompany.looker.com. Cámbiala por 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 incorporan 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 desde el SDK de Looker Embed con el ID del panel que se le pasó. 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 siguientes dos bloques de código 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. Este archivo almacena el componente Tabs y hace referencia al ID del panel de Looker para cada panel.
Dentro de ese archivo, pega el siguiente código (en la sección que sigue, se explica lo que hace el código):
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>
)
En el ejemplo de código anterior, sucede lo siguiente:
Las sentencias de importación incorporan 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 sentencia de exportación hace que el objeto
Tabsesté disponible para que se importe a otros componentes.export const Tabs = () => (ComponentsProviderse une a los componentes individuales para ayudar con la aplicación de 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 propiedad
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 estás usando. - Una cadena que se coloca dentro de las etiquetas Tab2 aparecerá en la parte superior del área de contenido de esa pestaña. Actualiza o quita la cadena según sea necesario.
- Los objetos
EmbeddedDashboard1,EmbeddedDashboard1yEmbeddedDashboard1se colocan dentro de la pestaña. Sus propiedades deidaceptan el ID del panel que se incorporará dentro de esa pestaña. Cuando crees tu propio panel con pestañas, reemplaza este valor por el ID del panel que quieres 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 propiedad
Paso 4: Reemplaza la referencia de HelloWorld en src/App.tsx
Navega a tu archivo App.tsx en el directorio src. Quita la sentencia de importación HelloWorld:
import { HelloWorld } from './HelloWorld'
y reemplázala por lo siguiente:
import { Tabs } from './Tabs'
Además, en el archivo src/App.tsx, reemplaza <HelloWorld/> por <Tabs/>.
De manera opcional, también puedes borrar el archivo HelloWorld.tsx de este directorio, dado que ya no lo usarás.
Paso 5: Actualiza el archivo manifest.lkml con el derecho 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 para 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 manera local en tu computadora como un archivo
.js. - Asegúrate de estar en modo de desarrollo y, luego, 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 el nombre del archivo coincida con el del archivo.jsque subiste a tu proyecto. Guarda los cambios. - Confirma e implementa tus 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 verla si navegan a ella en la carpeta Aplicaciones del panel de navegación izquierdo.