FVS Table Component Timed Page Turn Through JS

Application scenarios: If you have installed the FVS plugin, you can view this article to learn how to create an FVS template.

Note: Mobile devices are not supported.

Version

Expected Effect

When you preview the template, the table component can turn pages automatically and periodically if the pagination function is enabled.

Implementation Idea

Add an After Initialization event to a table component. Through pagination interfaces and setInterval() methods, the table component can turn pages periodically.

Creating a Template

Click File > New FVS Report > Create Big Screen From Blank Area, and you can customize the name and size.

Preparing Data

Create a DB Query ds1, with SQL query statement: SELECT * FROM Sales Volume.

Designing the Table

1. Adding a Table

Add a Table component, and click Edit Component to go to the table editing page.

2. Designing Table Contents

a. Drag the fields in the dataset into the cells and set the corresponding titles. Click cell A2, and select List in Data Setting.

b. Select the title row, and set Repeat And Freeze to display the title row on each page.

c. Select cell A2, and set Conditional Formatting > Pagination > Paginate After Row. Select Formula under Formula Condition, and enter the formula '&A2 % 5 = 0', which means to paginate after every five rows.

After completing all the settings, click Back to Editor in the top left corner of the table editing page.

3. Enabling the Table Pagination Button

Click the table, set Content > Adaptation > Horizontally and vertically, and tick Show paging button in Table Toolbar.

4. Adding an After Initialization Event

Add an After Initialization event to the table component and enter the JavaScript code:

var re=duchamp.getWidgetByName("Table1_Page1");      //Obtain the table component and modify its name according to the atual situation
setInterval(function(){
	     if(re.getCurrentPageIndex()==re.getReportTotalPage()){
		        re.gotoPage(1)                                            //Jump to the first page when the current page number equals the total number.
		        }
	     else{
		        re.gotoNextPage()                                      //Jump to the next page
		        }
              },3000)                                                                  //Call API every three seconds

As is shown below:

Previewing

Click Save in the top right corner, then click Preview, and the expected effect should be the same as shown in section "Expected Effect". The table automatically turns pages every three seconds. When reaching the last page, the table will jump back to the first page to continue the cycle.

Click to download the template:

FVS Table Component Timed Page Turn Through JS.fvs.zip