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 iframe y tu instancia de Looker para la interacción de JavaScript
  • Cómo detectar eventos desde tu iframe
  • Cómo enviar mensajes de acción a tu iframe

Requisitos

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

2. Preparaciones

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

Agrega un atributo al iframe id

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 elemento incorporado 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, entonces el dominio de la página web es https://mywebsite.com.

Si usas Private Embedding, en el src del iframe, agrega el dominio como un parámetro de búsqueda 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 de SSO, agrega el dominio como un parámetro de consulta embed_domain a la URL de incorporación.

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

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

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

Selecciona el botón Actualizar.

3. Cómo escuchar mensajes de eventos del iframe

Tu iframe con contenido de Looker incorporado envía mensajes a su página web host. Estos mensajes de evento contienen información oportuna sobre el contenido de Looker integrado, por ejemplo, si el panel integrado comenzó a cargarse o si el usuario seleccionó la opción Descargar dentro del contenido integrado. Recibamos y analicemos 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 se trata. Todas las demás propiedades específicas del evento se definen en nuestra referencia de eventos.

Cómo recibir y analizar el evento

Agrega lo siguiente al lugar donde 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. 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 del evento y analizarlo.
  5. Activa la propiedad type del objeto de 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 de Looker incorporado.

4. Envía un mensaje de acción al iframe

Tu 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 integrado, como actualizar los filtros en tu panel integrado. Creemos un mensaje de acción que le indique a tu panel integrado 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, tu página web host puede cambiar de forma dinámica el estado de tu contenido de Looker incorporado.

5. Información adicional

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