Compila un panel con pestañas con componentes de Looker

Un ejemplo simple de cómo los componentes de la interfaz de usuario pueden mejorar una aplicación incorporada es usarlos para crear navegación con pestañas para paneles:

Un panel de muestra 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 trabajar con este ejemplo, asegúrese de que su configuración cumpla con los requisitos y, luego, siga 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 derechos de incorporación.
  6. Publica la extensión en tu instancia de Looker.

Requisitos

Antes de comenzar necesitarás algunos elementos:

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 compilar una extensión. Para convertir la extensión en una extensión de TypeScript, realiza las siguientes modificaciones:

Paso 2: Crea el archivo src/Dashboards.tsx para conectar y almacenar paneles

Dentro del directorio src de la extensión nueva, 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 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 una URL de instancia, https://mycompany.looker.com. Cámbialo 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 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 objeto EmbedContainer que contiene un iframe de panel. El iframe se genera desde el SDK de Looker Embed para usar 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 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 EmbeddedDashboard2 y EmbeddedDashboard3. Una vez más, asegúrate de actualizar https://mycompany.looker.com/ a la URL de tu instancia de Looker.

  • El bloque final aplica 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 la extensión nueva, crea un archivo Tabs.tsx. Este archivo almacena el componente Tabs y hace referencia al ID del panel de Looker de cada panel.

Dentro de ese archivo, pega el siguiente código (en la sección que sigue a este 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 EmbeddedDashboard que se crearon en el archivo Dashboards.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 Tabs esté disponible para importarse a otros componentes.

    export const Tabs = () => (

  • ComponentsProvider une los componentes individuales para ayudar con los 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
   <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 id de Tab2 acepta un ID de pestaña único. Actualiza el ID según sea necesario para tu entorno.
    • El prop label acepta la etiqueta que aparecerá en cada pestaña. Actualiza el ID según corresponda para el panel que estás usando.
    • Aparecerá una cadena ubicada dentro de las etiquetas Tab2 en la parte superior del área de contenido de esa pestaña. Actualiza o quita la cadena según sea necesario.
    • Los objetos EmbeddedDashboard1, EmbeddedDashboard1 y EmbeddedDashboard1 se colocan dentro de la pestaña. Sus propiedades id aceptan el ID del panel que se incorporará a esa pestaña. Cuando crees tu propio panel con pestañas, reemplaza este valor por el ID del panel que quieras usar. Puedes encontrar el ID del panel numérico 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 de HelloWorld en src/App.tsx

Navega a tu archivo App.tsx en el directorio src. Quita la declaración de importación HelloWorld:

import { HelloWorld } from './HelloWorld'

y reemplázalo por lo siguiente:

import { Tabs } from './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 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 la extensión que aparece en la carpeta Aplicaciones del 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, publícala en tu instancia de Looker con 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 manera local en tu computadora como un archivo .js.
  3. Asegúrate de estar en modo de desarrollo y, luego, arrastra y suelta el archivo .js en tu proyecto de extensión. Guarda los cambios.
  4. En el archivo manifest.lkml, marca como comentario la línea url: "http://localhost:8080/bundle.js".
  5. 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 .js que subiste a tu proyecto. Guarda los cambios.
  6. Confirma e 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 verla si navegan en ella dentro de la carpeta Aplicaciones del panel de navegación izquierdo.