Switching Tab Pages Through FVS Widgets

This document applies to users who have installed the FineVis Data Visualization plugin to learn relevant functions. 

Version

Expected Effect

Tab pages of an FVS Tab component can be displayed in turn according to certain rules or manually switched. However, you may want to use widgets to switch the Tab pages, for example, to switch the Tab page using a dropdown box. The expected effect is shown in the following figure.

Implementation Method

Set a custom data dictionary for the widget with the actual value being the index of each tab page of the Tab component, and then add an After Exiting Edit event with Java Script to the widget to achieve the effect.

The JavaScript code is as follows:

var a = duchamp.getWidgetByName("index").getValue(); 
//Get the actual value (in string format) of the dropdown box widget.
duchamp.getWidgetByName("Tab1_Page1").showCardByIndex(+a); 
//Set the Tab component to display the a-th tab page.
//The addition (+) is used to convert the obtained value to a numeric format.

Preparing the Template

Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer, and create a blank dashboard. You can customize the name and size.

Designing the Template

Adding a Tab Component

Choose Container> Tab to add a Tab component to the canvas. Add two more tab pages to the Tab component, as shown in the following figure.

Modifying the Tab Setting

Rename the three tab pages to Tab0, Tab1, and Tab2 for easy identification. You can double-click a tab page and rename it.

Select the Tab1-Page1 component, and click Equal under Tab Page Button, as shown in the following figure.

Adding Charts 

Drag any component into each tab page, as shown in the following figure.

Adding a Dropdown Box Widget

Add a dropdown box widget, adjust its position and size, and set the widget name to index, indicating that the parameter is the index.

Click the icon on the right of Data Dictionary and set Type Setting to Custom. Click Add Data Item, set the actual values to 0, 1, and 2, and set the display values to Tab0, Tab1, and Tab2.

Setting an After Exiting Edit Event for the Dropdown Box Widget

Select the dropdown box widget, choose Interaction > Add Event > After Exiting Edit, and enter the event name and the following JavaScript code.

var a = duchamp.getWidgetByName("index").getValue(); 
//Get the actual value (in string format) of the dropdown box widget.
duchamp.getWidgetByName("Tab1_Page1").showCardByIndex(+a); 
//Set the Tab component to display the a-th tab page.
//The addition (+) is used to convert the obtained value to a numeric format.

The steps are shown in the following figure.

Effect Display

On PC

Click Preview in the upper right corner and the effect is as shown in the section "Expected Effect".

On Mobile Terminals

For the preview method, see FVS Template Preview and Mounting. The dashboard is shown in the following figure.

You can download the example templates. Switching tab pages through FVS widgets.fvs