Dashboard embedding

Demonstration and logic

Demonstration

• Before embedding: Three dashboards are developed and displayed independently.

• After embedding: Three dashboards are developed independently, displayed centrally, and support interactive effects.

  The final result is shown below:

  

Logic implementation

The following example, based on the animation above, explains the logic behind dashboard embedding.

Example: A 3D map widget is added to the main dashboard as a background. Two child dashboards (Child Dashboard 1 and Child Dashboard 2) are embedded. Five button widgets control the visibility, loading, and unloading of the child dashboards. When a button in Child Dashboard 1 is clicked, data from its line chart is transferred to the line chart in Child Dashboard 2. The numbers from 1 to 7 in the diagram illustrate the data transfer process. The following diagram illustrates the logical relationship.

Scenarios

• Parallel development to improve efficiency.

  If a main dashboard contains numerous modules, you can assign each module as a child dashboard to different teams for parallel development. After development, you can embed all child dashboards into the main dashboard for a unified display.

• Content reuse to save resources.

  If multiple dashboards share visual content, such as widgets or data, you can encapsulate this content into a child dashboard. You can then use dashboard embedding to reuse this child dashboard across multiple main dashboards.

• Dynamically switch between multiple dashboards.

  If your business requires presenting different dashboards for various scenarios, you can use dashboard embedding to switch between them dynamically. By integrating all dashboards into a single main dashboard, you can use the load/show and unload/clear mechanisms for dynamic switching.

Limits

• The dashboard embedding feature is available only to users of the Professional Edition or higher. If you are using a lower edition, see Upgrade your product edition.

• You can only embed dashboards that have been published in the current workspace.

• Circular references are not supported. If a circular reference occurs, an error is reported on the editor page, and the content causing the reference is automatically hidden in preview and published modes. For example, if Dashboard A references Dashboard B, and Dashboard B references Dashboard C, then Dashboard C cannot reference Dashboard A or B, and Dashboard B cannot reference Dashboard A.

Prerequisites

• You have activated DataV-Board 7.0, Professional Edition or higher.

• You have planned and created the required dashboards.

  • Child dashboard: This is the dashboard that will be embedded. You must create, configure, and publish it first. For more information, see User guide.

  • Main dashboard: This is the dashboard where you will perform the embedding operation. You can create it as needed by using a template, using a blank canvas, or using AI to generate it.

Procedure

Follow these steps to embed a child dashboard into a main dashboard.

1. Step 1: Embed a child dashboard

2. Step 2: Configure the child dashboard

3. Step 3: Configure blueprint interactions

4. Step 4: Preview and publish the main dashboard

Step 1: Embed a child dashboard

1. Go to the canvas editor of the main dashboard.

   1. Access the DataV console.

   2. On the Workbench page, in the Data Dashboards area, hover over the target dashboard and click Edit. The canvas editor opens.

2. Embed the child dashboard.

   In the navigation pane on the left of the canvas editor, click Dashboard Embedding. Hover over the target dashboard and click Add to Canvas to embed it into the main dashboard.

   Note

   • The Dashboard Embedding area displays only published dashboards from the current workspace. By default, the latest published version of the selected dashboard is embedded.

   • Circular references are not supported. If a circular reference occurs, an error is reported on the editor page, and the content causing the reference is automatically hidden in preview and published modes. For example, if Dashboard A references Dashboard B, and Dashboard B references Dashboard C, then Dashboard C cannot reference Dashboard A or B, and Dashboard B cannot reference Dashboard A.

   • You can click the icon to switch project groups or click the icon to search for a dashboard by name.

Step 2: Configure the child dashboard

After a child dashboard is embedded, it appears as a single layer in the main dashboard. You can configure its style and advanced interactions as needed.

Style configuration

Click the child dashboard. In the Style tab on the right, you can configure the dashboard's position, opacity, ID, and other settings.

The following describes the related configuration items.

Advanced configuration

Click the child dashboard. In the Advanced tab on the right, you can define interactions and data transfer relationships between the child dashboard and other widgets or child dashboards. The following table describes the configuration items.

Step 3: Configure blueprint interactions

You can use blueprint interactions to enable data interactions or event pass-through between widgets and child dashboards and between different child dashboards.

Procedure

1. In the canvas editor, click the icon in the top menu bar to open the blueprint editor.

2. In the layer node list, hover over the target dashboard or widget and click the icon to add it to the blueprint canvas.

3. Connect the nodes to configure the blueprint interaction relationships and behavior logic.

   • Example 1: Widget interacts with a child dashboard. When a button is clicked, Child Dashboard 1 is loaded.

   • Example 2: Interaction between child dashboards.

     1. Child Dashboard 1: Defines the Emit Line Chart Data Event. This event is configured to emit the line chart data from Child Dashboard 1 when a button is clicked.

     2. Child Dashboard 2: Defines the Set Line Chart Data Action. When this action is triggered, it imports the received data into the line chart of Child Dashboard 2.

     3. Main Dashboard: Through blueprint interaction, when Child Dashboard 1 triggers the Emit Line Chart Data Event, Child Dashboard 2 executes the Set Line Chart Data Action. This process transfers the line chart data from Child Dashboard 1 to Child Dashboard 2, enabling data transfer between dashboards.

Configuration items

For dashboard embedding APIs, you can define custom events and actions in addition to the default system actions.

{ 
  // Movement type. Absolute positioning: to, relative positioning: by. Default: to.
    "positionType": "to",
  // Specified position. x-coordinate, y-coordinate.
  "attr": {
   "x": 0,
   "y": 0
   },
  // Animation method.
  "animation": {
    "enable": false,
    // Animation duration.
   "animationDuration": 1000,
    // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
   "animationEasing": "linear"
  }
}

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

Use custom APIs

Custom APIs are typically used for interactions between child dashboards. First, you define the required events or actions in the blueprint editor of a child dashboard. Then, you configure the interactions between the child dashboards in the blueprint editor of the main dashboard.

1. Define APIs in the child dashboard.

   1. Go to the blueprint editing page for the data dashboard.

   2. In the navigation pane on the left, click Dashboard API and define the required actions or events.

      Important

      • You can add multiple events or actions. If you change a defined event or action API, for example, by renaming it, the corresponding interaction in the blueprint may become invalid. You must then reconfigure the interaction.

      • You can configure the data processing logic for events or actions, such as serial data processing, to meet your business needs.

      

2. Implement interactions in the main dashboard.

   Go to the blueprint editor of the main dashboard and connect the nodes to configure the interaction logic between the child dashboards.

Step 4: Preview and publish the main dashboard

After you configure the main dashboard, click Preview in the upper-right corner of the editor to see the result. You can then publish the dashboard and deploy it to the relevant devices.

View reference relationships

You can view the reference relationships of a dashboard in two ways. You can click the editor page or published page links to quickly navigate to the content.

• Method 1: View in the canvas editor

  Note

  This method only lets you view reference relationships from the main dashboard.

  

• Method 2: View on the Workbench page

  Note

  This method lets you view reference relationships from either the main dashboard or a child dashboard. If the main dashboard has snapshots, the child dashboard's reference count includes the main dashboard's editor page, published page, and any snapshot pages.

  

Dashboard management

Log on to the DataV console. In the Workbench > Data Dashboards area, you can click the icon to perform management operations, such as copying, deleting, or transferring a dashboard. The following table describes the management operations for dashboards that use the embedding feature.

Example

Introduction

This example provides a complete, end-to-end process. It shows how to embed two child dashboards, Child Dashboard 1 and Child Dashboard 2, into a main dashboard to achieve the following effects:

• Centrally display two child dashboards in the main dashboard.

• Click a button in Child Dashboard 1 to transfer its line chart data to the line chart in Child Dashboard 2.

• Add four button widgets to the main dashboard to control the loading and unloading of Child Dashboard 1 and Child Dashboard 2.

Follow the instructions below to configure the child dashboards and the main dashboard.

Create and configure Child Dashboard 1

1. Create the data dashboard.

   1. Access the DataV console.

   2. Click All Applications > Create PC Dashboard. On the blank dashboard card, click + Create Dashboard. Follow the on-screen instructions to create a dashboard and name it Child Dashboard 1. After creation, you are automatically taken to the canvas editor.

2. Add and configure widgets.

   In this step, you will add a line chart and a button widget to be used for interaction later.

   • Follow the steps in the figure to add a line chart and replace its data with the test data.

     Line chart test data

     [
       {
         "x": "00:00",
         "y": 7,
         "colorField": "TagA"
       },
       {
         "x": "00:00",
         "y": 18,
         "colorField": "TagB"
       },
       {
         "x": "01:00",
         "y": 7,
         "colorField": "TagA"
       },
       {
         "x": "01:00",
         "y": 17,
         "colorField": "TagB"
       },
       {
         "x": "02:00",
         "y": 12,
         "colorField": "TagA"
       },
       {
         "x": "02:00",
         "y": 15,
         "colorField": "TagB"
       },
       {
         "x": "03:00",
         "y": 15,
         "colorField": "TagA"
       },
       {
         "x": "03:00",
         "y": 15,
         "colorField": "TagB"
       },
       {
         "x": "04:00",
         "y": 22,
         "colorField": "TagA"
       },
       {
         "x": "04:00",
         "y": 11,
         "colorField": "TagB"
       },
       {
         "x": "05:00",
         "y": 25,
         "colorField": "TagA"
       },
       {
         "x": "05:00",
         "y": 9,
         "colorField": "TagB"
       },
       {
         "x": "06:00",
         "y": 21,
         "colorField": "TagA"
       },
       {
         "x": "06:00",
         "y": 10,
         "colorField": "TagB"
       },
       {
         "x": "07:00",
         "y": 20,
         "colorField": "TagA"
       },
       {
         "x": "07:00",
         "y": 11,
         "colorField": "TagB"
       },
       {
         "x": "08:00",
         "y": 20,
         "colorField": "TagA"
       },
       {
         "x": "08:00",
         "y": 11,
         "colorField": "TagB"
       },
       {
         "x": "09:00",
         "y": 18,
         "colorField": "TagA"
       },
       {
         "x": "09:00",
         "y": 15,
         "colorField": "TagB"
       },
       {
         "x": "10:00",
         "y": 12,
         "colorField": "TagA"
       },
       {
         "x": "10:00",
         "y": 17,
         "colorField": "TagB"
       },
       {
         "x": "11:00",
         "y": 10,
         "colorField": "TagA"
       },
       {
         "x": "11:00",
         "y": 16,
         "colorField": "TagB"
       },
       {
         "x": "12:00",
         "y": 15,
         "colorField": "TagA"
       },
       {
         "x": "12:00",
         "y": 15,
         "colorField": "TagB"
       },
       {
         "x": "13:00",
         "y": 12,
         "colorField": "TagA"
       },
       {
         "x": "13:00",
         "y": 16,
         "colorField": "TagB"
       },
       {
         "x": "14:00",
         "y": 10,
         "colorField": "TagA"
       },
       {
         "x": "14:00",
         "y": 16,
         "colorField": "TagB"
       },
       {
         "x": "15:00",
         "y": 20,
         "colorField": "TagA"
       },
       {
         "x": "15:00",
         "y": 12,
         "colorField": "TagB"
       },
       {
         "x": "16:00",
         "y": 24,
         "colorField": "TagA"
       },
       {
         "x": "16:00",
         "y": 7,
         "colorField": "TagB"
       },
       {
         "x": "17:00",
         "y": 28,
         "colorField": "TagA"
       },
       {
         "x": "17:00",
         "y": 8,
         "colorField": "TagB"
       },
       {
         "x": "18:00",
         "y": 20,
         "colorField": "TagA"
       },
       {
         "x": "18:00",
         "y": 10,
         "colorField": "TagB"
       },
       {
         "x": "19:00",
         "y": 16,
         "colorField": "TagA"
       },
       {
         "x": "19:00",
         "y": 14,
         "colorField": "TagB"
       },
       {
         "x": "20:00",
         "y": 14,
         "colorField": "TagA"
       },
       {
         "x": "20:00",
         "y": 15,
         "colorField": "TagB"
       },
       {
         "x": "21:00",
         "y": 12,
         "colorField": "TagA"
       },
       {
         "x": "21:00",
         "y": 17,
         "colorField": "TagB"
       },
       {
         "x": "22:00",
         "y": 15,
         "colorField": "TagA"
       },
       {
         "x": "22:00",
         "y": 15,
         "colorField": "TagB"
       },
       {
         "x": "23:00",
         "y": 20,
         "colorField": "TagA"
       },
       {
         "x": "23:00",
         "y": 12,
         "colorField": "TagB"
       },
       {
         "x": "24:00",
         "y": 23,
         "colorField": "TagA"
       },
       {
         "x": "24:00",
         "y": 10,
         "colorField": "TagB"
       }
     ]

   • Follow the steps in the figure to add a button and change its style as needed.

3. Configure widget blueprint interactions.

   In this step, you will use a global variable and the dashboard embedding event API to facilitate data transfer. First, pass the line chart data to the global variable comData. Then, define a dashboard embedding event named Emit Line Chart Data. This event is triggered when the button is clicked, retrieving the data from the comData global variable and emitting it. You can use this event later to transfer data to Child Dashboard 2.

   

   1. In the upper-left corner of the canvas editor, click the icon to open the blueprint editor.

   2. Add widgets to the canvas.

      On the Layer Nodes tab on the left, hover over a widget and click the icon to add it to the blueprint canvas.

      Use this operation to add the line chart and button widgets to the canvas.

   3. Create and add a global variable.

      Follow the steps in the figure to create the global variable comData. After it is created, hover over the variable name and click the icon to add the global variable to the blueprint canvas.

   4. Add a data processing node.

      On the Logic Nodes tab on the left, hover over the Serial Data Processing node and click the icon to add the node to the blueprint canvas.

   5. Create and add a dashboard embedding event.

      Follow the steps in the figure to create and add the Emit Line Chart Data event to the canvas.

   6. Connect the nodes as shown in the figure and configure the serial data processing node to retrieve the global variable data.

4. In the upper-right corner of the blueprint editor, click Publish to publish Child Dashboard 1.

Create and configure Child Dashboard 2

1. Create the data dashboard.

   1. Access the DataV console.

   2. Click All Applications > Create PC Dashboard. On the blank dashboard card, click + Create Dashboard. Follow the on-screen instructions to create a dashboard and name it Child Dashboard 2. After creation, you are automatically taken to the canvas editor.

2. Follow the steps in the figure to add a line chart to the canvas for later interaction.

3. Define the dashboard embedding action API and configure interactions.

   In this step, you will define a custom action named Set Line Chart Data. This action will interact with the Emit Line Chart Data event from Child Dashboard 1. It transfers the data emitted by the event to the line chart in Child Dashboard 2.

   1. In the upper-left corner of the canvas editor, click the icon to open the blueprint editor.

   2. Add the widget to the canvas.

      On the Layer Nodes tab on the left, hover over the line chart widget and click the icon to add it to the canvas.

   3. Create and add the dashboard embedding action API.

      Follow the steps in the figure to create and add the Set Line Chart Data action to the canvas.

   4. Connect the nodes as shown in the figure to import the data received by the action API into the line chart.

4. In the upper-right corner of the blueprint editor, click Publish to publish Child Dashboard 2.

Create and configure the main dashboard

1. Create the data dashboard.

   1. Access the DataV console.

   2. Click All Applications > Create PC Dashboard. On the blank dashboard card, click + Create Dashboard. Follow the on-screen instructions to create a dashboard and name it Main Dashboard. After creation, you are automatically taken to the canvas editor.

2. Embed child dashboards and add button widgets.

   • Embed child dashboards: Follow the steps in the figure to embed Child Dashboard 1 and Child Dashboard 2 into the main dashboard. This centrally displays the content of both child dashboards.

     Note

     Adjust the size of the child dashboards as needed to prevent layers from overlapping, which could cause functional errors.

   • Add widgets: Follow the steps in the figure to add four button widgets to the main dashboard and change their display names. These buttons will be used to control the loading and unloading of the child dashboards.

3. Configure blueprint interactions.

   1. In the upper-left corner of the canvas editor, click the icon to open the blueprint editor.

   2. On the Layer Nodes tab on the left, hover over the relevant nodes and click the icon to add all nodes to the canvas.

   3. Connect the nodes as shown in the figure to configure interactions between the child dashboards and widgets.

      1. Transfer the line chart data from Child Dashboard 1 to the line chart in Child Dashboard 2.

      2. Use the button widgets to control the loading and unloading of the child dashboards.

4. In the upper-right corner, click Preview to see the effect on the main dashboard. You can adjust the dashboard content as needed.

5. In the upper-right corner, click Publish to publish the main dashboard.