Mensajes de iframe de Looker incorporados

1. Antes de comenzar

Debes tener contenido de Looker incorporado dentro de un iframe con incorporación privada o incorporación de SSO. En este codelab, interactuaremos con tu iframe a través de JavaScript para que tu página web sea más dinámica. Tu página web enviará y recibirá mensajes del contenido de Looker incorporado en el iframe.

Requisitos previos

Qué aprenderás

  • Cómo preparar tu instancia de iframe y Looker para la interacción de JavaScript
  • Cómo escuchar eventos de tu iframe
  • Cómo enviar mensajes de acción a tu iframe

Requisitos

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

2. Preparaciones

Debes preparar tu iframe y la instancia de Looker antes de poder interactuar con el iframe.

Agrega un atributo id al iframe.

Tendrás que validar los mensajes provenientes del iframe. Para ello, define un atributo id en el iframe:

<iframe 
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>

Agrega el dominio del iframe al atributo src del iframe.

Determina el dominio de la página web que aloja el iframe. 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.

Si usas la incorporación privada, agrega el dominio como un parámetro de consulta embed_domain en el campo src del iframe:

<iframe
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>

Si usas la incorporación al SSO, agrega el dominio como un parámetro de búsqueda embed_domain a la URL incorporada.

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

Por último, debes incluir en la lista de entidades permitidas el dominio de la incorporación en tu instancia de Looker para permitir el envío de mensajes.

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 Allowlis, ingresa el dominio del dominio incorporado. 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. Escucha mensajes de eventos desde el iframe

Tu iframe con contenido de Looker incorporado envía mensajes a la página web del host. Estos mensajes de eventos contienen información oportuna sobre el contenido incorporado de Looker, como si el panel incorporado comenzó a cargarse o si el usuario seleccionó la opción Descargar en el contenido incorporado. Vamos a recibir y analizar estos eventos.

Comprende el esquema de objetos de eventos

El esquema del objeto de evento es el siguiente:

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

El evento siempre tendrá una propiedad type que te permitirá determinar de qué evento es. Todas las demás propiedades específicas del evento se definen en nuestra referencia sobre eventos.

Recibe y analiza el evento

Agrega lo siguiente a donde el JavaScript de tu página web inicializa o administra tu iframe:

window.addEventListener("message", function(message) {
  const iframeElement = document.getElementById("looker");
  if (message.source === iframeElement.contentWindow) {
    if (message.origin === "https://instance_name.looker.com") {
      const event = JSON.parse(message.data);
      switch (event.type):
        case "dashboard:run:start":
          console.log("The embedded dashboard has started loading"); 
    }
  }
});

El fragmento de código hace lo siguiente:

  1. Detecta el evento "message" del objeto window.
  2. Verifica que la propiedad source del mensaje sea el iframe con el contenido de Looker incorporado.
  3. Verifica que la propiedad origin del mensaje sea el dominio de tu instancia de Looker.
  4. JSON analiza la propiedad data del mensaje para acceder al objeto de evento y analizarlo.
  5. Cambia la propiedad type del objeto de evento para determinar qué evento es y actuar en consecuencia.

Ahora tu página web de host puede reaccionar de forma dinámica a los eventos que emite tu contenido incorporado de Looker.

4. Enviar mensaje de acción al iframe

La página web del host también puede enviar mensajes al contenido de Looker incorporado en tu iframe. Estos mensajes de acción pueden cambiar el estado de tu contenido incorporado de Looker, como actualizar los filtros en el panel incorporado. Creemos un mensaje de acción que le indique al panel incorporado que ejecute sus consultas y envíe el mensaje a tu iframe.

Crea un mensaje de acción

Crea un mensaje de acción dentro del JavaScript de tu página web:

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

El objeto action sigue el mismo formato que el objeto event anterior. Siempre tendrá una propiedad type y, luego, propiedades específicas de la acción, que se definen en nuestra referencia de acciones. El mensaje de acción debe tener formato JSON.

Envía el mensaje de acción

Dentro del código JavaScript de tu página web, envía la acción con formato JSON a tu iframe:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Determina el iframe al que enviarás la acción.
  2. Llama al método postMessage() en la propiedad contentWindow del iframe para enviar el mensaje.

Ahora la página web de tu host puede cambiar de forma dinámica el estado de tu contenido de Looker incorporado.

5. Información adicional

¡Felicitaciones! Ahora puedes escuchar eventos del contenido incorporado de Looker en tu iframe y enviar acciones al contenido. Consulta estos recursos para obtener más información: