All Products
Search
Document Center

Quick BI:Basic Solution for Report Embedding

Last Updated:Aug 16, 2024

Quick BI allows you to embed reports (such as dashboards and workbook) in a workspace into other systems to integrate them with other application systems. The following describes how to embed a report into a third-party system. This topic is applicable to the Pro and Professional editions.

Limits

  • The Basic edition only supports embedding dashboards and workbook tables.

  • For users who need to embed the spreadsheet page into a third-party environment: Some system browsers prohibit writing cookies into pages that are embedded in non-homologous iframes, resulting in failure to submit data on complex spreadsheet pages. For example, in the enterprise WeChat built-in browser of iOS system, the complex form filling page embedded in the third-party environment is opened, the data is filled in and submitted, and the data submission fails.

    Therefore, we recommend that you use the workbook filling function directly through the Quick BI platform.

Background

  • If you need to embed and apply Quick BI reports to your system, you can set up the report embedding feature.

    • When you use the Quick BI Advanced Edition, data permissions cannot be distinguished after a third-party report is embedded, and row-level permissions cannot take effect after the report is embedded. The data permissions of the third-party report are the same as those of the author of the report, and the embedding security enhancement scheme is not supported.

    • When you use the Quick BI Professional Edition, third-party reports can be embedded to differentiate data permissions. The Professional Edition allows different users to view different data in the same report, and allows you to embed security enhancement solutions. For more information, see Security enhancement solutions for embedding data in reports.

  • The international site currently has five sites with the following domain names:

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

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

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

    • French Fork, Germany: bi-eu-central-1.data.aliyun.com

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

Note

In this topic, the domain name of the China (Hong Kong) region is used as an example. If you use other websites, replace it with the domain name of the corresponding website.

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.

    image

  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. image.png

    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.

    image

    Note

    On the page that is used to generate a ticket, you can set only the Valid Duration parameter in the Basic Schemes section.

    If the edition that you purchased supports the Enhanced Security Scheme, you can set the Bind User, Valid Duration, Watermark Parameters, Access Times, and Global Parameters parameters. For more information, see Enhanced security schemes for report embedding and parameter passing.

    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.

        image

    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.

      image.png

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

      image

    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

Step 3: Create a logon-free URL

Note

This solution does not support binding authentication. By default, the report owner is used to access the report.

The following table describes the splicing process and examples.

Step

Dashboard example

Workbook example

1. Obtain a Quick BI domain name

bi-cn-hongkong.data.aliyun.com/

bi-cn-hongkong.data.aliyun.com/

2. Obtain the preview report URL

token3rd/dashboard/view/pc.htm

token3rd/report/view.htm

3. Obtain the report ID

dd0****83f

42****18ef6

4. Obtain an AccessTicket

fd138bcb-****-4fde-b413-81bcee59bdb6

fd138bcb-****-4fde-b413-81bcee59bdb6

The splicing format and report URL are as follows.

  • The dashboard is in the format of https://<Quick BI domain name>/<Preview report URL>?pageId=<report ID>&accessTicket=<AccessTicket>. The generated URL is as follows:

    https://bi-cn-hongkong.data.aliyun.com//token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
  • The format of the workbook is https://<Quick BI domain name>/<Preview report URL>?id=<report ID>&accessTicket=<AccessTicket>. The generated URL is as follows:

    https://bi-cn-hongkong.data.aliyun.com//token3rd/report/view.htm?id=<42****18ef6>&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
  1. Obtain the Quick BI domain name.

    For example, Quick BI the domain name of the China (Hong Kong) website is bi-cn-hongkong.data.aliyun.com/, the environment-specific domain name prevails.

  2. Gets the preview report URL.

    The URL of the preview page corresponding to the report is as follows. You can select the URL as needed.

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

    • spreadsheets: token3rd/report/view.htm

  3. On the report editing page, obtain the report ID.

    • Dashboard ID

      On the dashboard edit page, obtain the value of the dashboard pageId in the address bar. image

    • Spreadsheet ID

      On the workbook editing page, obtain the value of the workbook ID in the address bar. image

  4. Add the Quick BI domain name, preview report URL, report ID, and AccessTicket parameters obtained in Step 2 to the following request URL.

    • https://<Quick BI domain name>/<preview report URL>?pageId=<report ID>&accessTicket=<AccessTicket>

    • https://<Quick BI domain name>/<preview report URL>?id=<report ID>&accessTicket=<AccessTicket>

Manage embedded reports

For reports that are embedded into third-party systems, you can perform the following operations:

  • Query embedded reports: On the Reports page, enter a report name keyword in the search box and click the 查询icon to query the report.

    You can select a workspace or a report type to narrow down the query range.

  • View the number of embedded reports. For more information, see View the number of embedded reports.

  • Delete an embedded report: Click the icon next to the 删除report to delete the report.

View the number of embedded reports

  1. On the Quick BI product homepage, click Open Platform.

  2. In the left-side navigation pane, click Embedded Analysis.

    On the Report Embedding page, you can view the number of reports that are embedded in third-party reports. image

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

Problem description

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

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. image.png

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

Problem description

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.

Solutions

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:

  • Quick BI passes the height of the IFrame to external pages in an active manner.

    // Quick BI the address. If you use another address, you can add the address.
    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 external page actively obtains the dashboard height by using postMessage to the Iframe page.

    The following information is displayed:

    • Use the IFrame that is used to embed the Quick BI dashboard.

    • The data passed into the message must contain { getDashboardHeight: true }.

    The following code block provides an example:

    // Quick BI the address. If you use another address, you can add the address.
    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);
    // Requests the height of the Quick BI dashboard.
    // The IFrame that is used to embed the Quick BI dashboard.
    const iframe = document.querySelector('iframe');
    // The data passed into the message must contain { getDashboardHeight: true }.
    iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');
    Note

    Quick BI the width of the dashboard adapts to the outer container, the vertical scroll bar does not appear and does not need to be adapted to the width.

Usage 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"
    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?

Problem description

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