Cómo crear un panel con pestañas con componentes de Looker

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:

Un panel de ejemplo con una interfaz con pestañas.

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:

  1. Compila una extensión básica de TypeScript.
  2. Crea el archivo src/Dashboards.tsx para conectar y almacenar paneles.
  3. Crea el archivo src/Tabs.tsx para almacenar el componente Tabs.
  4. Reemplaza la referencia de HelloWorld en src/App.tsx.
  5. Actualiza el archivo manifest.lkml con el derecho de incorporación.
  6. Publica la extensión en tu instancia de Looker.

Requisitos

Necesitarás algunos elementos antes de comenzar:

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:

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 objeto EmbedContainer que contiene un iframe del panel. Este componente es reutilizable. Puedes usarlo para cualquier panel pasando una propiedad id 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 actualizar https://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 archivo Dashboards.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 de Tab2 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 propiedades id 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 de dashboards/. Por ejemplo, si la URL es https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, el ID del panel sería 61.

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:

  1. Con el servidor de desarrollo en ejecución, navega a localhost:8080/bundle.js.
  2. Guarda el contenido de la ventana del navegador de forma local en tu computadora como un archivo .js.
  3. 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.
  4. En el archivo manifest.lkml, agrega un comentario a la línea url: "http://localhost:8080/bundle.js".
  5. 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.
  6. 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.