Switching Pages Through FVS Widgets and JS

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

Note: Mobile devices are not supported.

Version

Expected Effect

In the document, FVS Click to Switch Page, it is known that pages switching can be implemented by using JavaScript code. This article introduces switching pages through adding the JS event to the widget.

Taking the drop-down box as an example, the expected effect is shown in the following figure:

Implementation Process

Set the value of the widget data dictionary to the corresponding page name, and then add the Edit End event to the widget by using JavaScript code.

The JavaScript code is as follows:

var a = duchamp.getWidgetByName("fenye").getValue(); // Get the value of the fenye widget component

duchamp.switchStory(a); // Jump to the corresponding page

Preparing the Template

Click File > New FVS Report in the top left corner of the FineReport Designer and customize the template name and size according to the situation.

Designing the Template

1. Creating Multiple Pages

Click New Page at the bottom of the template canvas to create multiple pages, and then add a chart to each page at will.

Select the chart, click or drag it to the canvas.

2. Adding the Title Component

For a clearer view of the demonstration, add a title component on each page with the current page name as the content.

3. Adding the Drop-Down Box Widget

For convenience, you can add a drop-down box widget to a certain page, and after that, copy and paste the widget to other pages.

a. Add the widget, adjust the position and size, and set the widget name to fenye, indicating that the parameter is fenye.

b. Set the data dictionary of the drop-down box widget to Custom, click the add button, and set the actual value and display value to the corresponding page name.

c. You can modify other settings according to the situation. In this example, set Default Value to Page 1 and untick Allow null.

Setting the Edit Finish Event for the Drop-Down Box

Select the drop-down box widget, click Interaction > Add Event > Edit Finish in the configuration area on the right, and enter the event name and JavaScript execution script:

var a = duchamp.getWidgetByName("fenye").getValue(); // Get the value of the fenye widget component

duchamp.switchStory(a); // Jump to the corresponding page

After settings are complete, you can copy and paste the widget to other pages. Widgets with the same name on different pages represent the same parameter.

Click Preview in the upper right corner and the effect is as shown in the section "Expected Effect".

Click to download the template: Switching Pages Through FVS Widgets and JS.fvs