Interactions Between Widgets

Scenario

Interactions between widgets are the interaction events between different widgets on the same page. Widgets can function as triggers and responders for each other. Widget behaviors, global variables, and custom actions can be defined based on user-defined events.

Interactions Between Widgets

1. Create a blank page. For details, see Creating a Page Using an Empty Canvas.
2. On the large screen development page, drag the Custom Frame widget from All > Decorate to the canvas.
   Figure 1 Dragging Custom Frame to the canvas
   

3. Drag the Tabs widget from the All > Menu to the Custom Frame widget.
   Figure 2 Dragging the Tabs widget to the Custom Frame widget
   

4. Increase the number of tabs and set the tab name.
   1. Select the tab widget and click above the widget.
   2. Set the number of tabs to 4 in the configuration.
      Figure 3 Increasing the number of tabs
      
   3. Change the name of a tab.
      Figure 4 Changing the tab name
      
   4. Adjust the relative positions of the rectangle decoration and tab widgets.

5. Drag and drop the basic pie chart, rose pie chart, basic bar chart, multi-line chart, and bubble chart widgets into the rectangle decoration widget.
   Figure 5 Dragging a chart widget to the rectangle decoration widget
   

6. Set the basic interaction based on different categories, that is, display or hide the widgets.
   1. Select the tab widget and click above the widget. The interaction setting page is displayed.
   2. On the As Trigger area, click + Interaction Event and select the pie event.
   3. The pie event corresponds to the pie chart tab. When the pie chart is selected, two pie chart widgets are displayed and other chart widgets are hidden.
      Figure 6 Displaying the pie chart widgets
      
      Figure 7 Hiding other chart widgets
      
   4. Repeat the preceding operations to set the interaction actions corresponding to the bar chart event, line chart event, and bubble chart event tab pages.
      Figure 8 Bar chart event interaction settings
      
      Figure 9 Line chart event interaction settings
      

      Figure 10 Bubble chart event interaction settings
      
   5. After the setting is complete, click the finish button to return to the development page.

7. Click to save the page and click to preview the effect.