Frequently asked questions about the Quick BI open platform-Quick BI(Quick BI)-阿里云帮助中心

This topic answers frequently asked questions about using the Quick BI open platform.

Resolve the "access report_tree unauthorized" error

When you embed a report into a third-party application, you might encounter the "access report_tree unauthorized" error.

Cause

Report permissions are not enabled in the corresponding workspace.

Resolution

Follow these steps to enable report permissions.

On the Quick BI homepage, click Open Platform.
In the left-side navigation pane, click Embedded Analytics.
Click Create Report Embedding.
On the Create Embedded Report page, select the report that you want to embed.
Click Enable Embedding.

Auto-adjust height for embedded dashboards

When you use an Iframe to embed a Quick BI dashboard into a third-party application, scroll bars may appear on the dashboard. This issue occurs because browser cross-domain security restrictions prevent the parent page from retrieving the height of the content within the Iframe.

Resolution

To resolve this, Quick BI uses the postMessage API to send the dashboard's height to the parent page when the dashboard loads. The parent page can then use an event listener to receive the height and ID of the dashboard.

You can implement this in two ways:

Quick BI automatically sends the Iframe content height to the parent page.

// The URL of Quick BI. You can add other URLs if needed.
const quickBIURL = ['https://bi.aliyun.com'];

function messageListener(event) {
  if (quickBIURL.includes(event.origin)) {
    // The height sent by postMessage
    console.log('Quick BI Dashboard Height:', event.data.height);
    // The dashboard page ID sent by postMessage
    console.log('Quick BI Dashboard Id:', event.data.pageId);
  }
}

// Add the event listener before the dashboard loads
window.addEventListener('message', messageListener);

The parent page actively requests the dashboard height from the Iframe page.

The following code provides an example:

// The URL of Quick BI. You can add other URLs if needed.
const quickBIURL = ['https://bi.aliyun.com'];

function messageListener(event) {
  if (quickBIURL.includes(event.origin)) {
    // The height sent by postMessage
    console.log('Quick BI Dashboard Height:', event.data.height);
    // The dashboard page ID sent by postMessage
    console.log('Quick BI Dashboard Id:', event.data.pageId);
  }
}

// Add the event listener before the dashboard loads
window.addEventListener('message', messageListener);

// Actively request the height of the Quick BI dashboard
// The Iframe that embeds the Quick BI dashboard
const iframe = document.querySelector('iframe');
// The data in the message must include { getDashboardHeight: true }
iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');

Note

The width of a Quick BI dashboard automatically adjusts to its parent container. Therefore, horizontal scroll bars do not appear, so no width adjustment is needed.

Complete example

<!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" 
      // <pageId> is the dashboard page ID, and <accessToken> is the access token for the dashboard.
      src="https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=<pageId>&accessToken=<accessToken>
      scrolling="no" 
      frameborder="0" 
      width="100%" 
      height="600">
    </iframe>

        <script>
      // The URL of Quick BI. You can add other URLs if needed.
      const quickBIURL = ['https://bi.aliyun.com'];

      function messageListener(event) {
        if (quickBIURL.includes(event.origin)) {
          // The height sent by postMessage
          console.log('Quick BI Dashboard Height:', event.data.height);
          // The dashboard page ID sent by postMessage
          console.log('Quick BI Dashboard Id:', event.data.pageId);
        }
      }

      // Add the event 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 height of the Quick BI dashboard
      // The data in the message must include { getDashboardHeight: true }
      iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');

        </script>
    </body>
</html>

Set width for embedded mobile pages

Due to compatibility issues with Iframes on older versions of iOS, the actual width of the Iframe may overflow its container. This can cause issues such as the entire dashboard scrolling horizontally, fixed-column tables becoming unscrollable, charts being truncated, and query control pop-ups being misaligned.

Resolution: Modify the Iframe's CSS styles.

Modify your code as follows:

iframe {
    border-width: 0;
    min-width: 100%;
    width: 0;
    *width: 100%;
    height: 667px;  // A fixed value must be used for the height. You can set this dynamically after retrieving the screen height. Using height: 100% can cause compatibility issues.
}