Tutorials for common Blueprint Editor use cases

Case overview

Dynamically pass parameters when requesting a data API

This case demonstrates how to pass dynamic parameters when you request a data API to achieve data linkage between a Tab widget and a Ticker Board widget.

The configuration steps are as follows. For a detailed demonstration, see Dynamically pass parameters when you request a data API.

1. Add the Tab and Ticker Board widgets to the canvas editor and configure their data sources. Configure dynamic parameters in the format of :parameter_name.

2. Import the widgets that require interaction into the Blueprint Editor. Connect the When Tab Clicked event to the Request Data API action of the Ticker Board widget. Then, write a processing method in the sequence node.

   Note

   When a tab is clicked, a data request is triggered for the Ticker Board. The Ticker Board then adds the parameter year:data.content and requests the data again. For example, if data.content is 2020, the post parameter for the API request becomes year:2020, and the sql condition becomes where year=2020.

Dynamically control widget styles

This case demonstrates how to use the Blueprint Editor to dynamically control the style of a Ticker Board widget. The widget's value is displayed in red if it is greater than 60. Otherwise, the value is displayed in green.

The configuration steps are as follows. For a detailed demonstration, see Dynamically control widget styles.

1. In the configuration pane of Ticker Board A, copy the widget configuration. Examine the configuration hierarchy to find the field to modify. In this case, the field to modify is the value field.

2. Import the widget into the Blueprint Editor. Connect the When Data API Request is Complete event of the Ticker Board to the Update Ticker Board Configuration action in the sequence data processing node. Then, write a processing method in the sequence node.

   Note

   After the request is complete, the Ticker Board checks the value in the data. If the value is greater than 60, the number color is updated to red. Otherwise, the color is updated to green.

   

Display the sum of data from multiple widgets

This case uses the Blueprint Editor to display the sum of real-time data from two Ticker Board widgets, A and B, in a third Ticker Board widget named total.

The configuration steps are as follows. For a detailed demonstration, see Display the sum of data from multiple widgets.

First, add the widgets to the canvas editor and configure their data sources. Then, import the widgets into the Blueprint Editor. Connect the widget interactions as shown in the following figure, and write the processing methods in the sequence nodes.Processing method for the sequence node of Ticker Board A:Processing method for the sequence node of Ticker Board B:

Demos

Dynamically pass parameters when you request a data API

1. Add the Tab and Ticker Board widgets to the canvas editor and configure their data sources.

   Note

   • You can test the dynamic parameters. To preview the result, you can directly change the suffix in the URL.

   • Ignore any errors that occur because parameters are not included on the edit page.

2. After the widgets are configured, select the Tab and Ticker Board widgets in the Layers pane on the left. Right-click and select Export to Blueprint Editor.

3. On the Blueprint Editor page, add a component node and a Serial Data Management node from the Import Node bar on the left to the canvas. Connect the nodes as shown in the following figure. You also need to configure dynamic parameter passing and a method to call the data API for the Serial Data Processing node. For more information about dynamic parameter passing, see the relevant documentation.

   return { year: data.content }; 

   For more information about how to request data, see:

   return { year: data.content }; 

4. After the configuration is complete, right-click a connection line and select Record Log to set up blueprint logs. Click the Test Preview icon in the upper-right corner to view the preview.

5. For more information about how to dynamically pass parameters when you request a data API, see How to dynamically pass parameters when requesting a data API.

Dynamically control widget styles

1. In the Blueprint Editor canvas, add a Sequence Data Processing node and connect the nodes as shown in the following figure. Then, add a method for the sequence data processing node.

   The following code example shows how to configure the number color style based on the value after the data API request is complete.

   return data[0].value - 40 >= 0 ? {
     "counter": {
       "numbers": {
         "textStyle": {
           "color": "#18F8B8"// The color to be modified
         }
       }
     }
   } : {
       "counter": {
         "numbers": {
           "textStyle": {
             "color": "#00C0FF"
           }
         }
       }
     }

2. For more information about how to dynamically control widget styles, see How to dynamically control component styles.

Display the sum of data from multiple widgets

1. On the canvas editor page, add a Ticker Board widget and name it total Ticker Board. Then, right-click the widget and select Export to Blueprint Editor.

2. In the Import Node pane on the left of the Blueprint Editor page, click the total Ticker Board node to add it to the Blueprint Editor canvas.

3. In the Blueprint Editor canvas, add a Global node and a Sequence node. Connect the nodes as shown in the following figure. For more information about how to set temporary page variables, see Global node.

4. After connecting the nodes, set the methods for the sequence nodes.

   • Set the sequence node connected to Ticker Board B. The following is the sample code:

     return {
       data:[
         {
           name:"data_b",  // You can customize the variable name. Make sure it is unique.
           value:data[0].value || 0
         }
       ]
     };

     The following is the sample code for the second processing method:

     let data_a = getLocalValue('data_a') || 0;
     let res = data && data.length !== 0 ? data[0].value + data_a : data_a
     return [{ value: res }]; 

   • Set the sequence node connected to Ticker Board A in the same way. The following is the sample code:

     return {
       data:[
         {
           name:"data_a",  // You can customize the variable name. Make sure it is unique.
           value:data[0].value || 0
         }
       ]
     };

     Sample code for the second processing method:

     let data_b = getLocalValue('data_b') || 0;
     let res = data && data.length !== 0 ? data[0].value + data_b : data_b
     return [{ value: res }]; 

5. After you configure the blueprint interaction, you can view the preview.

   Note

   If you have many data sources, the implementation in DataV can be complex. We recommend that you set up the data sources in advance.

6. For more information about how to display the sum of data from multiple widgets, see How to display the sum of real-time data.