Eventos JavaScript incorporados

Depois de criar uma incorporação, isso pode ser feito de forma pública, privada, com o Logon único (SSO) ou com a API. Você pode interagir com esses iframes por JavaScript. Você pode tornar sua página mais dinâmica, com base no status do item incorporado, ou até mesmo fazer alterações no item incorporado de sua página da Web.

Lembre-se de que o Looker não controla a ordem em que os navegadores enviam eventos para aplicativos da Web. Isso significa que não garantimos a ordem dos eventos em navegadores ou plataformas. Escreva seu JavaScript corretamente para contabilizar o processamento de eventos de diferentes navegadores.

Há duas maneiras de usar o JavaScript para conteúdo incorporado do Looker:

• Como usar o kit de desenvolvimento de software (SDK) incorporado do Looker, descrito na página de documentação do SDK incorporado
• Como usar eventos JavaScript, conforme descrito na seção Como acessar eventos em JavaScript desta página

Preparação

Você precisará realizar algumas ações antes de interagir com o iframe incorporado:

• Adicionar um ID ao iframe
• Adicionar o domínio de incorporação ao atributo Iframe src
• Adicionar o domínio de incorporação à lista de permissões

Adicionar um ID ao iframe

Uma das coisas que você precisará fazer mais tarde é validar se as informações com as quais você está trabalhando vêm realmente do iframe do Looker. Para facilitar esse processo, adicione um ID ao iframe, caso ainda não tenha feito isso. No exemplo a seguir, adicionamos id="looker":

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

Adicionar o domínio de incorporação ao atributo de iframe src

No iframe do src, adicione o domínio em que o iframe está sendo usado. No exemplo a seguir, adicionamos ?embed_domain=https://mywebsite.com":

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

Se você estiver usando a embedding de SSO, adicione embed_domain ao URL de incorporação.

Não inclua uma barra no final (/) na embed_domain.

Adicionando o domínio de incorporação à lista de permissões

Por fim, será preciso adicionar o domínio em que o iframe está sendo usado à lista de permissões na página Incorporar do painel Administrador do Looker:

1. Insira o domínio em que o iframe está sendo usado. Depois de digitá-lo, pressione a tecla Tab para o domínio aparecer em uma caixa. Não inclua uma barra no final (/) no URL do domínio.
2. Clique no botão Atualizar.

É possível usar o caractere curinga * na lista de permissões para criar um padrão de domínio. Por exemplo, https://*.mycompany.com permitiria https://analytics.mycompany.com e https://data.mycompany.com.

Recuperar dados do iframe

Após concluir as etapas de preparação, você poderá acessar os eventos transmitidos entre o iframe do Looker e seu domínio detectando eventos do postMessage.

Verifique se os eventos vieram do iframe e do domínio do Looker para evitar mensagens maliciosas.

O iframe incorporado pode criar alguns tipos de evento, conforme descrito na seção Referência de tipo de evento desta página.

Como acessar eventos em JavaScript

Veja um exemplo de detecção desses eventos no JavaScript nativo e do registro deles no console:

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));
    }
  }
});

Veja um exemplo de como detectar esses eventos no jQuery e registrá-los no console:

$(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));
    }
  }
});

Tabela de resumo do tipo de evento

A tabela a seguir resume os tipos de evento. Clique em um tipo de evento para ver os detalhes dele.

Tipo de evento	Causa do evento
dashboard:loaded	Em painéis em que os blocos não estão definidos para execução automática, um painel e os elementos dele são carregados, mas as consultas ainda não estão em execução.
dashboard:run:start	Um painel começou a carregar, e os blocos começaram a carregar e consultar dados.
dashboard:run:complete	Um painel concluiu a execução, e o carregamento e a consulta de todos os blocos foram concluídos.
dashboard:download	O download do PDF de um painel começou.
dashboard:save:complete	ADDED 21.6 Um painel foi editado e salvo.
dashboard:delete:complete	ADDED 21.6 Um painel foi excluído.
dashboard:tile:start	Um bloco começou a carregar ou consultar dados.
dashboard:tile:complete	Um bloco concluiu a execução da consulta.
dashboard:tile:download	O download dos dados de um bloco começou.
dashboard:tile:explore	Um usuário clicou na opção Explorar por aqui em um bloco do painel de controle.
dashboard:tile:view	Um usuário clicou na opção Ver aparência original em um bloco do painel de controle.
dashboard:filters:changed	Os filtros de um painel foram aplicados ou alterados.
look:ready	Um Look começou a carregar dados de consulta, quer a consulta seja executada ou não.
look:run:start	Um olhar começou a carregar dados de consulta e a consulta começou a ser executada.
look:run:complete	Uma consulta foi concluída.
look:save:complete	ADDED 21.6 Um visual foi editado e salvo.
look:delete:complete	ADDED 21.6 Um visual foi movido para a pasta Lixeira.
drillmenu:click	Um usuário clicou em um menu de detalhamento em um painel criado com o parâmetro link do LookML.
drillmodal:download	Um usuário abriu uma caixa de diálogo de detalhamento de um bloco do painel e clicou na opção Download.
drillmodal:explore	Um usuário clicou na opção Explorar daqui em uma caixa de diálogo.
explore:ready	Uma exploração começou a carregar dados de consulta, mesmo que ela não seja executada.
explore:run:start	Uma exploração começou a carregar dados de consultas, e a consulta começou a ser executada.
explore:run:complete	Uma execução foi concluída em uma exploração.
explore:state:changed	O URL de uma página "Explorar" foi alterado como resultado das ações do usuário.
page:changed	Um usuário navegou para uma nova página no iframe.
page:properties:changed	A altura de um iframe do painel mudou.

Referência do tipo de evento

O iframe incorporado pode criar muitos tipos diferentes de eventos:

dashboard:loaded

Nos painéis em que os blocos não estão definidos para execução automática, esse evento é criado depois que um painel e os elementos dele são carregados, mas antes da execução de consultas.

O atributo options não está disponível em painéis legados.

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	Formatação	Descrição
status	String	Indica se o painel e os elementos dele foram carregados.
dashboard.id	Número	O número do ID do painel.
dashboard.title	String	O título, conforme mostrado na parte superior do painel.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl	String	É o URL completo do painel.
dashboard.url	String	O URL do painel relativo (apenas o caminho).
dashboard.options	Objeto	As propriedades e os valores de layout do painel, componente de layout do painel e painel. Todas as propriedades retornadas no objeto options podem receber valores atualizados usando o evento dashboard:options:set. Essa opção não está disponível em painéis legados.

dashboard:run:start

Este evento é criado quando um painel começa a carregar, e os blocos começam a carregar e consultar dados.

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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel.
dashboard.url	String	O URL do painel relativo (apenas o caminho).
dashboard.absoluteUrl	String	É o URL completo do painel.
dashboard.title	String	O título, conforme mostrado na parte superior do painel.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:run:complete

Este evento é criado quando a execução de um painel termina e todos os blocos são carregados e consultados. Esse evento é criado mesmo que todos os blocos sejam carregados.

Os atributos options e tileStatuses não estão disponíveis nos painéis legados.

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	Formatação	Descrição
status	String	Indica se o painel e os elementos dele foram executados com sucesso. Se o painel e os elementos dele forem executados com êxito, status retornará "complete". Caso contrário, status retornará "error". Se o painel em execução tiver sido interrompido, seja na interface do usuário ou com a ação dashboard:stop, o status retornará "stopped".
dashboard.id	Número	O número do ID do painel.
dashboard.url	String	O URL do painel relativo (apenas o caminho).
dashboard.absoluteUrl	String	É o URL completo do painel.
dashboard.title	String	O título, conforme mostrado na parte superior do painel.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options	Objeto	As propriedades e os valores de layout do painel, componente de layout do painel e painel. Todas as propriedades retornadas no objeto options podem receber valores atualizados usando a ação dashboard:options:set. Essa opção não está disponível em painéis legados.
dashboard.tileStatuses	Matriz de objetos	Uma matriz de objetos que fornecem status de bloco. As propriedades do objeto são: tileId: o número do ID do bloco. status: se a consulta de blocos tiver sido executada corretamente, status retornará "complete". Caso contrário, status retornará "error". errors: preenchido quando a propriedade status é "error". Uma matriz de objetos com detalhes do erro, incluindo o texto da mensagem de erro, uma descrição mais detalhada do erro e a consulta SQL do bloco que produziu o erro. Essa opção não está disponível em painéis legados.

dashboard:download

Este evento é criado quando começa o download de um PDF de um painel.

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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel.
dashboard.url	String	O URL do painel relativo (apenas o caminho).
dashboard.absoluteUrl	String	É o URL completo do painel.
dashboard.title	String	O título do painel, conforme mostrado na parte superior do painel.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
fileFormat	String	O formato do painel transferido por download (somente "pdf" no momento).

dashboard:save:complete

Esse evento é criado quando o painel é editado e salvo.

Este evento não está disponível em painéis legados.

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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel.
dashboard.title	String	O título, conforme mostrado na parte superior do painel.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl	String	É o URL completo do painel.
dashboard.url	String	O URL do painel relativo (apenas o caminho).
dashboard.options	Objeto	As propriedades e os valores de layout do painel, componente de layout do painel e painel. Todas as propriedades retornadas no objeto options podem receber valores atualizados usando o evento dashboard:options:set.

dashboard:delete:complete

Este evento é criado quando um painel é excluído.

Este evento não está disponível em painéis legados.

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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel.
dashboard.title	String	O título, conforme mostrado na parte superior do painel.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.absoluteUrl	String	É o URL completo do painel.
dashboard.url	String	O URL do painel relativo (apenas o caminho).
dashboard.options	Objeto	As propriedades e os valores de layout do painel, componente de layout do painel e painel. Todas as propriedades retornadas no objeto options podem receber valores atualizados usando o evento dashboard:options:set.

dashboard:tile:start

Este evento é criado quando um bloco começa a carregar ou consultar dados.

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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel ao qual o bloco pertence.
dashboard.url	String	O URL do painel de controle relativo (somente o caminho) ao qual o bloco pertence.
dashboard.absoluteUrl	String	O URL completo do painel ao qual o bloco pertence.
dashboard.title	String	O título do painel, conforme mostrado na parte superior do painel a que o bloco pertence.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel a que o bloco pertence. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id	Inteiro	O número do ID do evento, não o bloco.
tile.title	String	Título do bloco, conforme mostrado na parte superior do bloco.
tile.listen	Objeto	O painel global filtra esse bloco que está detectando. Este objeto tem o formato: {"Filter Label": "Filter Field", ...}

dashboard:tile:complete

Este evento é criado quando a execução de um bloco é concluída.

O atributo errors não está disponível em painéis legados.

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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel ao qual o bloco pertence.
dashboard.url	String	O URL do painel de controle relativo (somente o caminho) ao qual o bloco pertence.
dashboard.absoluteUrl	String	O URL completo do painel ao qual o bloco pertence.
dashboard.title	String	O título do painel, conforme mostrado na parte superior do painel a que o bloco pertence.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel a que o bloco pertence. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
status	String	Indica se a consulta de blocos foi concluída com êxito. Os valores possíveis são "complete" ou "error".
truncated	Booleano	Indica se os resultados da consulta de bloco foram truncados como resultado da consulta que retorna mais linhas do que o limite de linhas da consulta. O limite de linhas pode ser especificado pelo usuário ou o limite padrão de 5.000 linhas do Looker.
tile.id	Inteiro	O número do ID do evento, não o bloco.
tile.title	String	Título do bloco, conforme mostrado na parte superior do bloco.
tile.listen	Objeto	O painel global filtra esse bloco que está detectando. Este objeto tem o formato: {"Filter Label": "Filter Field", ...}
tile.errors	Matriz de objetos	Preenchido quando a propriedade status é "error". Uma matriz de objetos com detalhes do erro, incluindo o texto da mensagem de erro, uma descrição mais detalhada do erro e a consulta SQL do bloco que produziu o erro. Essa opção não está disponível em painéis legados.

dashboard:tile:download

Este evento é criado quando o download dos dados de um bloco é iniciado.

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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel ao qual o bloco pertence.
dashboard.url	String	O URL do painel de controle relativo (somente o caminho) ao qual o bloco pertence.
dashboard.absoluteUrl	String	O URL completo do painel ao qual o bloco pertence.
dashboard.title	String	O título do painel, conforme mostrado na parte superior do painel a que o bloco pertence.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel a que o bloco pertence. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id	Inteiro	O número do ID do evento, não o bloco.
tile.title	String	Título do bloco, conforme mostrado na parte superior do bloco.
tile.listen	Objeto	O painel global filtra esse bloco que está detectando. Este objeto tem o formato: {"Filter Label": "Filter Field", ...}
fileFormat	String	O formato do bloco transferido por download (somente "pdf" no momento).

dashboard:tile:explore

Esse evento é criado quando um usuário clica na opção Explorar por aqui em um bloco do painel.

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	Formatação	Descrição
label	String	O rótulo do botão.
url	String	O URL relativo (apenas o caminho) da exploração a ser visualizada.
dashboard.id	Número	O número do ID do painel ao qual o bloco pertence.
dashboard.url	String	O URL do painel de controle relativo (somente o caminho) ao qual o bloco pertence.
dashboard.absoluteUrl	String	O URL completo do painel ao qual o bloco pertence.
dashboard.title	String	O título do painel, conforme mostrado na parte superior do painel a que o bloco pertence.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel a que o bloco pertence. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id	Inteiro	O número do ID do evento, não o bloco.
tile.title	String	Título do bloco, conforme mostrado na parte superior do bloco.
tile.listen	Objeto	O painel global filtra esse bloco que está detectando. Este objeto tem o formato: {"Filter Label": "Filter Field", ...}

dashboard:tile:view

Este evento é criado quando um usuário clica na opção Ver aparência original em um bloco do painel de controle.

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	Formatação	Descrição
label	String	O rótulo do botão.
url	String	O URL relativo (apenas o caminho) do Look a ser visualizado.
dashboard.id	Número	O número do ID do painel ao qual o bloco pertence.
dashboard.url	String	O URL do painel de controle relativo (somente o caminho) ao qual o bloco pertence.
dashboard.absoluteUrl	String	O URL completo do painel ao qual o bloco pertence.
dashboard.title	String	O título do painel, conforme mostrado na parte superior do painel a que o bloco pertence.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel a que o bloco pertence. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
tile.id	Inteiro	O número do ID do evento, não o bloco.
tile.title	String	Título do bloco, conforme mostrado na parte superior do bloco.
tile.listen	Objeto	O painel global filtra esse bloco que está detectando. Este objeto tem o formato: {"Filter Label": "Filter Field", ...}

dashboard:filters:changed

Este evento é criado quando os filtros de um painel são aplicados ou alterados.

O atributo options não está disponível em painéis legados.

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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel.
dashboard.url	String	O URL do painel relativo (apenas o caminho).
dashboard.absoluteUrl	String	É o URL completo do painel.
dashboard.title	String	O título, conforme mostrado na parte superior do painel.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
dashboard.options	Objeto	As propriedades e os valores de layout do painel, componente de layout do painel e painel. Todas as propriedades retornadas no objeto options podem receber valores atualizados usando o evento dashboard:options:set. Essa opção não está disponível em painéis legados.

look:ready

Este evento é criado quando um Look começa a carregar dados de consulta, mesmo que ela não seja executada.

type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

Atributo	Formatação	Descrição
look.url	String	O URL de aparência relativo (apenas o caminho)
look.absoluteUrl	String	URL de visualização completo

look:run:start

Esse evento é criado quando uma aparência começa a carregar dados de consulta e a consulta começa a ser executada.

type: "look:run:start",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

Atributo	Formatação	Descrição
look.url	String	O URL de aparência relativo (apenas o caminho)
look.absoluteUrl	String	URL de visualização completo

look:run:complete

Este evento é criado quando um Look termina de executar a consulta.

type: look:run:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

Atributo	Formatação	Descrição
look.url	String	O URL de aparência relativo (apenas o caminho)
look.absoluteUrl	String	URL de visualização completo

look:save:complete

Esse evento é criado quando uma aparência é editada e salva. Esse evento é criado quando um usuário realiza uma das seguintes tarefas:

• Clica no botão Edit para modificar a aparência e depois em Save
• Salva um visual com a opção de menu Save > Save As....
• Move um Look de uma pasta para outra

Esse evento não será criado se o recurso for salvo com as opções de menu Save > To existing panel ou Edit Settings.

type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  spaceId: 123
  }
}

Atributo	Formatação	Descrição
look.url	String	O URL de aparência relativo (apenas o caminho)
look.absoluteUrl	String	URL de visualização completo
look.spaceID	Inteiro	O ID da pasta em que o Look está armazenado

look:delete:complete

Esse evento é criado quando uma aparência é movida para a pasta Lixeira.

type: look:delete:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

Atributo	Formatação	Descrição
look.url	String	O URL de aparência relativo (apenas o caminho)
look.absoluteUrl	String	URL de visualização completo

drillmenu:click

Esse evento é criado quando um usuário clica em um menu de detalhamento em um painel criado com o parâmetro link do LookML. Por exemplo, o LookML a seguir cria um menu de detalhamento em que um usuário pode ver dados filtrados pela dimensão 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"
  }
}

Quando o filtro state é definido como Illinois, o evento drillmenu:click retorna o seguinte ao host do iframe:

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

Atributo	Formatação	Descrição
label	String	Rótulo do link, conforme exibido no menu de detalhamento
link_type	String	O tipo de objeto no destino do link
modal	Booleano	Se a caixa de diálogo de detalhamento será usada em vez da navegação do navegador
target	String	É _self se o destino do link substituirá o iframe atual, _blank se o destino do link abrir uma nova janela
url	String	O URL do destino do link
context	String	Atributo interno usado por alguns tipos de visualizações

Colocar o iframe em sandbox impedirá que os cliques no menu de detalhamento sejam abertos em uma nova janela. Use estes valores de sandbox na tag iframe:

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

drillmodal:download

Este evento é criado quando um usuário abre uma caixa de diálogo de detalhamento em um bloco do painel e clica na opção Download.

{
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	Formatação	Descrição
dashboard.id	Número	O número do ID do painel ao qual o bloco pertence.
dashboard.title	String	O título do painel, conforme mostrado na parte superior do painel a que o bloco pertence.
dashboard.url	String	O URL do painel de controle relativo (somente o caminho) ao qual o bloco pertence.
dashboard.absoluteUrl	String	O URL completo do painel ao qual o bloco pertence.
dashboard.dashboard_filters	Objeto	Os filtros aplicados ao painel a que o bloco pertence. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}
drillExploreUrl	String	O URL de exploração relativo (apenas o caminho) a ser transferido por download.
fileFormat	String	Formato do arquivo do download dos dados.

drillmodal:explore

Este evento é criado quando um usuário clica na opção Explorar daqui em uma caixa de diálogo.

type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."

Atributo	Formatação	Descrição
label	String	Rótulo do botão, conforme mostrado no menu de detalhamento.
url	String	O URL de exploração relativo (apenas o caminho) a ser visualizado

explore:ready

Este evento é criado quando uma exploração começa a carregar dados de consulta, mesmo que ela não seja executada.

type: "explore:ready",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

Atributo	Formatação	Descrição
explore.url	String	O URL relativo do Explorar (apenas o caminho)
explore.absoluteUrl	String	O URL completo da guia "Explorar"

explore:run:start

Esse evento é criado quando uma exploração começa a carregar dados de consulta e a consulta começa a ser executada.

type: "explore:run:start",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

Atributo	Formatação	Descrição
explore.url	String	O URL relativo do Explorar (apenas o caminho)
explore.absoluteUrl	String	O URL completo da guia "Explorar"

explore:run:complete

Este evento é criado quando a exploração termina de executar a consulta.

type: "explore:run:complete",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

Atributo	Formatação	Descrição
explore.url	String	O URL relativo do Explorar (apenas o caminho)
explore.absoluteUrl	String	O URL completo da guia "Explorar"

explore:state:changed

Este evento é criado quando o URL de uma página "Explorar" é alterado como resultado de ações do usuário.

type: "explore:state:changed",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}

Atributo	Formatação	Descrição
explore.url	String	O URL relativo do Explorar (apenas o caminho)
explore.absoluteUrl	String	O URL completo da guia "Explorar"

page:changed

Este evento é criado quando um usuário navega para uma nova página dentro do iframe.

type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}

Atributo	Formatação	Descrição
page.type	String	O tipo de página que acabou de ser acessado, como "dashboard", "look" ou "explore"
page.url	String	URL relativo (apenas o caminho) da página que acabou de ser acessada
page.absoluteUrl	String	O URL completo da página que acabou de ser acessada

page:properties:changed

Este evento é criado quando a altura de um iframe do painel é alterada. e não para as categorias "Aparências" ou "Explorar", porque os itens ajustam automaticamente a altura aos tamanhos do iframe.

type: "page:properties:changed",
height: 1000

Atributo	Formatação	Descrição
height	Inteiro	A altura do iframe do painel em pixels

Fazer alterações no iframe

Depois de preparar seu iframe para recuperação de dados, você pode fazer alterações no iframe com estas etapas:

1. Escreva sua solicitação em JSON.
2. Poste a solicitação no contentWindow do iframe.

Como criar sua solicitação em JSON

É possível fazer várias alterações ao iframe, que serão enviadas no formato JSON. As opções disponíveis são descritas na seção Referência de ações desta página. Não se esqueça de usar JSON.stringify para transformar sua ação em JSON, desta forma:

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

Postando a solicitação na propriedade contentWindow do iframe

Por fim, poste sua mensagem no contentWindow do iframe, assim:

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

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

Tabela de resumo das ações

A tabela a seguir resume as ações. Clique em uma ação para ver os detalhes dela.

Ação	Descrição da ação
dashboard:load	Carrega um novo painel no iframe, substituindo um painel existente.
dashboard:run	Executa o painel no iframe.
dashboard:filters:update	Atualiza um filtro de painel existente no iframe.
dashboard:options:set	Escreve novos valores no layout do painel e nas propriedades do elemento do painel.
dashboard:schedule_modal:open	Abre o programador, que permite aos usuários exibir conteúdo do Looker para vários destinos.
dashboard:stop	Para um painel que está executando ou recarrega dados.
look:run	Executa o Look no iframe.
look:filters:update	Atualiza um filtro de aparência existente no iframe.
explore:run	Executa o "Explorar" no iframe.
explore:filters:update	Atualiza ou remove um filtro "Explorar" existente no iframe.

Referência da ação

Estas são as ações disponíveis para postagem no iframe incorporado:

dashboard:load

Essa ação não está disponível em painéis legados.

Use esta ação para carregar um novo painel no iframe e substituir um painel existente. O novo painel começará a executar consultas como se uma nova página do painel tivesse sido aberta.

{
  type: "dashboard:load",
  id: "101",
  pushHistory: false
}

Atributo	Formatação	Descrição
type	String	Usar o tipo dashboard:load indica que você quer carregar um novo painel no iframe.
id	String	O ID do painel a ser carregado.
pushHistory	Booleano	Se true, o painel carregado criará uma nova entrada no histórico do navegador e o usuário poderá usar o botão"Voltar"do navegador para retornar ao painel anterior. Se false, o painel atual será substituído e a navegação do navegador não poderá ser usada para retornar a ele.

dashboard:run

Use esta ação para executar o painel no iframe. Essa é a mesma ação que clicar no botão Executar ou Atualizar dados no painel.

{
  type: "dashboard:run"
}

Atributo	Formatação	Descrição
type	String	Usar o tipo dashboard:run indica que você quer executar o painel.

dashboard:filters:update

Use esta ação para atualizar um filtro de painel existente no iframe. Não é possível adicionar um novo filtro ao painel usando este método.

{
  type: "dashboard:filters:update",
  filters: {
    "Sale date": "Last 28 days",
    "Sale amount": "Greater than 100"
  }
}

Atributo	Formatação	Descrição
type	String	Usar o tipo dashboard:filters:update indica que você quer atualizar os filtros usados pelo painel.
filters	Objeto	Os novos filtros que você quer aplicar ao painel. Este objeto tem o formato: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...}

dashboard:options:set

Essa ação estará disponível após a ocorrência do evento dashboard:run:complete e não estará disponível em painéis legados.

O incorporador cria a mensagem e a envia para o iframe, mas o painel não responde até dashboard:run:complete ocorrer. A ação dashboard:options:set grava novos valores no layout do painel e nas propriedades do elemento do painel. Somente as propriedades retornadas no atributo options do evento dashboard:run:complete podem ser atualizadas usando dashboard:options:set. Todas as propriedades definidas que não foram retornadas anteriormente pelo atributo options do evento dashboard:run:complete serão ignoradas.

{
  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	Formatação	Descrição
type	String	O uso do tipo dashboard:options:set indica que você quer gravar novos valores no layout do painel e nas propriedades do elemento do painel.
layouts	Objeto	As propriedades do layout do painel retornadas pelo atributo options no evento dashboard:run:complete. O formato é parecido com este: id: "string", dashboard_id: "string", type: "newspaper", active: boolean, column_width: number, width: number
layouts.dashboard_layout_components	Objeto	Um ou mais objetos de componente de layout do painel retornados pelo atributo options no evento dashboard:run:complete. O formato é parecido com este: id: "string", dashboard_layout_id: "string", dashboard_element_id: "string", row: number, column: number, width: number, height: number, deleted: boolean,
elements	Objeto	Um ou mais objetos de elemento do painel retornados pelo atributo options no evento dashboard:run:complete. O formato é parecido com este: id: {   title: "string"

dashboard:schedule_modal:open

Use esta ação para abrir o Scheduler, que permite aos usuários exibir conteúdo do Looker em vários destinos.

Este evento não está disponível em painéis legados.

{
  type: "dashboard:schedule_modal:open"
}

Atributo	Formatação	Descrição
type	String	Usar o tipo dashboard:schedule_modal:open indica que você quer abrir a caixa de diálogo Schedule.

dashboard:stop

Use esta ação para interromper um painel que está executando ou recarrega dados. Isso é o mesmo que clicar no botão Cancel no painel. Um painel que parou de usar dashboard:stop envia um evento dashboard:run:complete com status: definido como "stopped".

Essa ação não está disponível em painéis legados.

{
  type: "dashboard:stop"
}

Atributo	Formatação	Descrição
type	String	Usar o tipo dashboard:stop indica que você quer interromper o painel de execução.

look:run

Use esta ação para executar a consulta na qual o Look está baseado no iframe. Isso é semelhante a pressionar o botão Run no Look, com a exceção de que look:run sempre consulta o banco de dados diretamente e não recupera dados do cache do Looker (link em inglês).

{
  type: "look:run"
}

Atributo	Formatação	Descrição
type	String	O uso do tipo look:run indica que você quer executar o Look

look:filters:update

Use esta ação para atualizar um filtro de aparência existente no iframe. Não é possível adicionar um novo filtro à aparência usando este método.

{
  type: "look:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "products.department": "sweaters"
  }
}

Atributo	Formatação	Descrição
type	String	O uso do tipo look:filters:update indica que você quer atualizar os filtros usados pelo Look.
filters	Objeto	Os novos filtros que você quer aplicar ao Look. Este objeto tem o formato: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}

explore:run

Use esta ação para executar o recurso Explorar no iframe. Isso é semelhante a pressionar o botão Run em "Explore", com a exceção de que o explore:run sempre consulta o banco de dados diretamente e não recupera dados do cache do Looker (link em inglês).

{
  type: "explore:run"
}

Atributo	Formatação	Descrição
type	String	O uso do tipo explore:run indica que você quer executar o recurso Explorar.

explore:filters:update

Use esta ação para atualizar ou remover um filtro "Explorar" existente no iframe. Incluir um novo filtro que faz referência a um campo válido inclui o novo filtro em "Explorar".

{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}

Atributo	Formatação	Descrição
type	String	Usar o tipo explore:filters:update indica que você quer atualizar os filtros usados pela opção"Explorar".
filters	Objeto	Os novos filtros que você quer aplicar ao recurso Explorar. Se filters incluir um filtro que não existe atualmente em "Explorar", mas que faz referência a um campo válido, esse filtro será adicionado a "Explorar". Este objeto tem o formato: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}
deleteFilters	Matriz	Os filtros atuais que você quer remover da guia "Explorar" A matriz tem o formato: ["view_name.field_name_1", "view_name.field_name_2", ...]