Acerca de este codelab
1. Antes de comenzar
En este codelab, usaremos el SDK de incorporación de Looker 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
- Tienes un panel de Looker que quieres incorporar en tu aplicación web o página web
- Familiarízate con las promesas de JavaScript y 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 incorporado con el SDK de incorporación
Requisitos
- Acceder al código HTML y JavaScript de tu código de frontend
- Acceso a la configuración de incorporación del administrador en tu instancia de Looker
2. Preparación
Debes preparar tu instancia de HTML y Looker antes de poder incorporarla con el SDK de Embed.
Agrega el elemento de contenedor del iframe incorporado
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 en la lista de entidades permitidas el dominio de la incorporación en la instancia de Looker
Debes incluir en la lista de entidades permitidas el dominio de la incorporación en tu instancia de Looker.
Determinar 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
y, luego, el dominio de la página web es https://mywebsite.com
.
Navega a la página Incorporar en la sección Administrador de tu instancia de Looker. https://your_instance.looker.com/admin/embed
En el campo Embedded Domain Allowlist, 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 diagonal /
.
Selecciona el botón Actualizar.
3. Compila la incorporación
Ahora, crearemos y configuraremos el compilador de incorporaciones del SDK para “compilar” tu contenido incorporado de Looker.
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 incorporaciones
A continuación, determina el ID del panel de Looker que deseas incorporar. Si tu panel está en instance_name.looker.com/dashboard/12345
, entonces el ID de tu panel es 12345
.
Llama al método createDashboardWithId()
del SDK con el ID del panel para crear un compilador de incorporación. Este método devolverá el compilador de incorporaciones.
LookerEmbedSDK.createDashboardWithId(12345)
Configura y compila el compilador de incorporación
Ahora, configuremos el compilador de incorporaciones 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 incorporación muestra el compilador de incorporación, por lo que encadenamos las llamadas al método. Veamos cada método:
- El método
appendTo()
determina el elemento superior del iframe. Pasamos el ID del elemento HTML que definimos anteriormente en el paso de preparación. - 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. - El método
build()
crea el iframe con los atributos HTML configurados.
Comprobació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 el panel de Looker incorporado en tu página web con el Embed SDK.
4. Cómo enviar y recibir mensajes incorporados
Ahora, veamos cómo enviar y recibir mensajes con tu contenido incorporado de Looker con el SDK de Embed. Llamamos a los mensajes que tu aplicación envía al iframe como acciones y a los mensajes que tu aplicación recibe del iframe como eventos.
Cómo recibir eventos
Trabajemos con el código anterior. Para escuchar eventos, llamamos al método on() del compilador de incorporaciones 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 evento nos indicará cuando termine de cargarse el panel. Consulta la referencia de eventos para ver otros eventos que puedes escuchar.
Acciones de envío
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!')
...
Analicemos esta muestra de código:
- Llamamos al método
connect()
, que muestra una promesa. La promesa se resuelve en un objeto insertado que representa el iframe incorporado después de que se inicializa el mecanismo de envío y recepción de mensajes. - Llamamos al método
send()
en el objeto incorporado para enviar una accióndashboard:run
. Consulta la referencia de acciones para ver otras acciones que puedes enviar. - Agregamos un método
catch()
en caso de que haya algún error durante la inicialización.
Verificació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 incorporado.
5. Información adicional
¡Felicitaciones! Ahora puedes usar el SDK de incorporación 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:
- Repositorio del SDK de incorporación para obtener más información sobre cómo incorporar Looker, especialmente si deseas incorporar SSO en el contenido de Looker.
- Referencia de eventos para todos los eventos disponibles y sus propiedades
- Referencia de acciones para todas las acciones disponibles y sus propiedades
- Prácticas recomendadas de seguridad para incorporar tu contenido de Looker