How to configure widget interaction - DataV - Alibaba Cloud Documentation Center

Interaction events in data dashboards facilitate intuitive and convenient data exploration and analysis by enabling interactions between widgets. This topic introduces how to configure interaction events and global variable associations in the advanced panel of widgets.

Scenarios

Without interactions, widgets operate independently and cannot perform filter interactions. Widget interaction configuration is essential in scenarios such as:

Controlling the display or hiding of layers with a switch.
Displaying data with different meanings by clicking a TAB tag.
Showing detailed data for a selected province on a map in a pivot table.
Viewing sales data at various time points using a time selector.

In essence, advanced widget configuration is necessary to control the content displayed on data dashboards.

Related concepts

Interaction Events

Events are user or browser actions on a webpage, such as clicks, mouse movements, keyboard inputs, or data request completions. These events can be monitored, and upon occurrence, specific code is executed to carry out certain operations. By themselves, these behaviors are simply signals that an event has occurred.

Interaction Actions

Actions are the responses of widgets to events. For instance, displaying a chart when a user clicks a button.

Relationship between the Two

Events and actions have a trigger-and-response relationship. Events serve as triggers, prompting the execution of corresponding actions.

Action Trigger Conditions

Trigger conditions are the criteria that determine when an action should be executed in response to an event.

Principle explanation

Widget interaction configuration operates on the premise that users initiate interaction events. Upon the system's verification that the action trigger conditions have been satisfied, the receiving object will engage with the event and carry out the intended interaction action. Should the action trigger conditions not be fulfilled, the process terminates automatically. Users may opt to forego setting action trigger conditions, resulting in the receiving object immediately performing the interaction action.

For example, displaying the column chart widget when the first Tab in a Tab list is clicked illustrates the principle.

Operation flow

In the data dashboard, select a widget (trigger object) and use the advanced panel to set up interaction events, define action trigger conditions, specify interaction actions, and select receiving objects to finalize the interaction event configuration. Global variables can be selected as receiving objects to refresh global variables.

Important

Receiving objects can be Layer Widgets or Global Variables.

Prerequisites

You are logged on to the DataV console.
You have accessed the canvas editor page.

Interaction events

Interaction between widgets

The following example shows how to configure interaction events to toggle the display of a column chart by clicking a Tab.

The relationships between widgets are as follows:

Add a Column Chart widget and a Tab List widget from the Controls > Selection category to the canvas.
Choose the Tab List widget, update its data source, and set the Tabs to "Show" and "Hide".
Configure an interaction event for the Tab List to display the column chart when the first tab is clicked.
1. Select the Tab List, navigate to the Advanced panel on the right, and click the Interaction Events icon to add an interaction event for tab clicks. The Enable Event switch is enabled by default.
2. Choose the Event Type and add the When Tab Is Clicked event.
  Note
  To view the description of the response parameters for the current event, click the icon .
3. Click the icon to activate the Action Trigger Conditions switch.
4. Click Add Condition to configure the condition id equals 1, indicating the first tab is clicked. For detailed instructions, see how to use the condition tree.
  Note
  Alternatively, switch to code edit mode and use JavaScript syntax for advanced configuration.
5. Click the Interaction Action icon on the right , and add an interaction action.
6. Select the widget and action to be triggered, setting it to display as a column chart.
  Note
  To navigate to the blueprint and view interaction actions, click the icon. Click the icon to view the input parameter description for the current action.
  The configuration for different interaction actions will vary; please refer to the specific context.
In the same vein, associate an interaction occurrence with the Tab List: If the Tab ID is 2, the column chart will execute a hide action.
To preview the effect, click the Preview button in the upper-right corner. Select the Show tab to display the column chart, or the Hide tab to conceal it.
To access the blueprint editor, click the icon located in the upper left corner of the page. Here, you can examine the interaction relationships that the system has automatically generated. The Single-path Judgment node's condition is specified in the Action Trigger Condition.
(Optional) Modify the trigger conditions, response actions, and corresponding filters as needed.
Note
- For more complex interactions, please configure them using the blueprint editor.

Interaction between widgets and global variables

This example illustrates how widgets interact with global variables through interaction occurrences. Clicking on the General Title widget triggers the display of content from the Tab List widget, showcasing the dynamic changes in the global variable visually.

Note

The blueprint editor can also be utilized to execute this interaction scenario. For detailed instructions, see the demo.

The interaction diagram is as follows:

Create a global variable called content under Global Variables.
Add the Tab List widget from the Controls > Selection Class category, along with the General Title widget, to the canvas.

Select the General Title widget and link it to the Global Variable content in the data source panel on the right. Apply a filter to format the content appropriately for the widget.

// The data input parameter represents the value passed in by the content variable. After being processed by the filter, it is given to the widget in the correct format.
function filter(data) {
   return [{
      value: data
  }];
}

Configure the Tab List to change the value of the global variable when a tab is clicked.
1. Select the Tab List widget. In the right-side Advanced panel, click the Interaction Occurrences icon to add an interaction occurrence for Tab clicks. The Enable Event switch is activated by default.
2. Select Occurrence Type and add the When Tab Is Clicked occurrence.
  Note
  Click the icon next to the occurrence to view the response parameter description of the current occurrence.
3. Click the Interaction Action icon on the right side of , and add an interaction action.
4. Select the object to respond as the Global Variable content, with the action set to Import Data.
5. Switch to Dynamic Parameter Configuration, create a filter, and add the following code. Process the data from the Tab click event, and import the returned value into the Global Variable content.
```
// After being processed by the filter, obtain the final value needed by the global variable.
function filter(data) {
  return data.content;
}
```
To see the preview effect, click Preview in the upper right corner. When you click on various Tabs, the General Title will show the content corresponding to the selected Tab.

Associate global variables (not recommended)

Important

The interaction occurrence module now includes the functionality previously provided by associating global variables, which is soon to be deprecated. It is not recommended for future use.

The following example updates global variables through clicking a column chart.

Add a Column Chart widget to the canvas.
After selecting the widget, navigate to the Advanced panel on the right. Find the Associate Global Variables option and activate the interaction toggle When The Legend Is Clicked.
In the value field, select a previously created global variable.
Note
- Once a variable name is designated as a global variable, it can be used to retrieve parameter values in widgets that are linked to this global variable. To differentiate between parameters, assign unique names to each global variable.
- For more information on the use of global variables, see Using global variables.
Right-click on the selected widget and choose Enter Blueprint Editor. Notice how the global variable is automatically linked to the widget by a dashed line.
(Optional) You may include a Data Processing node or other Logic Nodes to perform additional operations. For examples, refer to Passing parameters for interaction occurrences.

Instead of the above method, it is now recommended to use interaction occurrences for associating global variables.

Upon clicking the Legend in a column chart, the Object global variable var_r9r54 initiates the Import variable data Action. This action retrieves data by applying a filter to the results generated by the event.

      // Structure thrown by the click event
      {
        "value": "",
        "checked": false
      }

      // After processing through the filter, obtain the final value required for the global variable.
      function filter(data) {
        return data.value;
      }

FAQ

After configuring advanced interactions, why can't some connections be deleted in the blueprint editor?

The settings that associate global variables in interactions cannot be deleted in the blueprint editor. You need to shut them down in the advanced panel.