Mensagens incorporadas do iframe do Looker

1. Antes de começar

Você precisa ter conteúdo do Looker incorporado em um iframe com incorporação privada ou incorporação de SSO. Neste codelab, vamos interagir com seu iframe usando JavaScript para tornar sua página da Web mais dinâmica. Sua página da Web vai enviar e receber mensagens do conteúdo do Looker incorporado no iframe.

Pré-requisitos

O que você vai aprender

  • Como preparar seu iframe e sua instância do Looker para interação com JavaScript
  • Como detectar eventos do iframe
  • Como enviar mensagens de ação para seu iframe

O que é necessário

  • Acesso ao HTML e ao JavaScript do código do front-end que gerencia o iframe
  • Acesso às configurações de incorporação de administrador na sua instância do Looker

2. Preparações

Você precisa preparar o iframe e a instância do Looker antes de interagir com o iframe.

Adicione um atributo id ao iframe

Você precisará validar as mensagens do iframe. Para fazer isso, defina um atributo id no iframe:

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

Adicione o domínio da incorporação ao atributo src do iframe.

Determine o domínio da página da Web que hospeda o iframe. Se o URL da página da Web for https://mywebsite.com/with/embed, o domínio será https://mywebsite.com.

Se você estiver usando a incorporação privada, adicione o domínio como um parâmetro de consulta embed_domain no src do iframe:

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

Se você estiver usando a incorporação de SSO, adicione o domínio como um parâmetro de consulta embed_domain ao URL de incorporação.

Adicionar o domínio da incorporação à lista de permissões na instância do Looker

Por fim, adicione o domínio da incorporação à lista de permissões na sua instância do Looker para permitir o envio de mensagens.

Acesse a página Incorporar na seção Administrador da sua instância do Looker. https://your_instance.looker.com/admin/embed

No campo Lista de permissões de domínio incorporado, digite o domínio da incorporação. Depois de digitar, pressione a tecla Tab para que o domínio apareça em uma caixa. Não inclua uma barra final /.

Selecione o botão Atualizar.

3. Detectar mensagens de eventos do iframe

O iframe com conteúdo incorporado do Looker envia mensagens para a página da Web host. Essas mensagens de evento contêm informações oportunas sobre o conteúdo do Looker incorporado, como se o painel incorporado começou a carregar ou se o usuário selecionou a opção "Download" no conteúdo incorporado. Vamos receber e analisar esses eventos.

Entender o esquema de objeto de evento

O esquema do objeto de evento é:

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

O evento sempre terá uma propriedade type que permite determinar qual evento é. Todas as outras propriedades específicas do evento são definidas na nossa referência de eventos.

Receber e analisar o evento

Adicione isso ao local em que o JavaScript da sua página da Web inicializa ou gerencia o iframe:

window.addEventListener("message", function(message) {
  const iframeElement = document.getElementById("looker");
  if (message.source === iframeElement.contentWindow) {
    if (message.origin === "https://instance_name.looker.com") {
      const event = JSON.parse(message.data);
      switch (event.type):
        case "dashboard:run:start":
          console.log("The embedded dashboard has started loading"); 
    }
  }
});

O snippet de código faz o seguinte:

  1. Detecta o evento "message" do objeto window.
  2. Verifica se a propriedade source da mensagem é o iframe com o conteúdo incorporado do Looker.
  3. Verifica se a propriedade origin da mensagem é o domínio da sua instância do Looker.
  4. O JSON analisa a propriedade data da mensagem para acessar e analisar o objeto de evento.
  5. Ativa a propriedade type do objeto de evento para determinar qual evento é e agir de acordo com ele.

Agora, sua página da Web host pode reagir dinamicamente aos eventos emitidos pelo conteúdo incorporado do Looker.

4. Enviar mensagem de ação para o iframe

A página da Web host também pode enviar mensagens para o conteúdo do Looker incorporado ao iframe. Essas mensagens de ação podem mudar o estado do conteúdo incorporado do Looker, como atualizar os filtros no painel incorporado. Vamos criar uma mensagem de ação que diga ao painel incorporado para executar as consultas e enviar a mensagem ao iframe.

Criar uma mensagem de ação

Crie uma mensagem de ação no JavaScript da sua página da Web:

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

O objeto action segue o mesmo formato do objeto event anterior. Ela sempre terá uma propriedade type e propriedades específicas da ação, que são definidas na referência de ação. A mensagem de ação precisa estar formatada em JSON.

Enviar a mensagem de ação

No JavaScript da sua página da Web, envie a ação formatada em JSON para o iframe:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Determine o iframe para onde você vai enviar a ação.
  2. Chame o método postMessage() na propriedade contentWindow do iframe para enviar a mensagem.

Agora, a página da Web host pode mudar dinamicamente o estado do conteúdo incorporado do Looker.

5. Informações adicionais

Parabéns! Agora você pode ouvir eventos e enviar ações para o conteúdo do Looker incorporado ao iframe. Confira estes recursos para mais informações: