Quick BI:Solución básica para integrar informes

Límites

• La solución básica solo admite la integración de paneles y libros de trabajo.

• Cuando integra una página de entrada de datos de un libro de trabajo en un entorno de terceros, algunos navegadores del sistema pueden impedir que los iframes de origen cruzado escriban cookies. Esto puede provocar errores al enviar datos en páginas complejas de entrada de datos. Por ejemplo, si abre una página integrada de este tipo en el navegador integrado de WeCom en un dispositivo iOS, el envío de datos falla después de completarlos y enviarlos.

  Por lo tanto, se recomienda usar la función de entrada de datos de libros de trabajo directamente en la plataforma de Quick BI.

Contexto

• Para integrar informes de Quick BI en su sistema, debe configurar la integración de informes.

  • Si utiliza Quick BI Pro, no podrá diferenciar los permisos de base de datos después de integrar un informe. Los permisos a nivel de fila no surten efecto en el informe integrado y los permisos son los mismos que los del autor del informe. La solución de mejora de seguridad no es compatible.

  • Si utiliza Quick BI Standard, sí podrá diferenciar los permisos de base de datos tras integrar un informe. Esto significa que distintos usuarios verán datos diferentes en un mismo informe. Además, esta versión admite la solución de mejora de seguridad. Para obtener más información, consulte Security Enhancement Solution for Embedded Data Permission Control and Parameter Transmission in Reports.

• Alibaba Cloud International cuenta con cinco sitios con los siguientes nombres de dominio:

  • Singapore: bi-ap-southeast-1.alibabacloud.com

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

  • Malaysia (Kuala Lumpur): bi-ap-southeast-3.data.aliyun.com

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

  • Indonesia: bi-ap-southeast-5.data.aliyun.com

Paso 3: Construya la URL de acceso sin inicio de sesión

1. Obtenga el nombre de dominio de Quick BI.

   Por ejemplo, el nombre de dominio del sitio de Quick BI en Hong Kong (China) es bi-cn-hongkong.data.aliyun.com/. Debe utilizar el nombre de dominio de su entorno específico.

2. Obtenga la URL de vista previa del informe.

   Las URL de la página de vista previa de los informes son las siguientes. Seleccione la que necesite.

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

   • Libro de trabajo: token3rd/report/view.htm

3. En la página de edición del informe, obtenga el ID del informe.

   • ID del panel

     En la página de edición del panel, obtenga el valor de pageId de la barra de direcciones.

   • ID del libro de trabajo

     En la página de edición del libro de trabajo, obtenga el valor del ID del libro de trabajo de la barra de direcciones.

4. Agregue a la URL de solicitud el nombre de dominio de Quick BI, la URL de vista previa del informe, el ID del informe y el AccessTicket que obtuvo en el paso 2.

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

   • Formato del libro de trabajo: https://<Quick BI domain name>/<Report preview URL>?id=<Report ID>&accessTicket=<AccessTicket>

Gestione los informes integrados

Puede realizar las siguientes operaciones con los informes integrados:

• Consultar informes integrados: en el cuadro de búsqueda de la página de lista de informes, introduzca una palabra clave del nombre del informe y haga clic en el icono para buscarlo.

  Puede acotar la búsqueda seleccionando el espacio de trabajo o el tipo de informe.

• Consultar la cantidad de informes integrados. Para obtener más información, consulte View the number of embedded reports.

• Eliminar un informe integrado: haga clic en el icono junto al informe para eliminarlo.

Consulte la cantidad de informes integrados

1. En la página principal de Quick BI, haga clic en Open Platform.

2. En el panel de navegación izquierdo, haga clic en Embedded Analytics.

   En la página Report Embedding, puede consultar la cantidad de informes integrados en sistemas de terceros.

• Transmita la altura del contenido del iframe a la página principal.

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

• La página principal envía un postMessage a la página del iframe para obtener la altura del panel.

  Nota:

  • El iframe es el que integra el panel de Quick BI.

  • Los datos transmitidos en el mensaje deben incluir { getDashboardHeight: true }.

  El siguiente bloque de código proporciona un ejemplo.

  // 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

  Un panel de Quick BI ajusta automáticamente su ancho al contenedor externo, lo que elimina la barra de desplazamiento vertical y la necesidad de ajustar el ancho manualmente.

<!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>

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. */
}