Después de crear una incorporación, puedes hacerlo de forma pública, de forma privada, con inicio de sesión único (SSO) o a través de la API. Puedes interactuar con esos iframes a través de JavaScript. Puede hacer que su página sea más dinámica, según el estado del elemento insertado, o incluso hacer cambios en el elemento insertado desde su página web.
Ten en cuenta que Looker no controla el orden en el que los navegadores envían los eventos a las aplicaciones web. Esto significa que el orden de los eventos no está garantizado en todos los navegadores o plataformas. Asegúrate de escribir tu JavaScript de manera adecuada para tener en cuenta el manejo de eventos de diferentes navegadores.
Puedes usar JavaScript de dos maneras para el contenido incorporado de Looker:
- Con el kit de desarrollo de software (SDK) incorporado de Looker, que se describe en la página de documentación del SDK de incorporación
- Usar eventos de JavaScript, descritos en la sección Acceso a eventos de JavaScript de esta página
Preparation
Debe realizar algunas acciones para poder interactuar con el iframe incorporado:
- Cómo agregar un ID al Iframe
- Agrega el dominio incorporado al atributo
src
de Iframe - Cómo agregar el dominio incorporado a la lista de entidades permitidas
Cómo agregar un ID al iframe
Una de las cosas que deberás hacer más adelante es validar que la información con la que trabajas realmente haya salido del iframe de Looker. Para facilitar esto, asegúrate de agregar un ID al iframe, si aún no lo hiciste. En el siguiente ejemplo, agregamos id="looker"
:
<iframe id="looker" src="https://instance_name.looker.com/embed/dashboards/1"></iframe>
Agrega el dominio de incorporación al atributo iframe src
En el src
del iframe, agrega el dominio en el que se usa el iframe. En el siguiente ejemplo, agregamos ?embed_domain=https://mywebsite.com"
:
<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, asegúrate de agregar la embed_domain
a la URL de incorporación.
No incluyas una barra diagonal al final (
/
) enembed_domain
.
Cómo agregar el dominio incorporado 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 de la página Incorporar del panel Administrador de Looker:
- Ingresa el dominio en el que se usa el iframe. Después de escribirla, asegúrese de presionar la tecla Tab para que el dominio aparezca en un cuadro. No incluyas una barra diagonal al final (
/
) en la URL del dominio. - Haz clic en el botón Actualizar.
Puedes usar el comodín *
en la lista de entidades permitidas para crear un patrón de dominio. Por ejemplo, https://*.mycompany.com
permitiría https://analytics.mycompany.com
y https://data.mycompany.com
.
Cómo recuperar datos del iframe
Después de completar los pasos de preparación, puede acceder a los eventos pasados entre el iframe de Looker y su dominio mediante eventos postMessage
.
Asegúrese de verificar que los eventos provengan del iframe y del dominio de Looker para evitar los mensajes maliciosos.
El iframe incorporado puede crear algunos tipos de eventos, como se describe en la sección Referencia a 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 nativo 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));
}
}
});
Aquí hay 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 del tipo de evento
En la siguiente tabla, se resumen los tipos de eventos. Haz clic en un tipo de evento para ver sus detalles.
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 cargaron un panel y sus elementos, pero aún no se están ejecutando las consultas. |
dashboard:run:start |
Se comenzó a cargar un panel, y se comenzaron a cargar sus mosaicos y a buscar datos. |
dashboard:run:complete |
Se terminó de ejecutar un panel y se terminaron de cargar y consultar todos los mosaicos. |
dashboard:download |
Se inició la descarga de un PDF de un panel. |
dashboard:save:complete |
AGREGAR 21.6 Se editó y guardó un panel. |
dashboard:delete:complete |
AGREGADO 21.6 Se borró un panel. |
dashboard:tile:start |
Se inició la carga de un mosaico o la búsqueda de datos. |
dashboard:tile:complete |
Se terminó de ejecutar la consulta en un mosaico. |
dashboard:tile:download |
Se inició la descarga de datos de un mosaico. |
dashboard:tile:explore |
Un usuario hizo clic en la opción Explorar desde aquí en el mosaico del panel. |
dashboard:tile:view |
Un usuario hizo clic en la opción Ver el aspecto original en un mosaico del panel. |
dashboard:filters:changed |
Se aplicaron o cambiaron los filtros de un panel. |
look:ready |
Un Look comenzó a cargar datos de consultas, independientemente de si se ejecutarán o no. |
look:run:start |
Una vista comenzó a cargar datos de consulta y la consulta comenzó a ejecutarse. |
look:run:complete |
Una consulta terminó de ejecutar la consulta. |
look:save:complete |
AGREGADO 21.6 Se editó y se guardó un estilo. |
look:delete:complete |
AGREGAR 21.6 Una vista se movió a la carpeta Papelera. |
drillmenu:click |
Un usuario hizo clic en un menú de detalles de un panel que se creó con el parámetro LookML de link . |
drillmodal:download |
Un usuario abrió un cuadro de diálogo de perforación desde un mosaico 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 cuadro de diálogo de exploración. |
explore:ready |
Explorar comenzó a cargar datos de consultas, independientemente de si se ejecutarán o no. |
explore:run:start |
La función Explorar 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 Explorar cambió como resultado de las acciones del usuario. |
page:changed |
Un usuario navegó a una página nueva dentro del iframe. |
page:properties:changed |
Cambió la altura de un iframe del panel. |
Referencia de tipo de evento
El iframe incorporado puede crear diferentes tipos de eventos:
dashboard:loaded
En los paneles en los que los mosaicos no están configurados 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.
El atributo options
no está disponible en los paneles heredados.
type: "dashboard:loaded",
status: "complete",
dashboard: {
id: 1,
title: "Business Pulse",
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 | Dar formato | Descripción |
---|---|---|
status |
String | Indica si el panel y sus elementos se cargaron correctamente. |
dashboard.id |
Número | El número de ID del panel. |
dashboard.title |
String | El título, como se muestra en la parte superior del panel. |
dashboard.dashboard_filters |
Objeto | 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 | La URL completa del panel. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso). |
dashboard.options |
Objeto | Las propiedades y los valores del diseño del panel, del componente del diseño del panel y del elemento del panel Todas las propiedades que se muestran en el objeto options pueden recibir valores actualizados mediante el evento dashboard:options:set . Esta opción no está disponible en los paneles heredados. |
dashboard:run:start
Este evento se crea cuando un panel comienza a cargarse, cuando sus mosaicos comenzarán a cargarse y a buscar datos.
type: "dashboard:run:start",
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"
}
}
Atributo | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso). |
dashboard.absoluteUrl |
String | La URL completa del panel. |
dashboard.title |
String | El título, como se muestra en la parte superior del panel. |
dashboard.dashboard_filters |
Objeto | 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 termina de ejecutarse y todos los mosaicos finalizan la carga y las consultas. Este evento se crea ya sea que todos los mosaicos se carguen correctamente o no.
Los atributos options
y tileStatuses
no están disponibles en los paneles heredados.
type: "dashboard:run:complete",
status: "complete",
dashboard: {
id: 23,
title: "My Dashboard",
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 | Dar 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 muestra "complete" ; de lo contrario, status muestra "error" . Si se detuvo el panel en ejecución, ya sea desde la interfaz de usuario o con la acción dashboard:stop , status mostrará "stopped" . |
dashboard.id |
Número | El número de ID del panel. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso). |
dashboard.absoluteUrl |
String | La URL completa del panel. |
dashboard.title |
String | El título, como se muestra en la parte superior del panel. |
dashboard.dashboard_filters |
Objeto | 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 del diseño del panel, del componente del diseño del panel y del elemento del panel Todas las propiedades que se muestran en el objeto options pueden recibir valores actualizados mediante la acción dashboard:options:set . Esta opción no está disponible en los paneles heredados. |
dashboard.tileStatuses |
Arreglo de objetos | Un arreglo de objetos que proporcionan estados de mosaicos. Las propiedades del objeto son las siguientes:
|
dashboard:download
Este evento se crea cuando se comienza a descargar un PDF de un panel.
type: "dashboard: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"
}
}
fileFormat: "pdf"
Atributo | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso). |
dashboard.absoluteUrl |
String | La URL completa del panel. |
dashboard.title |
String | El título del panel, como se muestra en la parte superior del panel. |
dashboard.dashboard_filters |
Objeto | 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 | El formato del panel descargado (por el momento, solo "pdf" ). |
dashboard:save:complete
Este evento se crea cuando se edita y guarda un panel.
Este evento no está disponible en los paneles heredados.
type: "dashboard:save:complete",
dashboard: {
id: 23,
title: "My Dashboard",
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 | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel. |
dashboard.title |
String | El título, como se muestra en la parte superior del panel. |
dashboard.dashboard_filters |
Objeto | 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 | La URL completa del panel. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso). |
dashboard.options |
Objeto | Las propiedades y los valores del diseño del panel, del componente del diseño del panel y del elemento del panel Todas las propiedades que se muestran en el objeto options pueden recibir valores actualizados mediante el evento dashboard:options:set . |
dashboard:delete:complete
Este evento se crea cuando se borra un panel.
Este evento no está disponible en los paneles heredados.
type: "dashboard:delete:complete",
dashboard: {
id: 23,
title: "My Dashboard",
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 | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel. |
dashboard.title |
String | El título, como se muestra en la parte superior del panel. |
dashboard.dashboard_filters |
Objeto | 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 | La URL completa del panel. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso). |
dashboard.options |
Objeto | Las propiedades y los valores del diseño del panel, del componente del diseño del panel y del elemento del panel Todas las propiedades que se muestran en el objeto options pueden recibir valores actualizados mediante el evento dashboard:options:set . |
dashboard:tile:start
Este evento se crea cuando una tarjeta comienza a cargarse o a buscar datos.
type: "dashboard:tile:start",
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"
}
}
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
Atributo | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel al que pertenece el mosaico. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso) a la que pertenece el mosaico. |
dashboard.absoluteUrl |
String | Es la URL completa del panel al que pertenece el mosaico. |
dashboard.title |
String | El título del panel, como se muestra en la parte superior del panel al que pertenece el mosaico. |
dashboard.dashboard_filters |
Objeto | Los filtros que se aplican al panel al que pertenece el mosaico. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
tile.id |
Integer | El número de ID del evento, no el mosaico. |
tile.title |
String | El título del mosaico, como se muestra en la parte superior del mosaico. |
tile.listen |
Objeto | El panel global filtra este mosaico. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...} |
dashboard:tile:complete
Este evento se crea cuando un mosaico termina de ejecutar la consulta.
El atributo errors
no está disponible en los paneles heredados.
type: "dashboard:tile:complete",
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"
}
}
status: "complete",
truncated: false,
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
Atributo | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel al que pertenece el mosaico. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso) a la que pertenece el mosaico. |
dashboard.absoluteUrl |
String | Es la URL completa del panel al que pertenece el mosaico. |
dashboard.title |
String | El título del panel, como se muestra en la parte superior del panel al que pertenece el mosaico. |
dashboard.dashboard_filters |
Objeto | Los filtros que se aplican al panel al que pertenece el mosaico. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
status |
String | Indica si la consulta de mosaico se completó correctamente. Los valores posibles son "complete" o "error" . |
truncated |
Booleano | Si los resultados de la consulta de mosaicos se truncaron como resultado de que la consulta mostrara más filas que el límite establecido. El límite de filas puede ser un límite de filas especificado por el usuario o el límite predeterminado de Looker de 5,000. |
tile.id |
Integer | El número de ID del evento, no el mosaico. |
tile.title |
String | El título del mosaico, como se muestra en la parte superior del mosaico. |
tile.listen |
Objeto | El panel global filtra este mosaico. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...} |
tile.errors |
Arreglo de objetos | Se propaga cuando la propiedad status es "error" . Una matriz de objetos que proporciona detalles del error, incluido el texto del mensaje de error, una descripción más detallada del error y la consulta de SQL del mosaico que produjo el error. Esta opción no está disponible en los paneles heredados. |
dashboard:tile:download
Este evento se crea cuando comienzan a descargarse los datos de un mosaico.
type: "dashboard:tile: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"
}
}
tile: {
id: 123,
title: "Quarterly Sales"
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
fileFormat: "pdf"
Atributo | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel al que pertenece el mosaico. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso) a la que pertenece el mosaico. |
dashboard.absoluteUrl |
String | Es la URL completa del panel al que pertenece el mosaico. |
dashboard.title |
String | El título del panel, como se muestra en la parte superior del panel al que pertenece el mosaico. |
dashboard.dashboard_filters |
Objeto | Los filtros que se aplican al panel al que pertenece el mosaico. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
tile.id |
Integer | El número de ID del evento, no el mosaico. |
tile.title |
String | El título del mosaico, como se muestra en la parte superior del mosaico. |
tile.listen |
Objeto | El panel global filtra este mosaico. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...} |
fileFormat |
String | El formato del mosaico descargado (por el momento, solo "pdf" ). |
dashboard:tile:explore
Este evento se crea cuando un usuario hace clic en la opción Explorar desde aquí en un mosaico del panel.
type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
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"
}
}
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
Atributo | Dar formato | Descripción |
---|---|---|
label |
String | La etiqueta del botón. |
url |
String | La URL relativa (solo la ruta) de Explorar que se mostrará. |
dashboard.id |
Número | El número de ID del panel al que pertenece el mosaico. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso) a la que pertenece el mosaico. |
dashboard.absoluteUrl |
String | Es la URL completa del panel al que pertenece el mosaico. |
dashboard.title |
String | El título del panel, como se muestra en la parte superior del panel al que pertenece el mosaico. |
dashboard.dashboard_filters |
Objeto | Los filtros que se aplican al panel al que pertenece el mosaico. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
tile.id |
Integer | El número de ID del evento, no el mosaico. |
tile.title |
String | El título del mosaico, como se muestra en la parte superior del mosaico. |
tile.listen |
Objeto | El panel global filtra este mosaico. 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 el aspecto original en un mosaico del panel.
type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
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"
}
}
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
Atributo | Dar formato | Descripción |
---|---|---|
label |
String | La etiqueta del botón. |
url |
String | La URL relativa (solo la ruta de acceso) de la apariencia que se mostrará. |
dashboard.id |
Número | El número de ID del panel al que pertenece el mosaico. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso) a la que pertenece el mosaico. |
dashboard.absoluteUrl |
String | Es la URL completa del panel al que pertenece el mosaico. |
dashboard.title |
String | El título del panel, como se muestra en la parte superior del panel al que pertenece el mosaico. |
dashboard.dashboard_filters |
Objeto | Los filtros que se aplican al panel al que pertenece el mosaico. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
tile.id |
Integer | El número de ID del evento, no el mosaico. |
tile.title |
String | El título del mosaico, como se muestra en la parte superior del mosaico. |
tile.listen |
Objeto | El panel global filtra este mosaico. Este objeto tiene el siguiente formato: {"Filter Label": "Filter Field", ...} |
dashboard:filters:changed
Este evento se crea cuando se aplican o se cambian los filtros de un panel.
El atributo options
no está disponible en los paneles heredados.
type: "dashboard:filters:changed",
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"
}
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 | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso). |
dashboard.absoluteUrl |
String | La URL completa del panel. |
dashboard.title |
String | El título, como se muestra en la parte superior del panel. |
dashboard.dashboard_filters |
Objeto | 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 del diseño del panel, del componente del diseño del panel y del elemento del panel Todas las propiedades que se muestran en el objeto options pueden recibir valores actualizados mediante el evento dashboard:options:set . Esta opción no está disponible en los paneles heredados. |
look:ready
Este evento se crea cuando una vista comienza a cargar datos de consulta, independientemente de si la consulta se ejecuta o no.
type: "look:ready",
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
}
}
Atributo | Dar formato | Descripción |
---|---|---|
look.url |
String | La URL relativa de Look (solo la ruta de acceso) |
look.absoluteUrl |
String | La URL completa |
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 | Dar formato | Descripción |
---|---|---|
look.url |
String | La URL relativa de Look (solo la ruta de acceso) |
look.absoluteUrl |
String | La URL completa |
look:run:complete
Este evento se crea cuando una vista termina de ejecutar la consulta.
type: look:run:complete
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
}
}
Atributo | Dar formato | Descripción |
---|---|---|
look.url |
String | La URL relativa de Look (solo la ruta de acceso) |
look.absoluteUrl |
String | La URL completa |
look:save:complete
Este evento se crea cuando se edita y se guarda un estilo. Este evento se crea cuando un usuario realiza una de las siguientes tareas:
- Haz clic en el botón Editar para modificar el aspecto y, a continuación, en Guardar.
- Guarda un estilo con la opción Guardar > Guardar como...
- Cómo transferir un estilo de una carpeta a otra
Este evento no se crea si la vista se guarda con las opciones de menú Guardar > En panel existente o Editar configuración.
type: look:save:complete
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
spaceId: 123
}
}
Atributo | Dar formato | Descripción |
---|---|---|
look.url |
String | La URL relativa de Look (solo la ruta de acceso) |
look.absoluteUrl |
String | La URL completa |
look.spaceID |
Integer | El ID de la carpeta en la que se almacena el Look |
look:delete:complete
Este evento se crea cuando una apariencia se mueve a la carpeta Papelera.
type: look:delete:complete
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
}
}
Atributo | Dar formato | Descripción |
---|---|---|
look.url |
String | La URL relativa de Look (solo la ruta de acceso) |
look.absoluteUrl |
String | La URL completa |
drillmenu:click
Este evento se crea cuando un usuario hace clic en un menú de detalles en un panel creado con el parámetro LookML link
. Por ejemplo, el siguiente LookML crea un menú de detalles 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
muestra 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: ' '
Atributo | Dar formato | Descripción |
---|---|---|
label |
String | La etiqueta del vínculo, como se muestra en el menú de detalles |
link_type |
String | El tipo de objeto en el destino del vínculo |
modal |
Booleano | Si se usará el cuadro de diálogo de exploración en lugar de la navegación del navegador |
target |
String | Es _self si el destino del vínculo reemplazará el iframe actual y _blank si el destino del vínculo abrirá una ventana nueva |
url |
String | La URL del destino del vínculo |
context |
String | Atributo interno que usan algunos tipos de visualizaciones |
La zona de pruebas del iframe evitará que los clics del menú de búsqueda 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 cuadro de diálogo de perforación desde un mosaico 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 | Dar formato | Descripción |
---|---|---|
dashboard.id |
Número | El número de ID del panel al que pertenece el mosaico. |
dashboard.title |
String | El título del panel, como se muestra en la parte superior del panel al que pertenece el mosaico. |
dashboard.url |
String | La URL relativa del panel (solo la ruta de acceso) a la que pertenece el mosaico. |
dashboard.absoluteUrl |
String | Es la URL completa del panel al que pertenece el mosaico. |
dashboard.dashboard_filters |
Objeto | Los filtros que se aplican al panel al que pertenece el mosaico. Este objeto tiene el siguiente formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
drillExploreUrl |
String | La URL de exploración relativa (solo la ruta de acceso) que se descargará. |
fileFormat |
String | 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 cuadro de diálogo de exploración.
type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."
Atributo | Dar formato | Descripción |
---|---|---|
label |
String | La etiqueta del botón, como se muestra en el menú de detalles |
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 se ejecuta o no.
type: "explore:ready",
explore: {
url: "/embed/explore/...",
absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
}
}
Atributo | Dar 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 | Dar 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 | Dar 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 una URL de página de Explorar cambia como resultado de las acciones del usuario.
type: "explore:state:changed",
explore: {
url: "/embed/explore/...",
absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}
Atributo | Dar 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 |
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 | Dar formato | Descripción |
---|---|---|
page.type |
String | El tipo de página a la que se acaba de navegar, como "dashboard" , "look" o "explore" |
page.url |
String | La URL relativa (solo la ruta de acceso) de la página a la que se acaba de navegar |
page.absoluteUrl |
String | 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 del iframe de un panel. No está disponible para la opción Apariencias ni Exploraciones porque esos elementos ajustan automáticamente su altura al tamaño del iframe.
type: "page:properties:changed",
height: 1000
Atributo | Dar formato | Descripción |
---|---|---|
height |
Integer | La altura del iframe del panel en píxeles |
Cómo realizar cambios en el iframe
Después de preparar tu iframe para la recuperación de datos, puedes realizar cambios en el iframe mediante estos pasos:
Cómo escribir tu solicitud en JSON
Puede realizar varios cambios en el iframe, que deberá enviar 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, como se muestra a continuación:
var my_request = JSON.stringify(
{
type: "dashboard:run"
}
);
Publicando la solicitud en la propiedad contentWindow
de iframe
Por último, publica tu mensaje en el iframe de contentWindow
, 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. Haz clic en una acción para ver sus detalles.
Acción | Descripción de la acción |
---|---|
dashboard:load |
Carga un panel nuevo en el iframe y reemplaza un panel existente. |
dashboard:run |
Ejecuta el panel en el iframe. |
dashboard:filters:update |
Actualiza un filtro de panel existente en el iframe. |
dashboard:options:set |
Escribe nuevos valores en el diseño del panel y las propiedades de los elementos 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 ejecuta o vuelve a cargar datos. |
look:run |
Ejecuta el Look en el iframe. |
look:filters:update |
Actualiza un filtro de aspecto existente en el iframe. |
explore:run |
Ejecuta Explorar en el iframe. |
explore:filters:update |
Actualiza o quita un filtro Explorar existente en el iframe. |
Referencia de acción
Estas son las acciones disponibles que puedes publicar en el iframe incorporado:
dashboard:load
Esta acción no está disponible en los paneles heredados.
Use esta acción para cargar un panel nuevo en el iframe y reemplazar uno existente. El nuevo panel comenzará a ejecutar consultas como si se hubiera abierto una nueva página del panel.
{
type: "dashboard:load",
id: "101",
pushHistory: false
}
Atributo | Dar formato | Descripción |
---|---|---|
type |
String | El uso del tipo dashboard:load indica que deseas cargar un nuevo panel en el iframe. |
id |
String | El ID del panel que se cargará. |
pushHistory |
Booleano | Si se carga true , el panel crea una nueva entrada del historial del navegador 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 regresar a él. |
dashboard:run
Use esta acción para ejecutar el panel en el iframe. Esto es lo mismo que presionar el botón Run o Reload Data en el panel.
{
type: "dashboard:run"
}
Atributo | Dar formato | Descripción |
---|---|---|
type |
String | El uso del tipo dashboard:run indica que deseas ejecutar el panel. |
dashboard:filters:update
Use esta acción para actualizar un filtro de panel existente en el iframe. No puedes agregar un filtro nuevo al panel mediante este método.
{
type: "dashboard:filters:update",
filters: {
"Sale date": "Last 28 days",
"Sale amount": "Greater than 100"
}
}
Atributo | Dar formato | Descripción |
---|---|---|
type |
String | Usar el tipo dashboard:filters:update indica que deseas actualizar los filtros que usa el panel. |
filters |
Objeto | Los nuevos filtros que desea 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 del evento dashboard:run:complete
y no está disponible en los paneles heredados.
El incorporaciones crea el mensaje y lo envía al iframe, pero el panel no responde hasta después de que se produce dashboard:run:complete
. La acción dashboard:options:set
escribe valores nuevos en el diseño del panel y las propiedades de los elementos del panel. Solo se pueden actualizar mediante dashboard:options:set
las propiedades que se mostraron en el atributo options
del evento dashboard:run:complete
. Se ignorará cualquier propiedad establecida que el atributo options
del evento dashboard:run:complete
no haya mostrado.
{
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 | Dar formato | Descripción |
---|---|---|
type |
String | El uso del tipo dashboard:options:set indica que deseas escribir valores nuevos en el diseño del panel y las propiedades del elemento del panel. |
layouts |
Objeto | Las propiedades de diseño del panel que muestra el atributo options en el evento dashboard:run:complete Tendrán un formato similar al siguiente: id: "string", |
layouts.dashboard_layout_components |
Objeto | Uno o más objetos de componentes de diseño del panel que muestra el atributo options en el evento dashboard:run:complete . Tendrán un formato similar al siguiente:id: "string", |
elements |
Objeto | Uno o más objetos de elementos del panel que muestra el atributo options en el evento dashboard:run:complete . Tendrán un formato similar al siguiente:id: { |
dashboard:schedule_modal:open
Usa esta acción para abrir el programador, lo que permite a los usuarios enviar contenido de Looker a varios destinos.
Este evento no está disponible en los paneles heredados.
{
type: "dashboard:schedule_modal:open"
}
Atributo | Dar formato | Descripción |
---|---|---|
type |
String | El uso del tipo dashboard:schedule_modal:open indica que deseas abrir el cuadro de diálogo Schedule. |
dashboard:stop
Usa esta acción para detener un panel que esté ejecutando o volviendo a cargar datos. Esto es lo mismo que hacer clic en el botón Cancel en el panel. Un panel que dejó de usar dashboard:stop
envía un evento dashboard:run:complete
con status:
establecido en "stopped"
.
Esta acción no está disponible en los paneles heredados.
{
type: "dashboard:stop"
}
Atributo | Dar formato | Descripción |
---|---|---|
type |
String | El uso del tipo dashboard:stop indica que deseas detener el panel en ejecución. |
look:run
Use esta acción para ejecutar la consulta en la que se basa el Look en el iframe. Esto es similar a presionar el botón Run en Look, 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 | Dar formato | Descripción |
---|---|---|
type |
String | El uso del tipo look:run indica que deseas ejecutar el estilo. |
look:filters:update
Use esta acción para actualizar un filtro de aspecto existente en el iframe. No puedes agregar un filtro nuevo al estilo mediante este método.
{
type: "look:filters:update",
filters: {
"orders.created_at": "90 days",
"products.department": "sweaters"
}
}
Atributo | Dar formato | Descripción |
---|---|---|
type |
String | El uso del tipo look:filters:update indica que deseas actualizar los filtros que usa Look. |
filters |
Objeto | Los nuevos filtros que deseas aplicar a la apariencia. Este objeto tiene el siguiente formato: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...} |
explore:run
Use esta acción para ejecutar Explorar en el iframe. Esto es similar a presionar el botón Run en Explorar, 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 | Dar formato | Descripción |
---|---|---|
type |
String | Si usas el tipo explore:run , indicas que deseas ejecutar Explorar. |
explore:filters:update
Use esta acción para actualizar o quitar un filtro Explorar existente en el iframe. Si incluyes un filtro nuevo que haga referencia a un campo válido, se agregará el filtro nuevo a Explorar.
{
type: "explore:filters:update",
filters: {
"orders.created_at": "90 days",
"orders.status": "complete"
}
deleteFilters: ["products.department"]
}
Atributo | Dar formato | Descripción |
---|---|---|
type |
String | Si usas el tipo explore:filters:update , indicas que quieres actualizar los filtros que usa Explorar. |
filters |
Objeto | Los nuevos filtros que desea aplicar a Explorar. Si filters incluye un filtro que no existe actualmente en Explorar, pero que hace referencia a un campo válido, se agregará ese filtro a Explorar. Este objeto tiene el siguiente formato: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...} |
deleteFilters |
Array | Los filtros existentes que deseas quitar de Explorar. El arreglo tiene el siguiente formato: ["view_name.field_name_1", "view_name.field_name_2", ...] |