Un ejemplo simple de cómo los componentes de IU pueden mejorar una aplicación integrada 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 completar este ejemplo, asegúrate de que tu configuración cumpla con los requisitos y, luego, sigue estos pasos:
- Compila una extensión básica de TypeScript.
- Crea el archivo
src/Dashboards.tsx
para conectar y almacenar paneles. - Crea el archivo
src/Tabs.tsx
para almacenar el componenteTabs
. - Reemplaza la referencia de HelloWorld en
src/App.tsx
. - Actualiza el archivo
manifest.lkml
con el derecho de incorporación. - Publica la extensión en tu instancia de Looker.
Requisitos
Necesitarás algunos elementos antes de comenzar:
- Debes tener acceso a una instancia de Looker con el Extension Framework habilitado.
- Debes tener permiso de
develop
. - Deberías 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 independiente de React, es importante que te autentiques con la API de Looker y que tengas acceso al objeto del SDK de Looker. Obtén más información sobre la autenticación de la API de Looker o nuestro framework de extensiones.
- En este ejemplo, se usa el SDK de Looker Embed. Para permitir que el SDK de Embed se ejecute en tu instancia,
http://localhost:8080
debe incluirse en la Lista de entidades permitidas de dominios incorporados dentro de la página Incorporar del panel de administrador. Asegúrate de haber instalado el paquete NPM de Looker Components. Encontrarás información para instalar y usar el paquete de componentes en el documento README, disponible en GitHub y NPM:
Paso 1: Compila una extensión básica de TypeScript
Para compilar una extensión, sigue las instrucciones de la página de documentación Introducción a la compilación de una extensión de Looker. Para convertir la extensión en una extensión de TypeScript, usa las siguientes modificaciones:
- Si usas la herramienta
create-looker-extension
para crear la plantilla de extensión, elige React para el framework y TypeScript para el lenguaje. - Si clonas el repositorio de Git para crear la plantilla de extensión, navega al directorio
extension-examples/react/TypeScript/helloworld-ts
en el segundo paso.
Paso 2: Crea el archivo src/Dashboards.tsx
para conectar y almacenar los paneles
Dentro del directorio src
de tu nueva extensión, crea un archivo Dashboards.tsx
. Este archivo conectará y almacenará los paneles que creaste en Looker.
Dentro del archivo, pega el siguiente código. Este código crea un componente de panel reutilizable.
Hay una ubicación en el código de una URL de instancia, https://mycompany.looker.com
. Cambia esto 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 EmbeddedDashboard = (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 EmbedContainer = styled.div`
width: 100%;
height: 95vh;
& > iframe {
width: 100%;
height: 100%;
}
`;
En el ejemplo de código anterior, suceden las siguientes acciones:
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
EmbeddedDashboard
, que es un objetoEmbedContainer
que contiene un iframe del panel. Este componente es reutilizable. Puedes usarlo para cualquier panel pasando una propiedadid
diferente. 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 EmbeddedDashboard = (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>; };
El bloque final aplica un diseño al 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 siguiente sección, se explica qué hace el código):
import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard } 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, suceden las siguientes acciones:
Las sentencias de importación incorporan las dependencias y los componentes necesarios, así como los objetos
EmbeddedDashboard
que se crearon en el archivoDashboards.tsx
.import React from "react"; import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components"; import { EmbeddedDashboard } from "./Dashboard";
La instrucción de exportación hace que el objeto
Tabs
esté disponible para importarse en otros componentes.export const Tabs = () => (
El
ComponentsProvider
envuelve los componentes individuales para ayudar con la aplicación de temas.<ComponentsProvider> </ComponentsProvider>
El componente
Tabs2
y 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 <EmbeddedDashboard id={5} /> </Tab2> <Tab2 id="2" label="Inventory Dashboard"> Current global inventory <EmbeddedDashboard id={2} /> </Tab2> <Tab2 id="7" label="Customer Dashboard"> Anonymized customer data <EmbeddedDashboard id={7} /> </Tab2> </Tabs2>
- La propiedad
id
deTab2
acepta un ID de pestaña único. Actualiza el ID según sea necesario para tu entorno. - La propiedad
label
acepta la etiqueta que aparecerá en cada pestaña. Actualiza el ID según corresponda al panel que usas. - 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
EmbeddedDashboard
se colocan dentro de la pestaña. Sus propiedadesid
aceptan el ID del panel que se incorporará en esa pestaña. Cuando compiles tu propio panel con pestañas, reemplaza este valor por el ID del panel que deseas usar. Puedes encontrar el ID numérico del panel 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 HelloWorld en src/App.tsx
Navega a tu archivo App.tsx
en el directorio src
. Quita la instrucción de importación de 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, ya que no lo usarás má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 Applications del panel de navegación de la izquierda. Si iniciaste el servidor de desarrollo local con yarn develop
, puedes ver los paneles integrados con pestañas.
Paso 6: Publica la extensión en tu instancia de Looker
Para mostrar la extensión a otros usuarios de Looker, publícala en tu instancia de Looker siguiendo estos pasos:
- 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 el modo de desarrollo y, luego, arrastra y suelta el archivo
.js
en el proyecto de tu extensión. Guarda los cambios. - En el archivo
manifest.lkml
, agrega un comentario a la líneaurl: "http://localhost:8080/bundle.js"
. - En el archivo
manifest.lkml
, quita la marca de comentario de la línea# file: "bundle.js"
y asegúrate de que el nombre del archivo coincida con el nombre del archivo.js
que subiste a tu proyecto. Guarda los cambios. - Confirma e implementa tus cambios.
Una vez que se implementen los cambios, ya no necesitarás iniciar el 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 dentro de la carpeta Aplicaciones en el panel de navegación principal.