Demo of the global variable feature-DataV(DataV)-阿里云帮助中心

Prerequisites

You have entered the canvas editor.

Example 1: Query by date

Add widgets.
1. At the top of the canvas editor, click Search, and then enter General Title and Time Picker.
2. Click the widgets to add them to the canvas.
Set a static global variable.
1. In the navigation pane on the left of the canvas editor, select the Global Variable tab.
2. Click New Variable. Rename the variable to date, enter Date value for the description, and set the initial value to 2023-07-19.
Set the data source for the General Title widget.
1. Select the General Title widget and then select the Data Source tab.
2. Set Data Source Type to Database, select an existing data source, and enter the following SQL statement.
  
  Note
  You must use a colon (:) to reference the global variable. For more information, see Global variable autocomplete.
3. The General Title widget displays the initial value of the global variable.
Configure the Time Picker interaction.
1. Select the Time Picker widget and then select the Advanced tab.
2. Turn on the Interaction Occurrence switch. For the time field, select the date variable.
  
  Note
  When you select a time, the value of the `date` variable is updated.
Preview the result.

In the upper-right corner of the canvas editor, click Preview to verify the settings.

Note
On the preview page, the General Title widget first displays the default value of the global variable, then updates to show the default value of the Time Picker. When you change the time, the widget reflects the selected value.
Set a dynamic global variable.
1. Return to the canvas editor. Change the source of the date global variable to Data Source Request.
2. Select a data source. In the SQL window, enter the query to retrieve the current time.
3. ```
select cast(curDate() as char) as date
```
4. Add a filter to extract the date value and pass it to the General Title widget.
```
return data[0].date;
```
5. View the input and output values of the filter.
6. The General Title widget now displays the dynamically retrieved time value.
Preview the result.

In the upper-right corner of the canvas editor, click Preview to verify the settings.

Note
On the preview page, the General Title widget first shows the dynamically retrieved time value. When you change the time, the widget updates to display the selected value.

Example 2: Implement data distribution

Add widgets.
1. At the top of the canvas editor, click Search, and then enter General Title and Ticker Board.
2. Click the widgets to add them to the canvas.
Set a static global variable.
1. In the navigation pane on the left of the canvas editor, select the Global Variable tab.
2. Click New Variable. Rename it to x and set the initial value.
```
[
  {
    "text": "I am text",
    "number": 123
  }
]
```
Set up the blueprint interaction.
1. In the upper-left corner, click the icon to open the blueprint editor.
2. Drag the layer node and the global variable node to the main blueprint canvas.
3. Click Logic Node and add two serial data processing nodes.
4. Connect the nodes.
5. Set the processing method for the serial data processing nodes.
  - Ticker Board
```
return [{
  value: data[0].number
}]
```
  - General Title
```
return [{
  value: data[0].text
}]
```
Preview the result.

In the upper-right corner of the canvas editor, click Preview to verify the settings.

Example 3: Implement dynamic data summation

Add widgets.
1. At the top of the canvas editor, click Search, and then enter Ticker Board.
2. Click the widget to add it to the canvas.
Set static global variables.
1. In the navigation pane on the left of the canvas editor, select the Global Variable tab.
2. Click New Variable. Create two global variables. Rename them to y and z, and set their initial values to 123 and 234 respectively.
Set up the blueprint interaction.
1. In the upper-left corner, click the icon to open the blueprint editor.
2. Drag the layer node and the global variable node to the main blueprint canvas.
3. Click Logic Node and add two serial data processing nodes.
4. Connect the nodes.
5. Set the processing method for the serial data processing nodes.
  - Node 1
```
return [{
  value: data + getCallbackValue(
    "z")
}]
```
  - Node 2
```
return [{
  value: data + getLocalValue(
    "y")
}]
```
Preview the result.

In the upper-right corner of the canvas editor, click Preview to verify the settings.
Set a dynamic global variable.

Change the source of the global variable y to Data Source Request and select a dynamic data source, such as an API or database.
Set up the blueprint interaction.
1. Click Logic Node and add a Timer.
2. Turn on the Loop switch and set the delay for the timer node to 3 seconds.
3. Connect the nodes.
Preview the result.

In the upper-right corner of the canvas editor, click Preview to verify the result. The ticker board updates every three seconds, reflecting the dynamic data summation.

Example 4: Implement data screening

Add widgets.
1. At the top of the canvas editor, click Search, and then enter Tab List and Line Chart.
2. Click the widgets to add them to the canvas.
3. Select the Tab List widget and then select the Data Source tab.
4. Modify the static data.
```
[
  {
    "id": 1,
    "content": "All"
  },
  {
    "id": 2,
    "content": "Type A"
  },
  {
    "id": 3,
    "content": "Type B"
  }
]
```
Set a static global variable.
1. Select the Line Chart widget, select the Data Source tab, and copy the full static data.
2. In the navigation pane on the left of the canvas editor, select the Global Variable tab.
3. Click New Variable. Create a global variable, rename it to data, and set its initial value to the full line chart data that you copied.

Set up the blueprint interaction.

In the upper-left corner, click the icon to open the blueprint editor.
Drag the layer node to the main blueprint canvas.
Click Logic Node and add one serial data processing node.
Connect the nodes.

Set the processing method for the serial data processing node.

let result = getCallbackValue("data") // Get the global variable data.
return result.filter(i => {
  if (data.content == "All") {
    return result; // If the content of the tab list is "All", return all data.
  } else {
    return i.colorField == data.content; // If the content of the tab list is "Type A" or "Type B", return only the corresponding data.
  }
});

Preview the result.

In the upper-right corner of the canvas editor, click Preview to verify the settings.