Cómo incorporar Looker con el Embed SDK

1. Antes de comenzar

En este codelab, usaremos el SDK de Looker Embed para incorporar un panel de Looker en tu página web. Llamarás a una serie de métodos del SDK que crearán automáticamente un iframe, incorporarán tu contenido de Looker en él y configurarán las comunicaciones entre tu iframe y tu página web.

Requisitos previos

  • Tener una instancia de Looker en ejecución
  • Tener un panel de Looker que quieras incorporar en tu aplicación web o página web
  • Tener conocimientos de JavaScript y las promesas de JavaScript

Qué aprenderás

  • Cómo incorporar de forma privada tu contenido de Looker con el SDK de Embed
  • Cómo enviar y recibir mensajes (acciones y eventos) con tu contenido de Looker integrado con el SDK de Embed

Requisitos

  • Acceso al código HTML y JavaScript de tu frontend
  • Acceso a la configuración de la incorporación de administrador en tu instancia de Looker

2. Preparaciones

Debes preparar tu instancia de HTML y Looker antes de poder realizar la incorporación con el SDK de Embed.

Agrega el elemento contenedor del iframe de incorporación

Dentro del código HTML de tu página web, crea un elemento div y define un atributo id en él.

<div id="looker-embed" />

Incluye el dominio de la incorporación en la lista de entidades permitidas de la instancia de Looker

Debes incluir el dominio de la incorporación en la lista de entidades permitidas de tu instancia de Looker.

Determina el dominio de la página web que aloja tu contenido incorporado de Looker. Supongamos que la URL de la página web es https://mywebsite.com/with/embed, entonces el dominio de la página web es https://mywebsite.com.

Navega a la página Embed en la sección Admin de tu instancia de Looker. https://your_instance.looker.com/admin/embed

En el campo Lista de dominios permitidos incorporados, ingresa el dominio de la incorporación. Después de escribirlo, presiona la tecla Tab para que el dominio aparezca en un cuadro. No incluyas una barra final /.

Selecciona el botón Actualizar.

3. Crea la incorporación

Ahora, creemos y configuremos el compilador de incorporación del SDK para "compilar" tu contenido de Looker incorporado.

Inicializa el SDK

Primero, importa y, luego, inicializa el SDK con el dominio de tu instancia de Looker.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

Crea el compilador de elementos incorporados

A continuación, determina el ID del panel de Looker que deseas incorporar. Si tu panel se encuentra en instance_name.looker.com/dashboard/12345, su ID es 12345.

Llama al método createDashboardWithId() del SDK con el ID del panel para crear un compilador de elementos incorporados. Este método devolverá el compilador de elementos incorporados.

LookerEmbedSDK.createDashboardWithId(12345)

Configura y compila el compilador de elementos incorporados

Ahora, configuremos el compilador de incorporación antes de indicarle que compile el iframe incorporado. Agrega la siguiente muestra de código directamente después de la llamada al método createDashboardWithId() de la muestra de código anterior.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Cada método del compilador de mensajes incorporados devuelve el compilador de mensajes incorporados, por lo que encadenamos las llamadas a los métodos. Veamos cada método:

  1. El método appendTo() determina el elemento principal del iframe. Pasamos el ID del elemento HTML que definimos anteriormente en el paso de preparación.
  2. El método withFrameBorder() establece el atributo frame-border en el iframe. Este es uno de los varios métodos que definen atributos HTML en el iframe.
  3. El método build() crea el iframe con los atributos HTML configurados.

Revisión final

Con los pasos anteriores, tu código debería verse de la siguiente manera:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Ahora tienes tu panel de Looker incorporado en tu página web con el SDK de Embed.

4. Enviar y recibir mensajes incorporados

Ahora veamos cómo enviar y recibir mensajes con tu contenido de Looker integrado con el SDK de Embed. Llamamos acciones a los mensajes que tu aplicación envía al iframe y eventos a los mensajes que tu aplicación recibe del iframe.

Cómo recibir eventos

Trabajemos con nuestro código anterior. Para escuchar eventos, llamamos al método on() del compilador de inserciones antes de llamar al método build().

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

Aquí llamamos al método on() para establecer un objeto de escucha de eventos en el evento dashboard:run:complete que proviene del iframe cuando se compila el iframe. El evento nos indicará cuándo termina de cargarse el panel. Consulta la referencia de eventos para conocer otros eventos que puedes escuchar.

Envío de acciones

Continuemos con nuestro código anterior. Para enviar acciones al iframe, llamamos al método connect() del compilador de incorporación después de llamar al método build() para inicializar el envío y la recepción de mensajes con el iframe.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

Veamos este ejemplo de código:

  1. Llamamos al método connect(), que devuelve una promesa. La promesa se resuelve en un objeto de incorporación que representa el iframe incorporado después de que se inicializa el mecanismo de envío y recepción de mensajes.
  2. Llamamos al método send() en el objeto de incorporación para enviar una acción dashboard:run. Consulta la referencia de acciones para conocer otras acciones que puedes enviar.
  3. Agregamos un método catch() en caso de que haya errores durante la inicialización.

Revisión final

Con los pasos anteriores, tu código debería verse de la siguiente manera:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

Ahora puedes comunicarte con tu panel de Looker integrado.

5. Información adicional

¡Felicitaciones! Ahora puedes usar el SDK de Embed para incorporar de forma privada tu panel de Looker y enviar y recibir mensajes desde el iframe. Consulta estos recursos para obtener más información: