Eventos de JavaScript incorporados

Después de crear una incorporación, que se puede hacer de forma pública, privada, con incorporación firmada o a través de la API, puedes interactuar con esos iframes usando JavaScript. Puedes hacer que tu página sea más dinámica según el estado del elemento incorporado y, además, puedes realizar cambios en el elemento incorporado desde tu página web.

Ten en cuenta que Looker no controla el orden en que los navegadores envían eventos a las aplicaciones web. Esto significa que no se garantiza el orden de los eventos en todos los navegadores o plataformas. Asegúrate de escribir tu código de JavaScript de forma adecuada para tener en cuenta el control de eventos de los diferentes navegadores.

Puedes usar JavaScript de una de las siguientes maneras para el contenido incorporado de Looker:

  • Usa el kit de desarrollo de software (SDK) de incorporación de Looker, que se describe en la página de documentación del SDK de incorporación.
  • Usa eventos de JavaScript, que se describen en la sección Accede a eventos en JavaScript de esta página.

Preparación

Antes de interactuar con el iframe incorporado, sigue estos pasos:

Agrega un ID al iframe

Más adelante, cuando recuperes datos del iframe, deberás validar que la información con la que estás trabajando provenga del iframe de Looker. Para facilitar este proceso, asegúrate de agregar un ID a tu iframe, si aún no lo has hecho. En el siguiente ejemplo, se establece el ID en looker agregando id="looker" al iframe:

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

Agrega el dominio de incorporación al atributo src del iframe

En el atributo src del iframe, incluye el dominio en el que se usa el iframe. En el siguiente ejemplo, puedes especificar myownpersonaldomain.com como el dominio agregando ?embed_domain=https://myownpersonaldomain.com" al final de la URL en el atributo src:

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

Si usas la incorporación firmada, asegúrate de agregar el embed_domain a la URL de incorporación.

Si usas el SDK de incorporación, agrega sdk=3 al final de la URL de incorporación. El parámetro sdk=3 indica que el SDK está presente y que Looker puede aprovechar las funciones adicionales que proporciona el SDK, como pasar eventos de JavaScript entre el iframe de Looker y tu dominio. El SDK no puede agregar este parámetro por sí mismo porque forma parte de la URL firmada. Por ejemplo:

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com&sdk=2">
</iframe>

Agrega el dominio de incorporación a la lista de entidades permitidas

Por último, deberás agregar el dominio en el que se usa el iframe a la lista de entidades permitidas en la página Incorporar del panel Administrador de Looker. Para ello, sigue estos pasos:

  1. En el campo Lista de entidades permitidas de dominios incorporados, ingresa el dominio en el que se usa el iframe y, luego, presiona la tecla Tab para que el dominio aparezca en un cuadro dentro del campo.

  2. Haz clic en Actualizar.

Puedes usar el comodín * en la lista de entidades permitidas para crear un patrón de dominio. Por ejemplo, https://*.myownpersonaldomain.com permitiría https://analytics.myownpersonaldomain.com y https://data.myownpersonaldomain.com.

Si usas la incorporación sin cookies con Looker 23.8 o una versión posterior, el dominio de incorporación se puede especificar cuando se adquiere la sesión sin cookies. Esta es una alternativa para agregar el dominio de incorporación a la lista de entidades permitidas con el panel Administrador > Incorporación. Revisa las prácticas recomendadas de seguridad si decides aprovechar esta función.

Recupera datos del iframe

Después de completar los pasos de preparación, puedes acceder a los eventos que se pasan entre el iframe de Looker y tu dominio escuchando los eventos postMessage.

El iframe incorporado puede crear algunos tipos de eventos, como se describe en la sección Referencia de tipos de eventos de esta página.

Cómo acceder a eventos en JavaScript

Este es un ejemplo de cómo escuchar estos eventos en JavaScript y, luego, registrarlos en la consola:

window.addEventListener("message", function(event) {
  if (event.source === document.getElementById("looker").contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

A continuación, se muestra un ejemplo de cómo escuchar estos eventos en jQuery y, luego, registrarlos en la consola:

$(window).on("message", function(event) {
  if (event.originalEvent.source === $("#looker")[0].contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

Tabla de resumen de tipos de eventos

En la siguiente tabla, se resumen los tipos de eventos. Selecciona un tipo de evento para ver los detalles correspondientes.

Tipo de evento Causa del evento
dashboard:loaded En los paneles en los que los mosaicos no están configurados para ejecutarse automáticamente, se cargan el panel y sus elementos, pero las consultas aún no se ejecutan.
dashboard:run:start Se comenzó a cargar un panel, y sus tarjetas comenzaron a cargarse y a consultar datos.
dashboard:run:complete Un panel terminó de ejecutarse y todos los mosaicos terminaron de cargarse y realizar consultas.
dashboard:download Se comenzó a descargar un PDF de un panel.
dashboard:edit:start Se agregó la versión 22.20 Se cambió un panel al modo de edición. El evento dashboard:save:complete se activará cuando el panel se guarde correctamente.
dashboard:edit:cancel Se agregó la versión 22.20 Se salió del modo de edición de un panel sin guardar los cambios.
dashboard:save:complete Se editó y guardó un panel.
dashboard:delete:complete Se borró un panel.
dashboard:tile:start Una tarjeta comenzó a cargar o consultar datos.
dashboard:tile:complete Una tarjeta terminó de ejecutar la consulta.
dashboard:tile:download Se comenzó a descargar los datos de una tarjeta.
dashboard:tile:explore Un usuario hizo clic en la opción Explorar desde aquí en una tarjeta del panel.
dashboard:tile:merge Se agregó en la versión 25.14 Un usuario hizo clic en el botón o elemento de menú Editar consulta combinada.
dashboard:tile:view Un usuario hizo clic en la opción Ver Look original en una tarjeta del panel.
dashboard:filters:changed Se aplicaron o cambiaron los filtros de un panel.
look:ready Se comenzó a cargar datos de consulta de una vista, independientemente de si se ejecutará la consulta o no.
look:run:start Un informe de Looker Studio comenzó a cargar datos de consulta y la consulta comenzó a ejecutarse.
look:run:complete Un informe de Looker Studio terminó de ejecutar la consulta.
look:edit:start Se agregó la versión 25.10 Se cambió un estilo al modo de edición. El evento look:save:complete se activará cuando se guarde el estilo.
look:edit:cancel Se agregó la versión 25.10 Se salió del modo de edición de una vista sin guardar los cambios.
look:save:complete Se editó y guardó una vista.
look:delete:complete Se movió una vista a la carpeta Papelera.
drillmenu:click Un usuario hizo clic en un menú de desglose en un panel que se creó con el parámetro de LookML link.
drillmodal:download Un usuario abrió un diálogo de desglose desde una tarjeta del panel y hizo clic en la opción Descargar.
drillmodal:explore Un usuario hizo clic en la opción Explorar desde aquí en un diálogo de desglose.
explore:ready Una exploración comenzó a cargar datos de consulta, independientemente de si se ejecutará o no.
explore:run:start Una exploración comenzó a cargar datos de consulta y la consulta comenzó a ejecutarse.
explore:run:complete Una exploración terminó de ejecutar la consulta.
explore:state:changed La URL de una página de Explorar cambió como resultado de las acciones del usuario.
merge:ready Una consulta de combinación terminó de cargar los datos de la consulta inicial.
merge:run:start Se comenzó a ejecutar una consulta de combinación.
merge:run:complete Una consulta de combinación terminó de ejecutar la consulta.
merge:run:fail No se pudo ejecutar una consulta de combinación y se devolvió un error.
page:changed Un usuario navegó a una página nueva dentro del iframe.
page:properties:changed Cambió la altura de un iframe del panel.
session:tokens El cliente de Looker requiere tokens para continuar.
session:expired Se agregó en la versión 25.10 La sesión del usuario venció.
session:status Envía información sobre el estado de una sesión.
env:client:dialog Se abrió un diálogo que puede estar parcialmente fuera de la vista, como un diálogo de desglose. Este evento permite que la aplicación alojada desplace el diálogo para que se vea.

Referencia de tipo de evento

El iframe incorporado puede crear muchos tipos de eventos diferentes:

dashboard:loaded

En los paneles en los que las tarjetas no están configuradas para ejecutarse automáticamente, este evento se crea después de que se cargan un panel y sus elementos, pero antes de que se ejecuten las consultas.


type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  canEdit: true,
  dashboard_filters: {
    "date": "Last 6 Years",
    "state": ""
  },
  absoluteUrl: "https://self-signed.looker.com:9999/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  url: "/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Atributo Formato Descripción
status String Indica si el panel y sus elementos se cargaron correctamente.
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.options Objeto Las propiedades y los valores de diseño del panel, componente de diseño del panel y elemento del panel. A todas las propiedades que se devuelven en el objeto options se les pueden asignar valores actualizados con el evento dashboard:options:set.

dashboard:run:start

Este evento se crea cuando un panel comienza a cargarse, cuando sus tarjetas comienzan a cargarse y a consultar datos.

type: "dashboard:run:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:run:complete

Este evento se crea cuando un panel terminó de ejecutarse y todas las tarjetas terminaron de cargarse y realizar consultas. Este evento se crea independientemente de si todas las tarjetas se cargan correctamente o no.

type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://my.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Atributo Formato Descripción
status String Indica si el panel y sus elementos se ejecutaron correctamente. Si el panel y sus elementos se ejecutaron correctamente, status devuelve "complete"; de lo contrario, status devuelve "error". Si se detuvo el panel en ejecución, ya sea desde la interfaz de usuario o con la acción dashboard:stop, status devolverá "stopped".
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options Objeto Las propiedades y los valores de diseño del panel, componente de diseño del panel y elemento del panel. A todas las propiedades que se devuelven en el objeto options se les pueden asignar valores actualizados con la acción dashboard:options:set.
dashboard.tileStatuses Array de objetos Es un array de objetos que proporcionan estados de tarjetas. Las propiedades del objeto son las siguientes:

  • tileId: Es el número de ID de la tarjeta.
  • status: Si la consulta de mosaicos se ejecutó correctamente, status devuelve "complete"; de lo contrario, status devuelve "error".
  • errors: Se propaga cuando la propiedad status es "error". Es un array de objetos que proporcionan detalles del error, incluido el texto del mensaje de error, una descripción más detallada del error y la consulta en SQL de la tarjeta que produjo el error.

dashboard:download

Este evento se crea cuando se inicia la descarga de un PDF de un panel.

type: "dashboard:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
fileFormat: "pdf"
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
fileFormat String Es el formato del panel descargado (solo "pdf" en este momento).

dashboard:edit:start

Se agregó en la versión 22.20 Este evento se crea cuando un panel cambia al modo de edición.

type: "dashboard:edit:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:edit:cancel

Se agregó la versión 22.20 Este evento se crea cuando se sale del modo de edición de un panel sin guardar los cambios.

type: "dashboard:edit:cancel",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:save:complete

Este evento se crea cuando se edita y, luego, se guarda un panel.

type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.options Objeto Las propiedades y los valores de diseño del panel, componente de diseño del panel y elemento del panel. A todas las propiedades que se devuelven en el objeto options se les pueden asignar valores actualizados con el evento dashboard:options:set.

dashboard:delete:complete

Este evento se crea cuando se borra un panel.

type: "dashboard:delete:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.options Objeto Las propiedades y los valores de diseño del panel, componente de diseño del panel y elemento del panel. A todas las propiedades que se devuelven en el objeto options se les pueden asignar valores actualizados con el evento dashboard:options:set.

dashboard:tile:start

Este evento se crea cuando una tarjeta comienza a cargar o consultar datos.

type: "dashboard:tile:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel al que pertenece la tarjeta.
dashboard.title String Es el título del panel, como se muestra en la parte superior del panel al que pertenece la tarjeta.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso) al que pertenece la tarjeta.
dashboard.absoluteUrl String Es la URL completa del panel al que pertenece la tarjeta.
dashboard.dashboard_filters Objeto Son los filtros aplicados al panel al que pertenece la tarjeta. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Número entero El número de ID del evento, no el título.
tile.title String Es el título de la tarjeta, como se muestra en la parte superior de la tarjeta.
tile.listen Objeto Son los filtros globales del panel que escucha esta tarjeta. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...}

dashboard:tile:complete

Este evento se crea cuando una tarjeta termina de ejecutar la consulta.

type: "dashboard:tile:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
status: "complete",
truncated: false,
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel al que pertenece la tarjeta.
dashboard.title String Es el título del panel, como se muestra en la parte superior del panel al que pertenece la tarjeta.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso) al que pertenece la tarjeta.
dashboard.absoluteUrl String Es la URL completa del panel al que pertenece la tarjeta.
dashboard.dashboard_filters Objeto Son los filtros aplicados al panel al que pertenece la tarjeta. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
status String Indica si la consulta de mosaicos se completó correctamente. Los valores posibles son "complete" o "error".
truncated Booleano Indica si los resultados de la consulta de tarjetas se truncaron porque la consulta devolvió más filas que el límite de filas de la consulta. El límite de filas puede ser un límite de filas especificado por el usuario o el límite de filas predeterminado de Looker de 5,000.
tile.id Número entero El número de ID del evento, no el título.
tile.title String Es el título de la tarjeta, como se muestra en la parte superior de la tarjeta.
tile.listen Objeto Son los filtros globales del panel que escucha esta tarjeta. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...}
tile.errors Array de objetos Se propaga cuando la propiedad status es "error". Es un array de objetos que proporcionan detalles del error, incluido el texto del mensaje de error, una descripción más detallada del error y la consulta en SQL de la tarjeta que produjo el error.

dashboard:tile:download

Este evento se crea cuando se inicia la descarga de los datos de una tarjeta.

type: "dashboard:tile:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales"
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
fileFormat: "pdf"
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel al que pertenece la tarjeta.
dashboard.title String Es el título del panel, como se muestra en la parte superior del panel al que pertenece la tarjeta.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso) al que pertenece la tarjeta.
dashboard.absoluteUrl String Es la URL completa del panel al que pertenece la tarjeta.
dashboard.dashboard_filters Objeto Son los filtros aplicados al panel al que pertenece la tarjeta. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Número entero El número de ID del evento, no el título.
tile.title String Es el título de la tarjeta, como se muestra en la parte superior de la tarjeta.
tile.listen Objeto Son los filtros globales del panel que escucha esta tarjeta. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...}
fileFormat String Es el formato de la tarjeta descargada (solo "pdf" en este momento).

dashboard:tile:explore

Este evento se crea cuando un usuario hace clic en la opción Explorar desde aquí en una tarjeta del panel.

Este evento se puede cancelar, lo que significa que la aplicación de incorporación puede devolver {cancel: true} y Looker no continuará con el evento de activación.

type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
Atributo Formato Descripción
label String Es la etiqueta del botón.
url String Es la URL relativa (solo la ruta de acceso) de la exploración que se verá.
dashboard.id Número/Cadena Es el ID del panel al que pertenece la tarjeta.
dashboard.title String Es el título del panel, como se muestra en la parte superior del panel al que pertenece la tarjeta.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso) al que pertenece la tarjeta.
dashboard.absoluteUrl String Es la URL completa del panel al que pertenece la tarjeta.
dashboard.dashboard_filters Objeto Son los filtros aplicados al panel al que pertenece la tarjeta. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Número entero El número de ID del evento, no el título.
tile.title String Es el título de la tarjeta, como se muestra en la parte superior de la tarjeta.
tile.listen Objeto Son los filtros globales del panel que escucha esta tarjeta. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...}

dashboard:tile:view

Este evento se crea cuando un usuario hace clic en la opción Ver vista original en una tarjeta del panel.

Este evento se puede cancelar, lo que significa que la aplicación de incorporación puede devolver {cancel: true} y Looker no continuará con el evento de activación.

type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
Atributo Formato Descripción
label String Es la etiqueta del botón.
url String Es la URL relativa (solo la ruta de acceso) de la vista que se verá.
dashboard.id Número/Cadena Es el ID del panel al que pertenece la tarjeta.
dashboard.title String Es el título del panel, como se muestra en la parte superior del panel al que pertenece la tarjeta.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso) al que pertenece la tarjeta.
dashboard.absoluteUrl String Es la URL completa del panel al que pertenece la tarjeta.
dashboard.dashboard_filters Objeto Son los filtros aplicados al panel al que pertenece la tarjeta. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id Número entero El número de ID del evento, no el título.
tile.title String Es el título de la tarjeta, como se muestra en la parte superior de la tarjeta.
tile.listen Objeto Son los filtros globales del panel que escucha esta tarjeta. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...}

dashboard:tile:merge

Se agregó la versión 25.14 Este evento se genera cuando el usuario hace clic en el botón Editar consulta combinada o en el elemento de menú Editar consulta combinada. El comportamiento predeterminado de este botón es abrir una nueva ventana de nivel superior que permite editar la consulta de combinación.

Este evento se puede cancelar, lo que significa que la aplicación de incorporación puede devolver {cancel: true} y Looker no continuará con el evento de activación. Este evento permite que la aplicación de incorporación abra la edición del editor de consultas de combinación en un iframe en lugar de una ventana de nivel superior. La aplicación de incorporación no debe intentar cargar la URL en el iframe que activó el evento. En su lugar, se debe crear un iframe nuevo.

javascript type: dashboard:tile:merge, label: 'Edit Merged Query', dashboard_id: '13', dashboard_modified: false, tile_id: '218', tile_title: 'Untitled', url: '/embed/merge/edit?did=218&dbnx=1', absoluteUrl: 'https://.../embed/merge/edit?did=218&dbnx=1', target: '_blank',
Atributo Formato Descripción
label cadena Es la etiqueta del botón.
dashboard_id cadena Es el ID del panel al que pertenece la tarjeta de consulta combinada.
dashboard_modified booleano Cuando es true, este atributo indica que se modificó el panel. Las actualizaciones del panel se pueden perder si se continúa con la edición de la consulta de combinación. La aplicación de incorporación puede cancelar la edición del editor de consultas de combinación o advertir al usuario que es posible que tenga cambios sin guardar si continúa.
tile_id cadena Es el ID del mosaico de la consulta combinada.
tile_title cadena Es el título de la tarjeta.
url cadena Es la URL de la consulta combinada. Este atributo se puede usar con el SDK de incorporación para crear un iframe nuevo para la consulta combinada.
absoluteUrl cadena Es la URL completa de la consulta combinada. Este atributo se puede usar como el src del elemento iframe. Se requerirán atributos adicionales.
target cadena Es el ID que se usará para el nombre de la ventana que se abrirá.

dashboard:filters:changed

Este evento se crea cuando se aplican o cambian los filtros de un panel.

type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel.
dashboard.title String El título, como se muestra en la parte superior del panel.
dashboard.canEdit Booleano Se agregó la versión 22.20 Cuando se establece en true, el usuario puede editar el panel.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso).
dashboard.absoluteUrl String Es la URL completa del panel.
dashboard.dashboard_filters Objeto Son los filtros que se aplican al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options Objeto Las propiedades y los valores de diseño del panel, componente de diseño del panel y elemento del panel. A todas las propiedades que se devuelven en el objeto options se les pueden asignar valores actualizados con el evento dashboard:options:set.

look:ready

Este evento se crea cuando una vista comienza a cargar datos de consulta, independientemente de si se ejecuta o no.

type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
Atributo Formato Descripción
look.url String La URL relativa de la vista (solo la ruta de acceso)
look.absoluteUrl String La URL completa de la vista

look:run:start

Este evento se crea cuando una vista comienza a cargar datos de consulta y la consulta comienza a ejecutarse.

type: "look:run:start",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
Atributo Formato Descripción
look.url String La URL relativa de la vista (solo la ruta de acceso)
look.absoluteUrl String La URL completa de la vista

look:run:complete

Este evento se crea cuando un diseño terminó de ejecutar la consulta.

type: look:run:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
Atributo Formato Descripción
look.url String La URL relativa de la vista (solo la ruta de acceso)
look.absoluteUrl String La URL completa de la vista

look:edit:start

Se agregó en la versión 25.10 Este evento se activa cuando un Look se cambia al modo de edición.

type: "look:edit:start",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
Atributo Formato Descripción
look.id String Es el ID de la vista.
look.title String Es el título de la vista.
url String Es la URL relativa de la vista (solo la ruta de acceso).
absoluteUrl String Es la URL completa de la vista.

look:edit:cancel

Se agregó en la versión 25.10 Este evento se activa cuando se sale del modo de edición de una vista que está en ese modo sin guardar los cambios.

type: "look:edit:cancel",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
Atributo Formato Descripción
look.id String Es el ID de la vista.
look.title String Es el título de la vista.
url String Es la URL relativa de la vista (solo la ruta de acceso).
absoluteUrl String Es la URL completa de la vista.

look:save:complete

Este evento se crea cuando se edita y se guarda una vista. Este evento se crea cuando un usuario realiza una de las siguientes tareas:

Este evento no se crea si la vista se guarda con la opción de menú Guardar > En un panel existente o Editar configuración.

type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  folderid: 123
  }
Atributo Formato Descripción
look.url String La URL relativa de la vista (solo la ruta de acceso)
look.absoluteUrl String La URL completa de la vista
look.folderid Número entero Es el ID de la carpeta en la que se almacena la vista.

look:delete:complete

Este evento se crea cuando se mueve una vista a la carpeta Papelera.

type: look:delete:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
Atributo Formato Descripción
look.url String La URL relativa de la vista (solo la ruta de acceso)
look.absoluteUrl String La URL completa de la vista

drillmenu:click

Este evento se crea cuando un usuario hace clic en un menú de desglose en un panel creado con el parámetro de LookML link. Por ejemplo, el siguiente código de LookML crea un menú de desglose en el que un usuario puede ver los datos filtrados por la dimensión state:


dimension: state {
  type: string
  sql: ${TABLE}.state ;;
  link: {
    label: "Filter by {{ state | encode_uri }}"
    url: "filter::q={{ state | encode_uri }}"
    icon_url: "https://google.com/favicon.ico"
  }
}

Cuando el filtro state se establece en Illinois, el evento drillmenu:click devuelve lo siguiente al host del iframe:

type: "drillmenu:click",
label: "Filter by Illinois",
link_type: "url",
modal: false,
target: '_self',
url: "#filter::state=Illinois"
context: ' '

Este evento se puede cancelar, lo que significa que la aplicación de incorporación puede devolver {cancel: true} y Looker no continuará con el evento de activación.

Atributo Formato Descripción
label String La etiqueta del vínculo como se muestra en el menú de desglose
link_type String El tipo de objeto en el destino del vínculo
modal Booleano Indica si se usará el diálogo de desglose en lugar de la navegación del navegador
target String Es _self si el destino del vínculo reemplazará el iframe actual, o _blank si el destino del vínculo abrirá una ventana nueva.
url String La URL del destino del vínculo
context String Es un atributo interno que usan algunos tipos de visualizaciones.

Si se aplica la zona de pruebas al iframe, se evitará que los clics en el menú de desglose se abran en una ventana nueva. Usa estos valores de zona de pruebas dentro de la etiqueta iframe:

sandbox = "allow-same-origin allow-scripts"

drillmodal:download

Este evento se crea cuando un usuario abre un diálogo de desglose desde una tarjeta del panel y hace clic en la opción Descargar.

{
type: "drillmodal:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/…",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/…",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
drillExploreUrl: "/embed...",
fileFormat: "pdf"
}
Atributo Formato Descripción
dashboard.id Número/Cadena Es el ID del panel al que pertenece la tarjeta.
dashboard.title String Es el título del panel, como se muestra en la parte superior del panel al que pertenece la tarjeta.
dashboard.url String Es la URL relativa del panel (solo la ruta de acceso) al que pertenece la tarjeta.
dashboard.absoluteUrl String Es la URL completa del panel al que pertenece la tarjeta.
dashboard.dashboard_filters Objeto Son los filtros aplicados al panel al que pertenece la tarjeta. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
drillExploreUrl String Es la URL de exploración relativa (solo la ruta de acceso) que se descargará.
fileFormat String Es el formato de archivo de la descarga de datos.

drillmodal:explore

Este evento se crea cuando un usuario hace clic en la opción Explorar desde aquí en un diálogo de desglose.

Este evento se puede cancelar, lo que significa que la aplicación de incorporación puede devolver {cancel: true} y Looker no continuará con el evento de activación.

type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."
Atributo Formato Descripción
label String La etiqueta del botón como se muestra en el menú de desglose
url String La URL de Explorar relativa (solo la ruta de acceso) que se verá

explore:ready

Este evento se crea cuando una exploración comienza a cargar datos de consulta, independientemente de si la consulta se ejecuta o no.

type: "explore:ready",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
Atributo Formato Descripción
explore.url String La URL de exploración relativa (solo la ruta de acceso)
explore.absoluteUrl String La URL completa de Explorar

explore:run:start

Este evento se crea cuando una exploración comienza a cargar datos de consulta y la consulta comienza a ejecutarse.

type: "explore:run:start",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
Atributo Formato Descripción
explore.url String La URL de exploración relativa (solo la ruta de acceso)
explore.absoluteUrl String La URL completa de Explorar

explore:run:complete

Este evento se crea cuando una exploración termina de ejecutar la consulta.

type: "explore:run:complete",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
Atributo Formato Descripción
explore.url String La URL de exploración relativa (solo la ruta de acceso)
explore.absoluteUrl String La URL completa de Explorar

explore:state:changed

Este evento se crea cuando cambia la URL de una página de Explorar como resultado de las acciones del usuario.

type: "explore:state:changed",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}
Atributo Formato Descripción
explore.url String La URL de exploración relativa (solo la ruta de acceso)
explore.absoluteUrl String La URL completa de Explorar

merge:ready

Este evento se crea cuando una consulta de combinación termina de cargar los datos de la consulta inicial.

{
  type: "merge:ready",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
Atributo Formato Descripción
mergeQuery.id String Es el ID de la consulta de combinación.
mergeQuery.client_id String Es el ID de cliente de la consulta de combinación.

merge:run:start

Este evento se crea cuando comienza a ejecutarse una consulta de combinación.

{
  type: "merge:run:start",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
Atributo Formato Descripción
mergeQuery.id String Es el ID de la consulta de combinación.
mergeQuery.client_id String Es el ID de cliente de la consulta de combinación.

merge:run:complete

Este evento se crea cuando una consulta de combinación termina de ejecutarse.

{
  type: "merge:run:complete",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  }
}
Atributo Formato Descripción
mergeQuery.id String Es el ID de la consulta de combinación.
mergeQuery.client_id String Es el ID de cliente de la consulta de combinación.

merge:run:fail

Este evento se crea cuando una consulta de combinación no se ejecuta y devuelve un error.

{
  type: "merge:run:fail",
  mergeQuery: {
    id: "123",
    client_id: "abc"
  },
  error: "Execution timeout"
}
Atributo Formato Descripción
mergeQuery.id String Es el ID de la consulta de combinación.
mergeQuery.client_id String Es el ID de cliente de la consulta de combinación.
error String Es el mensaje de error que se devuelve cuando no se puede ejecutar la consulta de combinación.

page:changed

Este evento se crea cuando un usuario navega a una página nueva dentro del iframe.

type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}
Atributo Formato Descripción
page.type String Es el tipo de página a la que se acaba de navegar, como "dashboard", "look" o "explore".
page.url String Es la URL relativa (solo la ruta de acceso) de la página a la que se acaba de navegar.
page.absoluteUrl String Es la URL completa de la página a la que se acaba de navegar.

page:properties:changed

Este evento se crea cuando cambia la altura de un iframe del panel. No está disponible para vistas ni exploraciones, ya que esos elementos ajustan automáticamente su altura al tamaño del iframe.

type: "page:properties:changed",
height: 1000
Atributo Formato Descripción
height Número entero Es la altura del iframe del panel en píxeles.

session:tokens

Este evento indica que el cliente de Looker requiere tokens para continuar. Este evento se crea inmediatamente después de la creación del iframe y, luego, de forma periódica durante la sesión.

{
  "type": "session:tokens",
  "api_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoiYXBpX3Rva2VuIiwicmFuZG9taXplciI6IkxjYnpOeDNTVjNOb3o3UVlqTVJjNmhlMkdodjh1a2UwWUhiZWNRMHVCYm1KIn0.CBv1__QGc_H7bKNe31SHMMQCsc5ya1xOiEv1UDWAyxM",
  "api_token_ttl": 463,
  "navigation_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoibmF2aWdhdGlvbl90b2tlbiIsInJhbmRvbWl6ZXIiOiJHVVNlc00tdTRPRDlNdktodFJDU2pEcVFhUkJNeTh5dm42Q1FDUXhuLTNxMiJ9.sWo7LUEI5LeragVmeDamUR7u2myXpFJ0aqK_IIALUqI",
  "navigation_token_ttl": 463,
  "session_reference_token_ttl": 2924
}
Atributo Formato Descripción
authentication_token String Es el token de autenticación. Se incluye cuando se crea el iframe. No se incluye con una respuesta a una solicitud para generar tokens o si la sesión venció.
authentication_token_ttl Número Es el tiempo de actividad del token de autenticación en segundos. Se incluye cuando se crea el iframe. No se incluye con una respuesta a una solicitud para generar tokens o si la sesión venció.
api_token String Token de API. No se incluye si la sesión venció.
api_token_ttl Número Es el tiempo de actividad del token de la API en segundos. No se incluye si la sesión venció.
navigation_token String Es el token de navegación. No se incluye si la sesión venció.
navigation_token_ttl Número Es el tiempo de actividad del token de navegación en segundos. No se incluye si la sesión venció.
session_references_token_ttl Número Tiempo de actividad de la sesión en segundos. El valor será 0 cuando la sesión haya vencido. Para recuperarse, la aplicación de incorporación debe adquirir una sesión nueva.

session:expired

Se agregó la versión 25.10 Este evento se activa cuando vence la sesión del usuario de incorporación.

type: "session:expired",

Este evento no tiene una carga útil.

session:status

El evento se genera cuando la aplicación de Looker incorporada controla las solicitudes de tokens de sesión.

{
  "type": "session:status",
  "session_ttl": 0,
  "expired": true,
  "interrupted": false
}
Atributo Formato Descripción
session_ttl Número Tiempo de actividad de la sesión en segundos.
expired Booleano Cuando es true, indica que la sesión venció.
interrupted Booleano Cuando es true, indica que no se respondió una solicitud de tokens de sesión. Esto podría indicar que un servidor no está disponible temporalmente.
recoverable Booleano Solo se completa cuando el valor de interrumpido es true. Indica si la sesión se puede recuperar o no. Un valor de false probablemente signifique que hay un problema con la aplicación de incorporación.

env:client:dialog

El evento se genera cuando se abre un diálogo que puede estar parcialmente fuera de la vista, como un diálogo de desglose. Este evento permite que la aplicación alojada desplace el diálogo a la vista con la acción env:host:scroll.

{
  type: "env:client:dialog",
  dialogType: 'drilling',
  placement: 'cover',
  open: true
}
Atributo Formato Descripción
type String env:client:dialog indica que se abrió o cerró un diálogo. Solo se admite el diálogo de simulacro, pero es posible que se agreguen otros diálogos en el futuro. Es posible que la parte superior del diálogo de desglose no esté visible, ya que el diálogo cubre el viewport del iframe. Este evento permite que la aplicación alojada desplace la parte superior del diálogo para que se vea.
dialogType String Es el tipo de diálogo. Solo la apertura o el cierre del tipo de diálogo "drilling" activa este evento.
placement String La ubicación del diálogo. Los diálogos de tipo "drilling" siempre usan un placement de "cover".
open Booleano Indica si se abrió el diálogo o si se desplazó por él.

Cómo realizar cambios en el iframe

Después de preparar tu iframe para la recuperación de datos, puedes realizar cambios en él con los siguientes pasos:

  1. Escribe tu solicitud en JSON.
  2. Publica la solicitud en el contentWindow del iframe.

Escribe tu solicitud en JSON

Puedes realizar varios cambios en el iframe, que enviarás en formato JSON. Las opciones disponibles se describen en la sección Referencia de acciones de esta página. No olvides usar JSON.stringify para convertir tu acción en JSON, de la siguiente manera:

var my_request = JSON.stringify(
  {
    type: "dashboard:run"
  }
);

Publicar la solicitud en la propiedad contentWindow del iframe

Por último, publica tu mensaje en el contentWindow del iframe, de la siguiente manera:

var my_iframe = document.getElementById("my_iframe_id");

my_iframe.contentWindow.postMessage(my_request, 'https://instance_name.looker.com');

Tabla de resumen de acciones

En la siguiente tabla, se resumen las acciones. Selecciona una acción para ver los detalles correspondientes.

Acción Descripción de la acción
page:load Carga una página nueva en el iframe y reemplaza la existente.
dashboard:load Carga un panel nuevo en el iframe y reemplaza un panel existente.
dashboard:run Ejecuta el panel en el iframe.
dashboard:edit Se agregó en la versión 22.20 Cambia el panel al modo de edición.
dashboard:filters:update Actualiza un filtro de panel existente en el iframe.
dashboard:options:set Escribe valores nuevos en las propiedades del diseño y del elemento del panel.
dashboard:schedule_modal:open Abre el programador, que permite a los usuarios enviar contenido de Looker a varios destinos.
dashboard:stop Detiene un panel que se está ejecutando o que está volviendo a cargar datos.
look:run Ejecuta la vista en el iframe.
look:filters:update Actualiza un filtro de Look existente en el iframe.
explore:run Ejecuta la exploración en el iframe.
explore:filters:update Actualiza o quita un filtro de exploración existente en el iframe.
merge:run Ejecuta la consulta de combinación en el iframe.
session:tokens:request Envía tokens en respuesta a un evento session:tokens:request.
env:host:scroll Envía información sobre la posición de desplazamiento actual del iframe del host a la aplicación de Looker incorporada.

Referencia de acciones

Estas son las acciones disponibles que puedes publicar en el iframe incorporado:

page:load

Usa esta acción para navegar a contenido nuevo dentro del iframe y reemplazar el contenido existente. Esta acción es similar a la acción dashboard:load, pero es más flexible, ya que se pueden especificar parámetros adicionales en la URL.

Existen diferencias en el comportamiento que se deben tener en cuenta antes de usar page:load. dashboard:load impedirá que se realice la navegación si se está editando el panel actual. page:load no impide que se produzca la navegación. La aplicación alojada puede determinar si se está editando un panel o una vista realizando un seguimiento de dashboard:edit:start, look:edit:start y sus eventos de finalización de edición correspondientes. Por este motivo, te recomendamos que uses el SDK de incorporación. El SDK de incorporación hace un seguimiento de si se está editando un panel o una vista, por lo que se puede consultar la conexión para ver si se está editando el contenido antes de la navegación.

{
    type: 'page:load',
    url: '/embed/dashboard/32?state=california,
    pushHistory: false
}
Atributo Formato Descripción
type String El uso del tipo page:load indica que deseas cargar contenido nuevo en el iframe.
url String Es la URL del contenido que se cargará.
pushHistory Booleano Si es true, el contenido cargado crea una nueva entrada en el historial de navegación, y el usuario puede usar el botón Atrás del navegador para volver al contenido anterior. Si es false, se reemplaza el contenido actual y no se puede usar la navegación del navegador para volver a él.

dashboard:load

Usa esta acción para cargar un panel nuevo en el iframe y reemplazar un panel existente. El panel nuevo comenzará a ejecutar consultas como si se hubiera abierto una página de panel nueva.

{
  type: "dashboard:load",
  id: "101",
  pushHistory: false
}
Atributo Formato Descripción
type String El uso del tipo dashboard:load indica que deseas cargar un panel nuevo en el iframe.
id String Es el ID del panel que se cargará.
pushHistory Booleano Si es true, el panel que se carga crea una nueva entrada en el historial de navegación, y el usuario puede usar el botón Atrás del navegador para volver al panel anterior. Si es false, se reemplaza el panel actual y no se puede usar la navegación del navegador para volver a él.

dashboard:run

Usa esta acción para ejecutar el panel en el iframe. Esta es la misma acción que presionar el botón Ejecutar o Volver a cargar datos en el panel.

{
  type: "dashboard:run"
}
Atributo Formato Descripción
type String El uso del tipo dashboard:run indica que deseas ejecutar el panel.

dashboard:edit

Se agregó en la versión 22.20 Usa esta acción para cambiar un panel existente en el iframe al modo de edición. Esta es la misma acción que seleccionar Editar panel en el menú del panel.

{
  type: "dashboard:edit"
}
Atributo Formato Descripción
type String Si usas el tipo dashboard:edit, indicas que quieres cambiar el panel al modo de edición.

dashboard:filters:update

Usa esta acción para actualizar un filtro de panel existente en el iframe. No puedes agregar un filtro nuevo al panel con este método.

{
  type: "dashboard:filters:update",
  filters: {
    "Sale date": "Last 28 days",
    "Sale amount": "Greater than 100"
  }
}
Atributo Formato Descripción
type String Usar el tipo dashboard:filters:update indica que quieres actualizar los filtros que usa el panel.
filters Objeto Son los filtros nuevos que quieres aplicar al panel. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:options:set

Esta acción está disponible después de que se produce el evento dashboard:run:complete.

El incorporador crea el mensaje y lo envía al iframe, pero el panel no responde hasta que se produce dashboard:run:complete. La acción dashboard:options:set escribe valores nuevos en las propiedades del diseño y del elemento del panel. Solo se pueden actualizar con dashboard:options:set las propiedades que se devolvieron en el atributo options del evento dashboard:run:complete. Se ignoran las propiedades establecidas que no se hayan devuelto anteriormente con el atributo options del evento dashboard:run:complete.

{
  type: "dashboard:options:set",
  layouts: [
    {
      id: 1,
      dashboard_id: 1,
      type: "newspaper",
      active: true,
      column_width: null,
      width: null,
      deleted: false,
      dashboard_layout_components: [
        {
          id: 1,
          dashboard_layout_id: 1,
          dashboard_element_id: 1,
          row: 0,
          column: 0,
          width: 8,
          height: 4,
          deleted: false
        },
        {
          id: 2,
          dashboard_layout_id: 1,
          dashboard_element_id: 2,
          row: 0,
          column: 8,
          width: 8,
          height: 4,
          deleted: false
        }
      ]
    }
  ],
  elements: {
    1: {
      title: "Total Orders",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        font_size: "medium",
        title: "Total Orders"
      }
    },
    2: {
      title: "Average Order Profit",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        title: "Average Order Profit"
      }
    }
  }
}
Atributo Formato Descripción
type String El uso del tipo dashboard:options:set indica que deseas escribir valores nuevos en las propiedades del diseño y del elemento del panel.
layouts Objeto Son las propiedades del diseño del panel que devuelve el atributo options en el evento dashboard:run:complete. Estos tendrán un formato similar al siguiente:

  • id: "string",
  • dashboard_id: "string",
  • type: "newspaper",
  • active: boolean,
  • column_width: number,
  • width: number
layouts.dashboard_layout_components Objeto Uno o más objetos de componente de diseño del panel que devuelve el atributo options en el evento dashboard:run:complete. Estos tendrán un formato similar al siguiente:

  • id: "string",
  • dashboard_layout_id: "string",
  • dashboard_element_id: "string",
  • row: number,
  • column: number,
  • width: number,
  • height: number,
  • deleted: boolean,
elements Objeto Uno o más objetos de elemento de panel que devuelve el atributo options en el evento dashboard:run:complete. Estos tendrán un formato similar al siguiente:

id: {

  title: "string",

  title_hidden: boolean,

  vis_config: {

    type: "string", title: "string"

  }

}

dashboard:schedule_modal:open

Usa esta acción para abrir el Programador, que permite a los usuarios enviar contenido de Looker a varios destinos.

{
  type: "dashboard:schedule_modal:open"
}
Atributo Formato Descripción
type String Si usas el tipo dashboard:schedule_modal:open, indicas que quieres abrir el diálogo Schedule.

dashboard:stop

Usa esta acción para detener un panel que se está ejecutando o que está volviendo a cargar datos. Esta es la misma acción que hacer clic en el botón Cancelar en el panel. Un panel que se detiene con dashboard:stop envía un evento dashboard:run:complete con status: establecido en "stopped".

{
  type: "dashboard:stop"
}
Atributo Formato Descripción
type String Si usas el tipo dashboard:stop, indicas que deseas detener el panel en ejecución.

look:run

Usa esta acción para ejecutar la consulta en la que se basa la vista en el iframe. Esta acción es similar a presionar el botón Ejecutar en la vista, con la excepción de que look:run siempre consulta la base de datos directamente y no recupera datos de la caché de Looker.

{
  type: "look:run"
}
Atributo Formato Descripción
type String Usar el tipo look:run indica que deseas ejecutar la vista.

look:filters:update

Usa esta acción para actualizar un filtro de Look existente en el iframe. No puedes agregar un filtro nuevo a la vista con este método.

{
  type: "look:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "products.department": "sweaters"
  }
}
Atributo Formato Descripción
type String El uso del tipo look:filters:update indica que deseas actualizar los filtros que usa la vista.
filters Objeto Son los filtros nuevos que quieres aplicar a la vista. Este objeto tiene el siguiente formato: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}

explore:run

Usa esta acción para ejecutar la exploración en el iframe. Esta acción es similar a presionar el botón Ejecutar en la exploración, con la excepción de que explore:run siempre consulta la base de datos directamente y no recupera datos de la caché de Looker.

{
  type: "explore:run"
}
Atributo Formato Descripción
type String Usar el tipo explore:run indica que deseas ejecutar la exploración.

explore:filters:update

Usa esta acción para actualizar o quitar un filtro de exploración existente en el iframe. Si incluyes un filtro nuevo que haga referencia a un campo válido, se agregará el filtro nuevo a la exploración.

{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}
Atributo Formato Descripción
type String El uso del tipo explore:filters:update indica que quieres actualizar los filtros que usa la exploración.
filters Objeto Son los filtros nuevos que quieres aplicar a la exploración. Si filters incluye un filtro que no existe en la exploración, pero que hace referencia a un campo válido, ese filtro se agregará a la exploración. Este objeto tiene el formato {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}.
deleteFilters Arreglo Son los filtros existentes que deseas quitar de la exploración. El array tiene el siguiente formato: ["view_name.field_name_1", "view_name.field_name_2", ...]

merge:run

Usa esta acción para ejecutar la consulta de combinación en el iframe.

{
  type: "merge:run"
}
Atributo Formato Descripción
type String Si usas el tipo merge:run, indicas que quieres ejecutar la consulta de combinación.

session:tokens:request

Usa esta acción para enviar tokens en respuesta a una solicitud de session:tokens:request.

{
  type: "session:tokens:request",
}
Atributo Formato Descripción
type String Si usas el tipo session:tokens:request, indicas que quieres enviar tokens en respuesta a un evento session:tokens:request.

env:host:scroll

Usa esta acción para enviar información sobre la posición de desplazamiento actual del iframe del host a la aplicación de Looker incorporada.

{
  type: "env:host:scroll",
  offsetTop: 10,
  offsetLeft: 10,
  scrollX: 5,
  scrollY: 5
}
Atributo Formato Descripción
type String Usar el tipo env:host:scroll indica que deseas enviar información sobre la posición de desplazamiento actual del iframe del host a la aplicación de Looker incorporada.
offsetTop Número Es el desplazamiento superior del iframe.
offsetLeft Número Es el desplazamiento hacia la izquierda del iframe.
scrollX Número Es la posición scrollX del host de la aplicación.
scrollY Número Es la posición scrollY del host de la aplicación.