This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.
Version
Report Server Version | Plugin Version | Functional Change |
---|---|---|
11.0 | V1.0.0 | The lowest version requirement. |
11.0.22 | V2.5.0 | Adds interface getAllPages. |
View update records. | ||||||||||||||||||||||||
|
Compatibility Description
V2.4.1 has unified the design of API interfaces related to template pagination, table component pagination, and tab component sheets. The page index of the new interface starts from 1.
For details, see the following table.
Type | Old Interface | New Interface |
---|---|---|
Template pagination | URL suffix parameter page=x, x starts from 0. page=0 represents the first page. | Change the URL suffix parameter to page_number=x, where x starts from 1. page_number=1 represents the first page. |
Table pagination | The pagination index starts from 1, representing the first page. | Unchanged. |
Tab sheet | The tab sheet index starts from 0, representing the first page. | The tab index starts from 1, representing the first page. |
this
Method | this | Get the current component object. It can be used in conjunction with the methods and properties of that object. |
---|---|---|
Parameter | / | / |
Return Value | object | Current component object |
Example | Example 1: Get the actual value of the current widget component.
Example 2: Set the current widget to be invisible. this.setVisible(false); Example 3: Clear the value of the current widget. this.reset(); | |
Application Example | / | |
Mobile Terminal | It is supported on mobile terminals. |
getWidgetByName
Method | getWidgetByName(name) | Get a specific component from the current page. |
---|---|---|
Parameter | name: string | Component name, string |
Return Value | object | Component object |
Example | Example: Get the title component. duchamp.getWidgetByName("Title1_Page1"); | |
Application Example | / | |
Mobile Terminal | It is supported on mobile terminals. |
refresh
Method | refresh() | Trigger the component refresh. |
---|---|---|
Parameter | {para:"para"} | parameter name: parameter value |
Return Value | / | / |
Example | Example 1: Trigger the Component1 refresh. duchamp.getWidgetByName("Component1").reset(); Example 2: Trigger the Column Chart component refresh and transfer the parameter New York to the column chart. duchamp.getWidgetByName("Column Chart").refresh({Region:"New York"}); ![]() duchamp.getWidgetByName("Component").refresh({a:"parameter value",b:"parameter value"}); | |
Application Example | Click the title component to trigger a refresh of the Column Chart component and transfer the parameter of New York as Region to the column chart. You can download the template: refresh.fvs. | |
Mobile Terminal | It is supported on mobile terminals. |
trigger
Method | trigger() | Trigger the click event of the component. ![]() the three-dimensional component and widget component are not supported. |
---|---|---|
Parameter | / | / |
Return Value | / | / |
Example | Trigger all click events of Component1. duchamp.getWidgetByName("Component1").reset(); | |
Application Example | / | |
Mobile Terminal | It is supported on mobile terminals. |
requestFullscreen
Method | requestFullscreen() | Trigger the full-screen mode. |
---|---|---|
Parameter | / | / |
Return Vaule | / | / |
Example | Example: Add a click JavaScript event to the title component to trigger the full-screen mode on the page. duchamp.requestFullscreen(); | |
Application Example | / | |
Mobile Terminal | It is not supported on mobile terminals. |
exitFullscreen
Method | exitFullscreen() | Exit the full-screen mode. ![]() |
---|---|---|
Parameter | / | / |
Return Value | / | / |
Example | Example: Add a click JavaScript event to the title component to exit the full-screen mode. duchamp.exitFullscreen(); | |
Application Example | / | |
Mobile Terminal | It is not supported on mobile terminals. |
reload
Method | reload() | Trigger an overall refresh of the whole template. |
---|---|---|
Parameter | / | / |
Return Value | / | / |
Example | Refresh the page every two seconds. setInterval(() => { duchamp.reload(); }, 2 * 1000);
| |
Application Example | Plugins before V1.7.2 can only implement this function through the JavaScript code under Template > Event After Page Load. Starting from V1.7.2, you can use the Template Timed Refresh function to implement this function. For details, see Timed Page Refresh for FVS Templates. | |
Mobile Terminal | It is supported on mobile terminals. |
setPageButtonDisplayPolicy
Method | setPageButtonDisplayPolicy() | Set whether the switch page button in the lower left corner of the multi-page template is displayed. |
---|---|---|
Parameter | always/hover/never | Three states of the switch button (always by default). always: always display hover: display when you hover the cursor never: never display |
Return Value | / | / |
Example | You can add the following code to Event After Page Load of the template. Example 1: Set the switch button always to display. duchamp.setPageButtonDisplayPolicy("always"); Example 2: Set the switch button to invisible and display when the cursor hovers over it. duchamp.setPageButtonDisplayPolicy("hover"); Example 3: Set the switch button never to display. duchamp.setPageButtonDisplayPolicy("never"); | |
Application Example | / | |
Mobile Terminal | It is not supported on mobile terminals. |
linkageGlobal
Method | linkageGlobal() | Implement global parameter linkage. |
---|---|---|
Parameter | {para:"para"} | parameter name: parameter value |
Return Value | / | / |
Example | There is no need to get multiple parameter widgets and assign values to them separately. Using this interface can achieve global parameter linkage, which affects all pages. Example: Click the title component and transfer New York as the parameter value to all components in the template that use the Region parameter. duchamp.linkageGlobal({Region:"New York"}) ![]() duchamp.linkageGlobal({a:"parameter value",b:"parameter value"}); | |
Application Example | You can download the template: linkageGlobal.fvs. | |
Mobile Terminal | It is supported on mobile terminals. |
pauseRollPlay
Method | pauseRollPlay() | Pause the auto page switch. |
---|---|---|
Parameter | / | / |
Return Value | / | / |
Example | When the multi-page template is set to automatically switch pages, pause the switch. duchamp.pauseRollPlay(); | |
Application Example | You can download the template: pauseRollPlay_continueRollPlay.fvs. | |
Mobile Terminal | It is not supported on mobile terminals. |
continueRollPlay
Method | continueRollPlay() | Continue the auto page switch. |
---|---|---|
Parameter | / | / |
Return Value | / | / |
Example | When the multi-page template is set to automatically switch pages and the automatic page switch is paused, resume the automatic page switching. duchamp.continueRollPlay(); | |
Application Example | You can download the template: pauseRollPlay_continueRollPlay.fvs. | |
Mobile Terminal | It is not supported on mobile terminals. |

Getting the Page
getPage
Method | getPage() | Get the page. |
---|---|---|
Parameter | value:page_number|name | Get a page through the page index or page name. page_number: page index (a positive integer starting from 1) name: page name (string) |
Return Value | { | { visible: visibility options: the page object to go to name: the page name number: the page index (a positive integer starting from 1) } |
Example | Example 1: In the FVS template, get Page1. duchamp.getPage("Page1"); Example 2: In the FVS template, the Table1 component has pagination enabled. Get Page1 of the Table1 component.
Example 3: In the FVS template, get the first sheet of the Tab1 component. duchamp.getWidgetByName("Tab1").getPage(1); | |
Application Example | / | |
Mobile Terminal | It is supported on mobile terminals. |
getPreviousPage
Method | getPreviousPage() | Get the previous page. |
---|---|---|
Parameter | / | / |
Return Value | { | { visible: visibility options: the page object to go to name: the page name number: the page index (a positive integer starting from 1) } |
Example | Example 1: In the FVS template, get the previous page of the current page. duchamp.getPreviousPage(); Example 2: In the FVS template, the Table1 component has pagination enabled. Get the previous page of the Table1 component. duchamp.getWidgetByName("Table1").getPreviousPage(); Example One: In the FVS template, get the previous page of the Tab1 component. duchamp.getWidgetByName("Tab1").getPreviousPage(); | |
Application Example | / | |
Mobile Termianl | It is supported on mobile terminals. |
getNextPage
Method | getNextPage() | Get the next page. |
---|---|---|
Parameter | / | / |
Return Value | { | { visible: visibility options: the page object to go to name: the page name number: the page index (a positive integer starting from 1) } |
Example | Example 1: In the FVS template, get the next page of the current page. duchamp.getNextPage(); Example 2: In the FVS template, the Table1 component has pagination enabled. Get the next page of the Table1 component. duchamp.getWidgetByName("Table1").getNextPage(); Example One: In the FVS template, get the next page of the Tab1 component. duchamp.getWidgetByName("Tab1").getNextPage(); | |
Application Example | / | |
Mobile Terminal | It is supported on mobile terminals. |
getFirstPage
Method | getFirstPage() | Get the first page. |
---|---|---|
Parameter | / | / |
Return Value | { | { visible: visibility options: the page object to go to name: the page name number: the page index (a positive integer starting from 1) } |
Example | Example 1: In the FVS template, get the first page of the template. duchamp.getFirstPage(); Example 2: In the FVS template, the Table1 component has pagination enabled. Get the first page of the Table1 component. duchamp.getWidgetByName("Table1").getFirstPage(); Example 3: In the FVS template, get the first sheet of the Tab1 component. duchamp.getWidgetByName("Tab1").getFirstPage(); | |
Application Example | / | |
Mobile Terminal | It is supported on mobile terminals. |
getLastPage
Method | getLastPage() | Get the last page. |
---|---|---|
Parameter | / | / |
Return Value | { | { visible: visibility options: the page object to go to name: the page name number: the page index (a positive integer starting from 1) } |
Example | Example 1: In the FVS template, get the last page of the template. duchamp.getLastPage(); Example 2: In the FVS template, the Table1 component has pagination enabled. Get the last page of the Table1 component. duchamp.getWidgetByName("Table1").getLastPage(); Example 3: In the FVS template, get the last sheet of the Tab1 component. duchamp.getWidgetByName("Tab1").getLastPage(); | |
Application Example | / | |
Mobile Terminal | It is supported on mobile terminals. |
getCurrentPage
Method | getCurrentPage() | Get the current page. |
---|---|---|
Parameter | / | / |
Return Value | { | { visible: visibility options: the page object to go to name: the page name number: the page index (a positive integer starting from 1) } |
Example | Example 1: In the FVS template, get the page being currently displayed in the template. duchamp.getCurrentPage(); Example 2: In the FVS template, the Table1 component has pagination enabled. Get the current page of the Table1 component. duchamp.getWidgetByName("Table1").getCurrentPage(); Example 3: In the FVS template, get the current sheet of the Tab1 component. duchamp.getWidgetByName("Tab1").getCurrentPage(); | |
Application Example | / | |
Mobile Terminal | It is supported on mobile terminals. |
getAllPages

Method | getAllPages() | Get all pages. |
---|---|---|
Parameter | / | / |
Return Value | page[x] | Page array, x starts from 0, 0 represents the first page ![]() |
Example | Example 1: In the FVS template, get the total number of pages in the template and display it in a pop-up.
Example 2: In the FVS template, the Table1 component has pagination enabled. Get the name of the second page of the Table1 component. duchamp.getWidgetByName("Table1").getAllPages()[1].getName(); Example 3: In the FVS template, get the index of the first sheet of the Tab1 component. duchamp.getWidgetByName("Tab1").getAllPages()[0].getIndex(); | |
Application Example | You can download the template: getAllPages.fvs. | |
Mobile Terminal | It is supported on mobile terminals. |
Operating on the Page

setVisible
Method | setVisible | Set the visibility of the page. ![]() |
---|---|---|
Parameter | visible: boolean | Whether the page is displayed, boolean type true: visible false: invisible |
Return Value | / | / |
Example | Example 1: In the FVS template, hide the Page1 template. duchamp.getPage("Page1").setVisible(false); Example 2: In the FVS template, the Table1 component has pagination enabled and hides Page1. duchamp.getWidgetByName("Table1").getPage(1).setVisible(false); Example 3: In the FVS template, hide Sheet1 of the Tab1 component. uchamp.getWidgetByName("Tab1").getPage(1).setVisible(false); | |
Application Example | You can download the template: setVisible.fvs. | |
Mobile Terminal | It is supported on mobile terminals. |
isVisible
Method | isVisible() | Get the visibility state of the page. |
---|---|---|
Parameter | / | / |
Return Value | visible: boolean | Whether the page is displayed, boolean type true: visible false: invisible |
Example | Example 1: In the FVS template, get Page2, and return its visibility state with a pop-up.
Example 2: In the FVS template, the Table1 component has pagination enabled. Get Page2 of the table and return its visibility state. duchamp.getWidgetByName('Table1').getPage(2).isVisible(); Example 3: In the FVS template, get the visibility state of Sheet2 of the Tab1 component. duchamp.getWidgetByName('Tab1').getPage(2).isVisible(); | |
Application Example | You can download the template: isVisible.fvs. | |
Mobile Terminal | It is supported on mobile terminals. |
goto
Method | goto() | Go to the gotten page. |
---|---|---|
Parameter | {para:"para"} | parameter name: parameter value |
Return Value | / | / |
Example | Example 1: In the FVS template, go to the next page. duchamp.getNextPage().goto(); Example 2: In the FVS template, the Table1 component has pagination enabled. Go to the next page. duchamp.getWidgetByName('Table1').getNextPage().goto(); Example 3: In the FVS template, go to the next sheet of the Tab1 component. duchamp.getWidgetByName('Tab1').getNextPage().goto(); Example 4: In the FVS template, go to the next page and transfer parameters. duchamp.getNextPage().goto({a:"parameter a"}); The syntax for transferring multiple parameters is shown below: duchamp.getNextPage().goto({a:"parameter a",b:"parameter b"}); | |
Application Example | You can download the template: goto.fvs. | |
Mobile Terminal | It is supported on mobile terminals. |
getName
Method | getName() | Get the page name. |
---|---|---|
Parameter | / | / |
Return Value | name: string | Page name, string |
Example | Example 1: In the FVS template, get the current page name and display it in a pop-up.
Example 2: In the FVS template, get the current page name of the Tab1 component and display it in a pop-up.
![]() The page of the table component does not have a name. If you use the above JS, the return value will be undefined. | |
Application Example | You can download the template: getName.fvs. | |
Mobile Terminal | It is supported on mobile terminals. |
getIndex
Method | getIndex() | Get the page index. |
---|---|---|
Parameter | / | / |
Return Value | number | The page index: (a positive integer starting from 1) |
Example | Example 1: In the FVS template, get the current page index and display it in a pop-up.
Example 2: In the FVS template, get the current page index of the Table1 component and display it in a pop-up.
Example 2: In the FVS template, get the current page index of the Tab1 component and display it in a pop-up.
| |
Application Example | You can download the template: getIndex.fvs. | |
Mobile Terminal | It is supported on mobile terminals. |