Switching Tab Pages Through Custom Buttons

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

Version

Expected Effect

FVS Tab Component provides various styles of the tab page button for you to choose from. However, it may fail to meet the requirements of some scenarios.

This article introduces how to use JavaScript events to customize tab page buttons. The expected effect is shown in the following figure.

Implementation Method

1. Use FVS Title Component to create buttons, add JavaScript click events to the title components, and set the Tab component to display the corresponding tab page through the showCardByIndex(index) interface.

2. Show/Hide the component to differentiate the selected button and the unselected button by the background.

Creating a 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.

Setting a Tab Component

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

Select the Tab component, uncheck Show Page-Switching Button and Enable Auto Carousel, as shown in the following figure.

Setting a Title Component

Add three Title components and set the content to Tab0, Tab1, and Tab2.

Add three picture components and select a suitable background from My Resource as the background when a button is selected. Rename three picture components for easy identification.

To achieve the effect that Tab0 is selected by default, show Tab0 Selected Background and hide Tab1 Selected Background and Tab2 Selected Background, as shown in the following figure.

Setting JavaScript Events

Select the title component Tab0, choose Interaction > Click > Add Click Event > JavaScript, set the event name in the pop-up box, and enter the following JavaScript code.

duchamp.getWidgetByName("Tab1_page1").showCardByIndex(0); 
//Set Tab1_Page1 to display the first tab page.

The steps are shown in the following figure.

Set the other two titles in the same way and modify the index of the corresponding tab page.

The JavaScript for Tab1 is as follows:

duchamp.getWidgetByName("Tab1_page1").showCardByIndex(1);

The JavaScript for Tab2 is as follows:

duchamp.getWidgetByName("Tab1_page1").showCardByIndex(2);

Show/Hide Components

Select the title component Tab0, choose Interaction > Click > Add Click Event, click Show/Hide, and set the component to be displayed or hidden. The steps are shown in the following figure.

Note:

For versions earlier than V2.3.0, you need to use an interface to show/hide components.

Set the other two title components in the same way and change the objects to be displayed or hidden.

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.

Extension - Automatic Carousel and Manual Switch Button

The automatic carousel function is disabled in the above steps to demonstrate the effect of manually switching tab pages.

However, sometimes you may want the tab pages to be played in turn while you can also manually switch between them. In this case, you can add a tab page switching event with JavaScript to the Tab component to achieve the effect.

Take the above dashboard as an example. Tick Enable Auto Carousel and set the interval to 3000 ms, choose Add Tab Switching Event > JavaScript, and enter the following JavaScript code.

var a=duchamp.getWidgetByName('Tab1_page1').getShowIndex(); 
//Get the index of the currently displayed tab page of the Tab component.
//Determine the tab page according to the index to show/hide the components.
if(a===0){ 
    duchamp.getWidgetByName("Tab0 Selected Background").setVisible(true);
    duchamp.getWidgetByName("Tab1 Selected Background").setVisible(false);
    duchamp.getWidgetByName("Tab2 Selected Background").setVisible(false);
}
if(a===1){
    duchamp.getWidgetByName("Tab1 Selected Background").setVisible(true);
    duchamp.getWidgetByName("Tab0 Selected Background").setVisible(false);
    duchamp.getWidgetByName("Tab2 Selected Background").setVisible(false);
}
if(a===2){
    duchamp.getWidgetByName("Tab2 Selected Background").setVisible(true);
    duchamp.getWidgetByName("Tab0 Selected Background").setVisible(false);
    duchamp.getWidgetByName("Tab1 Selected Background").setVisible(false);
}

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 following figure.

• 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 custom buttons.fvs

Automatic carousel and manual switch.fvs