Business intelligence (BI) has been widely applied in users' actual business processes. If BI is used as a standalone application platform, users have to frequently switch between different systems, such as CRM, ERP, or OA, during their daily work. Cumbersome login procedures and switching between application systems can interrupt business thinking and reduce efficiency. This not only hinders the promotion of BI within the enterprise but also makes it difficult to achieve a unified IT application management platform.
Therefore, by placing easy-to-use data analysis features and completed dashboard results directly in the UI of business system applications, the continuity and availability of business users' data insights can be ensured.
This article will use practical cases in business applications to help readers achieve the following business scenarios.

Case 1 #

Zhang Xiaoming wants to integrate BI's visualization and analysis capabilities into the operations platform, so that visual charts can be quickly generated and data insights obtained through page interactions such as clicking and dragging on the operations platform.
After conducting research, they decided to integrate the DataWind platform, import their own data sources into DataWind as datasets through data preparation, and embed the visual query page of this dataset into the operations platform. Afterwards, they can directly perform drag-and-drop data analysis on the operations platform, greatly improving data analysis efficiency.

Case 2 #

Wang Xiaohong wants to create an operations data dashboard and share it with different regional managers, hoping that each regional manager only sees data for their own region. In addition, these data dashboards can be integrated into the CRM system most commonly used by regional managers.
Xiaohong found that DataWind could meet the requirements for creating data dashboards. Additionally, DataWind's row-level permissions and custom filters also satisfy the platform's needs for data access control, and it can be quickly integrated into Xiaohong's own CRM system. Ultimately, Xiaohong decided to build the operations data dashboard by embedding the DataWind dashboard.

Case 3 #

Li Xiaohua needs to query massive amounts of product transaction records. Li Xiaohua wants to use a query tool that can handle large volumes of detailed data, supports a wide range of filtering operations, allows configuration of table and cell styles, and, when necessary, enables modification of field formulas for table columns. After confirming that DataWind meets the requirements, Li Xiaohua created a detailed data report in DataWind and embedded it into the product transaction management system, enabling every relevant operations team member to quickly query and obtain the desired data results.

To achieve the most convenient and efficient integration, you can use Iframe for connection. The steps are as follows.

Overview #

This operation must be completed by developers. The main steps are as follows:
Step 1. Obtain the URL of the target dashboard or chart
Step 2. Modify the link
Step 3. Generate the code

Step 1. Obtain the URL of the target dashboard or chart #

• Both of the following methods can be used to obtain the link for the target dashboard, chart, or big screen dashboard, and the results are the same.
• For the mobile version of the dashboard, only the second method can be used to obtain the link.

1. Obtain directly in the product #

Dashboard/chart

• Chart
  • Enter the dashboard preview mode
  • Click the right side of the chart you want to embed, and select "Embed chart"
    
  • When "Copy successful" is displayed, you can paste the link by right-clicking or using the keyboard shortcut Ctrl+V
• Dashboard
  • Enter the dashboard preview mode
  • Click the right side of the dashboard you want to embed, and select "Embed dashboard"
    
  • When "Copy successful" is displayed, you can paste the link by right-clicking or using the keyboard shortcut Ctrl+V.

Big screen dashboard

Select View on the list page as shown in the figure, then copy the browser URL after opening it.

2. Manual construction #

If manual construction is selected, proceed as follows. The underlined content represents variables, which will be explained in the parameter details below; other content is fixed.
Dashboard
$HOST/#/external/dashboard/$DASHBOARD_ID?appId=$APP_ID&inline=true
For example:

https://console.volcengine.com/bi#/external/dashboard/47610?appId=1010681&inline=true

Mobile dashboard
$HOST-h5/dashboard/?appId=$APP_ID&id=$DASHBOARD_ID&inline=true
For example:

https://console.volcengine.com/bi-h5/dashboard/?appId=1010681&id=47610&inline=true

Chart
$HOST/#/external/dashboard/$DASHBOARD_ID/$REPORT_ID?appId=$APP_ID&inline=true
For example:

https://console.volcengine.com/bi#/external/dashboard/47610/305962?appId=1010681&inline=true

Visual query
$HOST/#/dataQuery?appId=$APP_ID&inline=true
For example:

https://console.volcengine.com/bi#/dataQuery?appId=1010681&inline=true

Large screen
$HOST/vScreen/preview?appId=$APP_ID&id=$VSCREEN_ID&resizeMode=auto
For example:

https://console.volcengine.com/bi#/vScreen/preview?appId=1010681&id=11&resizeMode=auto

Parameter details:

https://console.volcengine.com/bi#/dashboard/47610?appId=1010681
plaintext

https://console.volcengine.com/bi#/dashboard/47610?appId=1010681

https://console.volcengine.com/bi#/dataQuery?appId=1010681&id=98850742&rid=306828&sid=22569

https://poc.volces.com/bi#/vScreen/4750?resizeMode=auto

Step 2: Add feature modification link #

Pass the feature parameter in the iframe URL to configure general features. The following is an explanation of this feature, and you can select the required features as needed.

{
  "dashboard": {                       // --- 仪表盘模块特性 ---
    "showHeader": true,                // 显示Header
    "showFavor": true,                 // 显示收藏
    "showOwner": true,                 // 显示owner
    "actions": [                       // 仪表盘操作，数组类型
      "refresh",                       // 刷新
      "fullscreen",                    // 全屏
      "share",                         // 分享
      "subscribe",                     // 订阅
      "snapshot",                      // 书签
      "auth",                          // 授权
      "edit",                          // 编辑
      "setAsDefaultDashboard",         // 设为默认仪表盘
      "exportImage",                   // 导出图片
      "embed",                         // 嵌出
      "accessStatistics"               // 访问统计
    ],
    "report": {                        // --- 仪表盘图表特性 ---
      "showHeader": true,              // 显示header
      "actions": [                     // 仪表盘图表操作，数组类型
        "imgExport",                   // 导出图片
        "excelExport",                 // 导出excel
        "pivotExport",                 // 导出透视表
        "copyToDashboard",             // 复制图表
        "embed",                       // 嵌出图表
        "createMonitor"                // 新建监控
      ],
    },
    "sheet": {                         // --- 仪表盘sheet特性 ---
      "tabPosition": "top"             // tab页显示位置，可选top/left
    },
  }
}

Feature description

Step 3: Generate code #

Assemble the code based on the information obtained above. For example, using the acquired dashboard link:

https://console.volcengine.com/bi#/external/dashboard/47610?appId=1010681&inline=true

Generate HTML code #

For example, the following code hides the dashboard header

<iframe allowfullscreen="true" src='https://console.volcengine.com/bi#/external/dashboard/47610?appId=1010681&inline=true&feature={"dashboard":{"showHeader":false}}' />

Usage example #

• If using the React framework, refer to the following example
• Pass the feature parameter in the iframe URL to configure general features. The type of feature is the feature configuration object after JSON.stringify. You can refer to the following iframe embedding code to hide the dashboard header

import React from 'react'
import ReactDOM from 'react-dom'

class EmbedComponent extends React.Component {
  render() {  
    return (      
      <iframe 
        allowFullScreen
        src={`https://console.volcengine.com/bi#/external/dashboard/47610?appId=1010681&inline=true&feature=${
          JSON.stringify(
            {
              dashboard: {    
                 showHeader: false
              }
            }
          )   
        }`}
      />    
    )  
  }
}

ReactDOM.render(<AeolusComponent />, document.querySelector('body'))