Overview
This document applies to users who have installed the FineVis Data Visualization plugin to learn relevant functions.
Version
| Report Server Version | Plugin Version |
|---|---|
| 11.0.9 | V1.9.1 |
Expected Effect
Tab pages of different Tab components on the same page change synchronously when you switch between tab pages, as shown in the following figure.
When you switch between tab pages of the left Tab component, the tab page of the right Tab component changes automatically.
Implementation Method
Use getShowIndex() to get the title index of the current tab page of a Tab component after switching, to change the tab page of another Tab component.
Example
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.
Designing a Tab Component
Click Container in the left component area and drag two Tab components into the canvas. Add two more tab pages to each Tab component, and drag any component into the tab page, as shown in the following figure.
Select and rename each tab page for easy identification. You can customize the name as needed.
Tab page names cannot be repeated across different tab components on the same page. You can add a space after the name to make the tab page button look the same.
Adding an Event
Select the left Tab component, click Interaction, uncheck Enable Auto Carousel, click Add Tab Switching Event and JavaScript, and enter the following JavaScript code.
index=duchamp.getWidgetByName('Tab1_Page1').getShowIndex();
//Get the index of the current tab page of Tab1_Page1.
duchamp.getWidgetByName('Tab2_Page1').showCardByIndex(index);
//Set Tab2_Page 1 to display the index-th Tab page.
The steps are shown in the following figure.
Effect Display
On PC
Click Save in the upper right corner of the template, then click Preview. The effect is shown in the "Expected Effect" section.
On Mobile Terminals
For the preview method, see FVS Template Preview and Mounting. The dashboard is shown in the following figure.
