Controlling Tab Pages to be Hidden or Displayed by Database Table Field

Expected Effect

Note:

You need to prepare a database table before using this template.

Control whether the tab pages of the tab component in FVS are displayed through the field values set in the database table.

The database table has two fields: TYPE (Spring, Summer, Autumn, and Winter) and SITUATION (Show and Hide), as shown in the following figure.

The tab component has a total of four tab pages: Spring, Summer, Autumn, and Winter. In the front end, only Spring and Summer are displayed according to the content of the SITUATION field in the database table, as shown in the following figure.

Implementation Method

Add the permission values to control whether the tab pages of the tab component are displayed in the database table, and add an initialization event for the table component to implement the final effect.

Preparing a Database Table

First, create a table SEASON in the local database with two fields: TYPE and SITUATION. The following figure shows the table style.

Creating a Template

(1) Choose File > New FineVis Visualization Dashboard from the menu bar in the upper left corner of the designer to create a blank FVS dashboard, as shown in the following figure.

(2) Customize the name of the dashboard, canvas size, and template style as required, and click Create Dashboard, as shown in the following figure.

Adding and Designing a Tab Component

(1) Choose Other > Tab in the upper left corner of the template canvas to add the tab component to the canvas, as shown in the following figure.

(2) Click New Tab Page in the upper right corner of the component to add three more tab pages, as shown in the following figure.

(3) Drag a table component into each tab page and adjust the component size. Take the first tab page as an example, as shown in the following figure.

(4) Select the tab component in Tab List on the right, click Component, and set Name to Season, as shown in the following figure.

(5) Set Name to Spring, Summer, Autumn, and Winter for the four tab pages, respectively, and Title Content to Spring, Summer, Autumn, and Winter for them, respectively. Take the first tab page as an example, as shown in the following figure.

(6) Set the names of the four table components to Vernal, Aestival, Autumnal, and Hibernal, respectively, to distinguish them from the names of the previous tab pages. Take the first table as an example, as shown in the following figure.

(7) Select the table component, click Content, and click Edit Component to enter the component editing page. Take the Vernal table as an example, as shown in the following figure.

(8) After entering the table component editing page, you can input custom text content. Take the Vernal table as an example, as shown in the following figure.

(9) Click Return to FineVis Visualization Dashboard in the upper left corner of the component editing page to return to the dashboard page.

(10) Select the tab component in Tab List on the right, click Content, and set Layout Mode to Equal, as shown in the following figure.

Adding an After Initialization Event

Select any table component and add an after initialization event.

(1) Take the Vernal table as an example. Select the table Vernal in Tab List on the right, choose Interaction > Interaction Event > Add Event > After Initialization > JavaScript, and input JavaScript code, as shown in the following figure.

The JavaScript code is as follows:

setTimeout(function(){
for(var i = 0; i < a.length; i++) { 
    for(var j=0;j<= a[i].length;j++){ 
duchamp.getWidgetByName('Season').getPage(a[j]).setVisible(false);
    }
}
  }, 50)

(2) Click Parameter Setting to add a parameter a. Set Parameter Type to Custom Formula, and set Parameter Content to the formula split(SQL("FRDemo","SELECT TYPE FROM SEASON WHERE SITUATION='Hide'",1),","). The following table explains the formula in detail.

Effect Display

PC

After the template is completed, click Preview in the upper right corner. The preview effect is the same as that shown in the section "Expected Effect."

Mobile Terminal

For details about the preview method, see FVS Template Preview and Mounting. The following figure shows the effect.

Download the completed template by clicking Controlling Tab Pages to be Hidden or Displayed by Database Table Field.fvs.