Mensajes de iframe de Looker incorporados

1. Antes de comenzar

Debes tener contenido de Looker incorporado en 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 iframe y tu instancia de Looker para la interacción con 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 del administrador en tu instancia de Looker

2. Preparación

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

Agrega un atributo id al iframe

Deberás validar los mensajes que provienen 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. Si la URL de la página web es https://mywebsite.com/with/embed, el dominio de la página web es https://mywebsite.com.

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

<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.

Agrega el dominio de la incorporación a la lista de entidades permitidas 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 final /.

Selecciona el botón Actualizar.

3. Escucha los mensajes de eventos del 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 del objeto de evento

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 de eventos.

Recibe y analiza el evento

Agrega esto a la ubicación en la que el código 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. Escucha el evento "message" desde el 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. Activa la propiedad type del objeto del evento para determinar qué evento es y actuar en consecuencia.

Ahora, tu página web 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 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 de Looker incorporado, como actualizar los filtros de tu panel incorporado. Crear un mensaje de acción que le indique al panel incorporado que ejecute sus consultas y envíe el mensaje a tu iframe

Cómo crear un mensaje de acción

Crea un mensaje de acción dentro del código 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 tu acción.
  2. Llama al método postMessage() en la propiedad contentWindow del iframe para enviar el mensaje.

Ahora, la página web del 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: