Widget interaction configuration

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.

Similarly, associate an interaction occurrence with the Tab List: if the Tab ID is 2, the column chart executes 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.

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.