example of using global variables - DataV - Alibaba Cloud Documentation Center

This topic demonstrates how to use the global variable feature through four examples.

Prerequisites

Ensure you are in the canvas editor.

Example 1: Implement query by date

Add widgets to the canvas.
1. In the canvas editor, click Search at the top, enter General Title and Time Picker, and add them to the canvas.
2. Click to add widgets to the canvas.
Set static global variables.
1. In the canvas editor, select the Global Variables tab on the left side.
2. Click New Variable, name it date, describe it as date value, and set its initial value to 2023-07-19.
Configure the data source for the General Title widget.
1. Select the General Title widget and navigate to the Data Source tab.
2. Set the data source type to database and select an existing data source. Then, input the following SQL statement in the SQL input box.
  Note
  Note: Use a colon to introduce the global variable. For more information, see the referenced document.
3. Observe the data return results and the General Title widget's display, which should now show the initial value set for the global variable.
Configure the Time Picker widget for interaction.
1. Select the Time Picker widget and go to the Advanced tab.
2. Enable the interaction occurrence switch and link it to the date variable under the time field.
  Note
  This configuration ensures that any time selection updates the date value.
Preview the configuration.
Click Preview in the upper right corner of the canvas editor to test the settings.
Note
The preview page initially displays the default value of the global variable, followed by the Time Picker's default value. Changing the time will update the General Title to reflect the selected time value.
Set dynamic global variables.
1. Return to the canvas editor and change the global variable date's source to Data Source Request.
2. Select the created data source and input the query code to fetch the current time in the SQL window.
3. ```
select cast(curDate() as char) as date
```
4. Add a filter to import the date value into the General Title.
```
return data[0].date;
```
5. Examine the input and output values of the filter.
6. Observe the General Title widget, which now displays the dynamically obtained time value.
Preview the dynamic results.
Click Preview in the upper right corner of the canvas editor to test the dynamic settings.
Note
The preview page initially displays the dynamically obtained time value of the global variable. Changing the time will synchronize the General Title to show the selected time value.

Example 2: Implement data distribution

Add widgets to the canvas.
1. In the canvas editor, click Search at the top, enter General Title and Number Ticker Board, and add them to the canvas.
2. Click to add widgets to the canvas.
Set static global variables.
1. On the left side of the canvas editor, select the Global Variables tab.
2. Click on New Variable, assign the name x to it, and specify the initial value.
```
[
  {
    "text": "text",
    "number": 123
  }
]
```
Configure blueprint interaction.
1. Click the icon in the upper left corner to access the blueprint editor.
2. Drag the layer and global variable nodes onto the main canvas of the blueprint.
3. Select Logic Node and add two serial data processing nodes.
4. Connect the nodes as shown.
5. Define the processing methods for the serial data processing nodes.
  - For the Number Ticker Board:
```
return [{
  value: data[0].number
}]
```
  - For the General Title:
```
return [{
  value: data[0].text
}]
```
Preview the configuration.
Click Preview in the upper right corner of the canvas editor to test the settings.

Example 3: Implement dynamic data summation

Add widgets to the canvas.
1. In the canvas editor, click Search at the top, enter Number Ticker Board, and add it to the canvas.
2. Click to add widgets to the canvas.
Set static global variables.
1. On the left side of the canvas editor, select the Global Variables tab.
2. Click New Variable and create two global variables named y and z, with initial values of 123 and 234 respectively.
Configure blueprint interaction.
1. Click the icon in the upper left corner to access the blueprint editor.
2. Drag the layer and global variable nodes onto the main canvas of the blueprint.
3. Select Logic Node and add two serial data processing nodes.
4. Connect the nodes as shown.
5. Define the processing methods for the serial data processing nodes.
  - For Node 1:
```
return [{
  value: data + getCallbackValue(
    "z")
}]
```
  - For Node 2:
```
return [{
  value: data + getLocalValue(
    "y")
}]
```
Preview the configuration.
Click Preview in the upper right corner of the canvas editor to test the settings.
Set dynamic global variables.
Change the source of the global variable y to Data Source Request and select a dynamic data source such as an API or database.
Configure blueprint interaction.
1. Select Logic Node and add a Timer.
2. Activate the Loop switch and set the timer node's delay to 3 seconds.
3. Connect the nodes as illustrated.
Preview the dynamic results.
Click Preview in the upper right corner of the canvas editor to validate the results. The Number Ticker Board will update every three seconds, demonstrating dynamic data summation.

Example 4: Implement data screening

Add widgets to the canvas.
1. In the canvas editor, click Search at the top, enter Tab List and Line Chart, and add them to the canvas.
2. Click to add the Tab List and Line Chart widgets to the canvas.
3. Select the Tab List widget and navigate to the Data Source tab.
4. Alter the static data.
```
[
  {
    "id": 1,
    "content": "All"
  },
  {
    "id": 2,
    "content": "Type A"
  },
  {
    "id": 3,
    "content": "Type B"
  }
]
```
Set static global variables.
1. Select the Line Chart widget, navigate to the Data Source tab, and copy the full static data.
2. In the canvas editor, select the Global Variables tab on the left side.
3. Click New Variable, create a global variable named data, and set its initial value to the copied full data from the Line Chart.

Configure blueprint interaction.

Click the icon in the upper left corner to access the blueprint editor.
Drag the layer node onto the main canvas of the blueprint.
Select Logic Node and add a serial data processing node.
Connect the nodes as shown.

Define the processing method for the serial data processing node.

let result = getCallbackValue("data") // Get 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 configuration.
Click Preview in the upper right corner of the canvas editor to test the settings. The preview will demonstrate the data screening functionality in action.