Quick BI:Solução básica para incorporação de relatórios

Limites

• A solução básica suporta apenas a incorporação de painéis e workbooks.

• Ao incorporar uma página de entrada de dados de workbook em um ambiente de terceiros, alguns navegadores podem impedir que iframes de origem cruzada gravem cookies. Isso pode causar falha no envio de dados em páginas complexas. Por exemplo, ao abrir uma página de entrada de dados de workbook incorporada no navegador integrado do WeCom em um dispositivo iOS, o envio de dados falha após o preenchimento e a submissão.

  Portanto, recomendamos usar o recurso de entrada de dados de workbook diretamente na plataforma Quick BI.

Informações preliminares

• Para incorporar relatórios do Quick BI em seu sistema, configure a incorporação de relatórios.

  • No Quick BI Pro, não é possível diferenciar permissões de banco de dados após incorporar um relatório. As permissões em nível de linha não se aplicam ao relatório incorporado; as permissões correspondem às do autor do relatório. A solução de aprimoramento de segurança não é suportada.

  • No Quick BI Standard, é possível diferenciar permissões de banco de dados após incorporar um relatório. Assim, usuários diferentes visualizam dados distintos no mesmo relatório. A solução de aprimoramento de segurança também é suportada. Para mais informações, consulte Solução de Aprimoramento de Segurança para Controle de Permissões de Dados Incorporados e Transmissão de Parâmetros em Relatórios.

• A Alibaba Cloud International possui cinco sites com os seguintes nomes de domínio:

  • Singapura: bi-ap-southeast-1.data.aliyun.com

  • Hong Kong (China): bi-cn-hongkong.data.aliyun.com

  • Malásia (Kuala Lumpur): bi-ap-southeast-3.data.aliyun.com

  • Alemanha (Frankfurt): bi-eu-central-1.data.aliyun.com

  • Indonésia: bi-ap-southeast-5.data.aliyun.com

Etapa 3: Construir a URL sem login

1. Obtenha o nome de domínio do Quick BI.

   Por exemplo, o nome de domínio do site do Quick BI em Hong Kong (China) é bi-cn-hongkong.data.aliyun.com/. Use o nome de domínio específico do seu ambiente.

2. Obtenha a URL de visualização do relatório.

   As URLs da página de visualização para relatórios são as seguintes. Selecione a necessária.

   • Painel: token3rd/dashboard/view/pc.htm

   • Workbook: token3rd/report/view.htm

3. Na página de edição do relatório, obtenha o ID do relatório.

   • ID do Painel

     Na página de edição do painel, obtenha o valor de pageId na barra de endereços.

   • ID do Workbook

     Na página de edição do workbook, obtenha o valor do ID do workbook na barra de endereços.

4. Anexe o nome de domínio do Quick BI, a URL de visualização do relatório, o ID do relatório e o AccessTicket obtido na Etapa 2 à URL de solicitação.

   • Formato do Painel: https://<Quick BI domain name>/<Report preview URL>?pageId=<Report ID>&accessTicket=<AccessTicket>

   • Formato do Workbook: https://<Quick BI domain name>/<Report preview URL>?id=<Report ID>&accessTicket=<AccessTicket>

Gerencie relatórios incorporados

Execute as seguintes operações em relatórios incorporados:

• Consultar relatórios incorporados: Na caixa de pesquisa da página de lista de relatórios, insira uma palavra-chave do nome do relatório e clique em no ícone para buscar o relatório.

  Refine a busca selecionando o workspace ou o tipo do relatório.

• Visualize a quantidade de relatórios incorporados. Para mais informações, consulte Visualizar a quantidade de relatórios incorporados.

• Excluir um relatório incorporado: Clique em no ícone ao lado do relatório para excluí-lo.

Visualize a quantidade de relatórios incorporados

1. Na página inicial do Quick BI, clique em Open Platform.

2. No painel de navegação à esquerda, clique em Embedded Analytics.

   Na página Report Embedding, visualize a quantidade de relatórios incorporados em sistemas de terceiros.

Como resolver o erro "access report_tree unauthorized" durante a incorporação de relatórios

Descrição do problema

Ao usar o recurso de incorporação de relatórios de terceiros, a mensagem de erro mostrada na figura abaixo aparece.

Causas

As permissões de relatório não estão ativadas no workspace correspondente.

Solução

Siga estas etapas para ativar as permissões de relatório.

Como fazer um relatório incorporado do Quick BI ajustar automaticamente sua altura (PC)

Descrição do problema

Quando um sistema de terceiros usa um iframe para incorporar um painel do Quick BI, o painel pode exibir uma barra de rolagem porque restrições de segurança entre domínios impedem o sistema de obter a altura do conteúdo do iframe.

Solução

Ao carregar um painel, o Quick BI envia a altura do painel para a página pai via postMessage. A página pai pode recuperar a altura e o ID usando um event listener.

Realize isso de uma das duas maneiras seguintes:

• Transmita a altura do conteúdo do iframe para a página pai.

  // The Quick BI URL. You can add other URLs as needed.
  const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com/'];
  function messageListener(event) {
    if (quickBIURL.includes(event.origin)) {
      // The height passed by postMessage
      console.log('Quick BI Dashboard Height:', event.data.height);
      // The dashboard page ID passed by postMessage
      console.log('Quick BI Dashboard Id:', event.data.pageId);
    }
  }
  // Add the listener before the dashboard loads
  window.addEventListener('message', messageListener);

• A página pai envia um postMessage para a página do iframe para obter a altura do painel.

  Observação:

  • O iframe é aquele que incorpora o painel do Quick BI.

  • Os dados transmitidos na mensagem devem incluir { getDashboardHeight: true }.

  O bloco de código a seguir fornece um exemplo.

  // The Quick BI URL. You can add other URLs as needed.
  const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com/'];
  function messageListener(event) {
    if (quickBIURL.includes(event.origin)) {
      // The height passed by postMessage
      console.log('Quick BI Dashboard Height:', event.data.height);
      // The dashboard page ID passed by postMessage
      console.log('Quick BI Dashboard Id:', event.data.pageId);
    }
  }
  // Add the listener before the dashboard loads
  window.addEventListener('message', messageListener);
  // Actively request the Quick BI dashboard height
  // The iframe that embeds the Quick BI dashboard
  const iframe = document.querySelector('iframe');
  // The data passed in the message must include { getDashboardHeight: true }
  iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');

  Nota

  Um painel do Quick BI ajusta automaticamente sua largura ao contêiner externo, o que elimina a barra de rolagem vertical e a necessidade de ajuste manual de largura.

Exemplo completo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </head>
    <body>
        <iframe 
        class="quickbi-iframe-demo"
    src="https://bi-cn-hongkong.data.aliyun.com//token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6"
      scrolling="no"
     frameborder="0" 
      width="100%" 
      height="600">
    </iframe>
   <!-- <useBodyAutoHeight=true> makes the page body height adaptive. <page_Id> is the dashboard page ID. accessTicket is the token for accessing the dashboard. -->
        <script>
      // The Quick BI URL. You can add other URLs as needed.
      const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com'];
      function messageListener(event) {
        if (quickBIURL.includes(event.origin)) {
          // The height passed by postMessage
          console.log('Quick BI Dashboard Height:', event.data.height);
          // The dashboard page ID passed by postMessage
          console.log('Quick BI Dashboard Id:', event.data.pageId);
        }
      }
      // Add the listener before the dashboard loads
      window.addEventListener('message', messageListener);
      // The iframe that embeds the Quick BI dashboard
      const iframe = document.querySelector('iframe');
       // Actively request the Quick BI dashboard height
      // The data passed in the message must include { getDashboardHeight: true }
      iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');
        </script>
    </body>
</html>

Como definir a largura para uma página móvel incorporada em um aplicativo de terceiros usando iframe

Descrição do problema

Devido a problemas de compatibilidade de iframe em versões anteriores do iOS, a largura do iframe pode transbordar. Isso pode fazer com que o painel role horizontalmente, tabelas de lista fixa parem de rolar, gráficos sejam truncados ou pop-ups de controle de consulta fiquem desalinhados.

Solução

Modifique o estilo do iframe.

Siga rigorosamente o código de exemplo abaixo:

iframe {
    border-width: 0;
    min-width: 100%;
    width: 0;
    *width: 100%;
    height: 667px; /* The height must be a fixed value. You can set it dynamically after getting the screen height. height: 100% has compatibility issues. */
}