Un ejemplo sencillo de cómo los componentes de la interfaz de usuario pueden mejorar una aplicación insertada es usarlos para crear una navegación por pestañas en los paneles de control:
En el siguiente ejemplo se añaden paneles de control con pestañas a una extensión básica de TypeScript que se ha creado con el framework de extensiones de Looker.
Para seguir este ejemplo, asegúrate de que tu configuración cumple los requisitos y, a continuación, sigue estos pasos:
- Crea una extensión básica de TypeScript.
- Crea el archivo
src/Dashboards.tsxpara conectar y almacenar los paneles de control. - Crea el archivo
src/Tabs.tsxpara almacenar el componenteTabs. - Sustituye la referencia a HelloWorld en
src/App.tsx. - Actualiza el archivo
manifest.lkmlcon el derecho de inserción. - Publica la extensión en tu instancia de Looker.
Requisitos
Antes de empezar, necesitarás lo siguiente:
- 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 colocarlos en las pestañas de la interfaz de usuario.
- Tanto si desarrollas en el framework de extensiones como en tu propia aplicación React independiente, es importante que te autentiques con la API de Looker y que tengas acceso al objeto del SDK de Looker. Consulta 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 inserción de Looker. Para permitir que el SDK de inserción se ejecute en tu instancia,
http://localhost:8080debe incluirse en la lista de permitidos de dominios insertados de la página Insertar del panel Administrador. - Asegúrate de haber instalado el paquete NPM de componentes de Looker. Puedes consultar información sobre cómo instalar y usar el paquete de componentes en el archivo README, disponible en GitHub y NPM.
Paso 1: Crea 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 crear una extensión. Para convertir la extensión en una extensión de TypeScript, haz las siguientes modificaciones:
- Si utiliza la herramienta
create-looker-extensionpara crear la plantilla de extensión, elija TypeScript como idioma en el segundo paso. - Si clonas el repositorio de Git para crear la plantilla de extensión, ve al directorio
extension-examples/react/TypeScript/helloworld-tsen el segundo paso.
Paso 2: Crea el archivo src/Dashboards.tsx para conectar y almacenar los paneles de control
En el directorio src de la nueva extensión, crea un archivo Dashboards.tsx. Este archivo conectará y almacenará los paneles que hayas creado en Looker.
En el archivo, pega el siguiente código. Este código crea tres objetos de panel de control y los especifica por ID. Puedes crear más o menos objetos de panel de control en función de tus necesidades.
Hay tres ubicaciones en el código de una URL de instancia, https://mycompany.looker.com. Cambia este valor 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, ocurre lo siguiente:
Las instrucciones 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 de panel de control. El iframe se genera a partir del SDK de Looker para insertar mediante el ID del panel de control que se le ha proporcionado. Asegúrate de sustituirhttps://mycompany.looker.com/por 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>; };En los dos bloques de código siguientes se repite este proceso para
EmbeddedDashboard2yEmbeddedDashboard3. Una vez más, asegúrese de actualizarhttps://mycompany.looker.com/a la URL de su instancia de Looker.El bloque final aplica el estilo a 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
En el directorio src de la nueva extensión, crea un archivo Tabs.tsx. Este archivo almacena el componente Tabs y hace referencia al ID del panel de control de Looker de cada panel.
En ese archivo, pega el siguiente código (en la sección siguiente se explica qué 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, ocurre lo siguiente:
Las instrucciones 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 instrucción de exportación hace que el objeto
Tabsesté disponible para importarse en otros componentes.export const Tabs = () => (El
ComponentsProviderenvuelve 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 control 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 en tu entorno. - La propiedad
labelacepta la etiqueta que aparecerá en cada pestaña. Actualice el ID según el panel de control que esté usando. - Una cadena que se coloque dentro de las etiquetas Tab2 aparecerá en la parte superior del área de contenido de esa pestaña. Actualice o elimine la cadena según sea necesario.
- Los objetos
EmbeddedDashboard1,EmbeddedDashboard1yEmbeddedDashboard1se colocan en la pestaña. Sus propiedadesidaceptan el ID del panel de control que se va a insertar en esa pestaña. Cuando crees tu propio panel de control con pestañas, sustituye este valor por el ID del panel de control que quieras usar. Puedes encontrar el ID numérico del panel de control 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 de control sería61.
- La propiedad
Paso 4: Sustituye la referencia HelloWorld en src/App.tsx
Ve al archivo App.tsx en el directorio src. Elimina la instrucción de importación de HelloWorld:
import { HelloWorld } from './HelloWorld'
y sustitúyelo por lo siguiente:
import { Tabs } from './Tabs'
Además, en el archivo src/App.tsx, sustituya <HelloWorld/> por <Tabs/>.
También puedes eliminar el archivo HelloWorld.tsx de este directorio, ya que no lo vas a usar más.
Paso 5: Actualiza el archivo manifest.lkml con el derecho de inserción
Añade el siguiente entitlement a la sección de derechos del archivo manifest.lkml de tu proyecto de LookML:
use_embeds: yes
El archivo manifest.lkml debería tener este aspecto:
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 ir a tu extensión, que aparece en la carpeta Aplicaciones del panel de navegación de la izquierda. Si has iniciado tu servidor de desarrollo local con yarn develop, puedes ver los paneles de control insertados en 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, ve a
localhost:8080/bundle.js. - Guarda el contenido de la ventana del navegador de forma local en tu ordenador como un archivo
.js. - Asegúrate de que estás en el modo de desarrollo y, a continuación, arrastra y suelta el archivo
.jsen tu proyecto de extensión. Guarda los cambios. - En el archivo
manifest.lkml, comenta la líneaurl: "http://localhost:8080/bundle.js". - En el archivo
manifest.lkml, descomenta la línea# file: "bundle.js"y asegúrate de que el nombre del archivo coincida con el del archivo.jsque has subido a tu proyecto. Guarda los cambios. - Confirma e implementa los cambios.
Una vez implementada, ya no tendrás que iniciar tu servidor de desarrollo local para ver la extensión, y los usuarios de tu instancia de Looker deberían poder verla si acceden a ella en la carpeta Aplicaciones del panel de navegación de la izquierda.