Switching Tab Pages by Clicking Cells

Application scenarios: If you have installed the FVS plugin, you can refer to this chapter to learn how to create a FVS template.

Version

Expected Effect

Switching Tab Pages Through Custom Buttons shows how to use multiple title components with JS to switch tab pages in a Tab component. However, when there are many tab pages, this solution requires multiple JS codes, which is quite troublesome.

This chapter introduces how to extend and click table cells to switch tab pages. The expected effect is shown in the following figure:

Implementation Plan

In the Table Component, you need to list the relationship between Tab Page Index and Corresponding Tab Page, add hyperlinks in JavaScript to the cells, and set the Tab component to display the corresponding tab pages by passing parameters to the showCardByIndex(index) interface.

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. 

Preparing Data

Create a built-in dataset, and then create columns named No. and Tab Page. The number starts from 0, indicating the index of the tab page. The tab page field can be modified as required.

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 Table Component

Add a table component to the canvas, and click Edit Component to go to the table editing interface, as shown in the following figure.

Drag the No. field into Cell A2, drag the Tab Page field into Cell B2, and enter titles in cells in the first row.

Select Cell B2, and add a hyperlink of JavaScript type. First, add a parameter a, select Formula for value, enter A2 and the following script.

var b=Number(a); 
// Convert parameter 'a' to a numeric type and assign it to b.
duchamp.getWidgetByName("Tab1_Page1").showCardByIndex(b); 
// Set Tab1_Page1 to display the b-th tab page.

The steps are shown in the following figure.

Note: If a cell is set with a hyperlink for the first time, the cell style will change and you can modify it by yourself.

You can set cell borders, fonts, and other styles according to actual needs. After the setting is complete, click Return to FineVis Visualization Dashboard in the upper left corner of the table editing interface to back to the canvas.

Effect Preview

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 template. Switching tab pages by clicking cells.fvs