Quick BI:Basic Scheme for Report Embedding (New)

Step 1: Enable the report that you want to embed

You can embed a report only when the report is in the Published state.

You can activate report embedding from the Open Platform module:

1. On the Quick BI product homepage, follow the instructions shown in the following figure to go to the Embed Report page.

   

2. On the Embed Report page, select the target workspace and data object type, select the data object name from the drop-down list, and then click Enable Embed.

   If there are too many reports, you can also enter the report name to help you quickly search for the target report.

3. In the Report Embedding Configuration dialog box, set the following parameters.

   Parameter	Description
   Embedded Object	Select the embedded object. If you select Whole Page, the embedded object is the current dashboard. If you select a widget, the embedded object is a widget in the current dashboard.
   Display Configuration	Whether to carry the title of the current dashboard after embedding.
   Security Authentication Type and Ticket Link	Select Ticket authentication and generate a Ticket link. You can enter the URL of the ticket or click Generate to generate a ticket. . On the generated ticket page, you can set Bind User, Valid Duration, Watermark Parameters, and Access Times.
   Obtain the embed code	URL and Iframe are supported.

4. Click Copy.

Step 2: Obtain an AccessKey Ticket over HTTPS

In the example described in this topic, a dashboard that is created in a group workspace is used.

• If the account that you use to access dashboards has the development or analysis permissions, the account can be granted only the permissions on dashboards created by the account.

• If the account has the management permissions, you can grant all report permissions on the workspace.

  1. Follow the procedure to obtain the AccessKey ID and AccessKey secret, that is, the AccessKey ID and AccessKey secret.

     1. After you log on to the Quick BI console.

     2. On the Quick BI homepage, follow the instructions in the following figure to obtain the AccessKey ID and AccessKey secret.

        

  2. Obtain the Alibaba Cloud account ID, which is the aliyunUid.

     Log on to the Alibaba Cloud account and click in the upper-right corner of the profile picture to view the account ID.

     

  3. On the report editing page, obtain the report ID, that is, worksId:

     

  4. Get accessTicket

     Add the accessId, accessKey, aliyunUid, and worksId parameters obtained in the preceding step to the following request address and send a get request to obtain the accessTicket.

     https://bi-cn-hongkong.data.aliyun.com//openapi/ac3rd/ticket/create?worksId=xx&aliyunUid=xx&accessKey=xx&accessId=xx&validityTime=xx

     Note

     • The aliyunUid parameter is used only to check whether the current role has the permission to create an organization report. The role does not bind the identity of the third-party embedded report.

     • The validityTime parameter is optional. Valid values: 1 to 240. Default value: 240. Unit: minutes.

     • If you want to cancel the expiration of an accessTicket, you can send a POST request and specify the values of aliyunUid, accessId, accessKey, and accessTicket.

       http://bi-cn-hongkong.data.aliyun.com//openapi/ac3rd/ticket/invalid?aliyunUid=xx&accessId=xx&accessKey=xx&accessTicket=xx

https://bi-cn-hongkong.data.aliyun.com//token3rd/report/view.htm?id=<42****18ef6>&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6&cmptId=XXX

How do I resolve the "access report_tree unauthorized" error when a report is embedded?

Issue

The following figure shows the error message when you use the report third-party embedding feature.

Cause

You do not have the required permissions on the report in the corresponding group workspace.

Solution

You can perform the following operations to enable report permissions.

How can embedded Quick BI third-party reports adapt to height (PC side)?

Issue

If a Quick BI dashboard is embedded into a third-party system by using an Inline Frame (IFrame), the third-party system cannot obtain the height of the dashboard in the IFrame due to the security limits of the cross-origin resource sharing (CORS) policy of the browser. In this case, users may need to scroll down or up to view the dashboard.

Solution

When the Quick BI loads a dashboard, the height of the current dashboard is uploaded to the external page by using postMessage. The external pages can obtain the height and page ID of the dashboard by listening to events.

You can use one of the following methods to pass the height of a dashboard:

Sample code

<!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> indicates that the page body is highly adaptive, <page_Id> indicates the ID of the dashboard page, and accessTicket indicates the access token used to access the dashboard -->
        <script>
      // The URL of the dashboard in Quick BI. Configure the URL based on your business requirements.
      const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com'];
      function messageListener(event) {
        if (quickBIURL.includes(event.origin)) {
          // The height of the dashboard. This height is passed by using postMessage.
          console.log('Quick BI Dashboard Height:', event.data.height);
          // The page ID of the dashboard. This page ID is passed by using postMessage.
          console.log('Quick BI Dashboard Id:', event.data.pageId);
        }
      }
      // Listens to events before the dashboard is loaded.
      window.addEventListener('message', messageListener);
      // The IFrame that is used to embed the Quick BI dashboard.
      const iframe = document.querySelector('iframe');
       // Requests the height of the Quick BI dashboard.
      // The data passed into the message must contain { getDashboardHeight: true }.
      iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');
        </script>
    </body>
</html>

How do I set the width of a mobile page that is embedded in a third-party application by using an Iframe?

Issue

Due to the compatibility of Iframes in earlier versions of IOS, the actual width of iframes overflows, such as the overall left and right sliding of the dashboard, the fixed column table cannot slide, the chart display is truncated, and the pop-up box of the query control is misaligned.

Solution

Modify the Iframe style.

Follow the following sample code:

iframe {
    border-width: 0;
    min-width: 100%;
    width: 0;
    *width: 100%;
    height: 667px; /* The height needs to be static field and can be set dynamically after the screen height is obtained. height: 100% will have compatibility problems * /
}