Use global variables

Prerequisites

• Access the DataV console.

• You have entered the canvas editor.

• You have created three global variables: var_1, var_2, and var_3.

Passing as a static value

1. In the canvas editor, click the Global Variables tab.

2. Click the var_1 variable and set Source to Static Value.

3. Change the value of Initial Value to hello.

4. Click the icon next to Data Response Result and verify that the response is updated to hello.

   

Passing an asynchronous value by variable reference

1. In the canvas editor, click the Global Variables tab.

2. Click the var_1 variable and change the Initial Value to datav-hello.

3. Click the var_2 variable and set Source to Data Source Request.

4. Select a data source type.

   Data source type is API

   If you set Data Type to API, follow these steps.

   1. Set Request Method to GET and enter https://datav.com/:var_1 in the URL field.

      

      Note

      The URL is for demonstration purposes only and is not a real address. You must use your actual URL.

   2. Press F12 on your keyboard to open the Chrome developer console, and then switch to the Network tab.

   3. Click the refresh icon next to Data Response Result.

   4. The Network tab now shows two requests: one with a numeric Name and another with the Name datav-hello.

      

      

   Data source type is MySQL-compatible database

   If you set Data Type to MySQL-compatible database, follow these steps.

   1. Select an Existing Data Source. You can also create a new data source. For more information, see the documentation on Data Source Management.

   2. Enter the following SQL expression.

      

      select :var_1 as value

   3. Click the icon next to Data Response to view the response.

   Note

   • If your Data Source Type is Static Data or CSV File, you cannot use global variables.

   • For API data sources, the system automatically assigns values to variable parameters with the same name.

   • DataV provides an autocomplete feature for global variables. When you configure a data source, type a colon (:) and the editor will suggest all configured variable names for the current screen.

Passing as a URL parameter

1. In the canvas editor, click the Global Variables tab.

2. Click the var_3 variable and set Source to Get from URL Query.

3. Pass the value in the URL using a parameter assignment, such as https://datav.aliyun.com/v/editor/xxx?var_3=datav#__sketch__.

   Important

   Set the parameter before the hash symbol (#). The parameter name must be the same as the global variable name.

4. Click the refresh icon next to Data Response Result and check that the response is the modified content, datav, passed from the URL.

   

Passing as an interaction event parameter

1. In the canvas editor, click the Search box at the top. Enter Button and General Title, and add both widgets to the canvas.

2. Select the Button widget and click the Advanced tab in the configuration panel on the right.

3. In the Associate Global Variables section, turn on the When the button is clicked switch.

4. In the Update to Variable field, select the global variable var_1.

   

5. Switch to the Blueprint Editor. The global variable is automatically connected to the Button widget with a dashed line. This line indicates the reference relationship between the global variable and the widget.

   Note

   If you remove the global variable reference, the dashed line in the blueprint is also automatically deleted.

   

6. In the navigation pane on the left, select the Layer Node tab and drag the General Title widget to the blueprint.

7. The global variable var_2 is connected to the General Title widget with a solid line.

   Note

   Solid lines can be deleted. Dashed lines cannot.

8. You can add Logic Nodes and Logic Combinations to further process the retrieved data.

Filter reference

1. In the canvas editor, click the Search box at the top. Enter Button and General Title, and add both widgets to the canvas. Repeat the operation to add another button and general title widget.

2. Click the Button widgets and change their names to Get with getLocalValue Button and Get with getCallbackValue Button.

3. Click the General Title widgets and change their names to General Title-1 and General Title-2.

4. Select the Global Variables tab and add two global variables named name and test. Set a static value for each.

   • name variable

     [
       {
         "value": "The name variable was retrieved."
       }
     ]

   • test variable

     [
       {
         "value": "The test variable was retrieved."
       }
     ]

5. Set the text for the two buttons to Click to retrieve test with getLocalValue and Click to retrieve name with getCallBackValue.

6. Click the icon in the upper-left corner of the page to enter the Blueprint Editor.

7. Connect the widgets.

8. Add a filter and set the processing method for the serial data processing node.

   • getLocalValue

     return getLocalValue('test');

   • getCallbackValue

     return getCallbackValue('name');

9. Click Preview in the upper-right corner of the page to view the data retrieval details.

Related examples

For more information about global variables, see the following examples:

• Global variable demo

• How to use global variables to query by date

• How to use global variables for data screening

• How to use global variables for data distribution and data addition