I. Overview
Applicable scenarios: Users who have installed the "FVS Large Screen Editing Mode" plugin can refer to this article to learn about the related functions of the FVS template.
1. Version
| Report server version | JAR package | FVS large screen editing mode (beta version) version |
|---|---|---|
| 11.0 | 2021-11-15 | V1.0.0 |
2. Function introduction
In the FVS template preview, we learned how to use the toggle button that comes with FVS to switch pages.
But sometimes we need to trigger page switching through custom buttons. This article will provide two methods: "page jump event" and "JavaScript event".
II. Function introduction
1. Page jump
1) Function Entry
Select the component, click Interaction > Click, and select +Add Click Event > Page Jump. You can add a page jump event, as shown in the following figure:
| Setting item | Introduction |
|---|---|
| Event Name | Required, you can manually enter the name of the event Must not have the same name as other events of the current component |
| Target | Drop down to select the page in the current template When the component is clicked, jump to the selected page |
The following components cannot set the "FVS component frame interaction attributes > click event > page jump":
Carousel Pie Chart, Carousel Luminous Gauge, Water Polo, Waffle Chart, Carousel KPI Card (Flashing), Carousel KPI Card (Electronic)
Carousel Catalog Gear, Carousel 3D Combination Map, Carousel GIS Point Map, Carousel Bar Chart, Carousel Component
Arc Column Chart, Particle Counter, Flow on Global, Time Gear
Rich Text Component, Table Component, iFrame Component, Local Video Component, Monitor Component
2. JavaScript
1) Function entry
Select the component, click Interaction > Click, and select +Add Click Event > JavaScript. You can add JavaScript code to implement the page jump function, as shown in the following figure:
The JavaScript code for jump paging is as follows:
duchamp.switchStory("Page4");//Jump to page4
2) Scope of application
The following components cannot set "FVS Component Framework Interaction Attributes > Click Event > JavaScript":
Carousel Pie Chart, Carousel Luminous Gauge, Water Polo, Waffle Chart, Carousel KPI Card (Flashing), Carousel KPI Card (Electronic)
Carousel Catalog Gear, Carousel 3D Combination Map, Carousel GIS Point Map, Carousel Bar Chart, Carousel Component
Arc Column Chart, Particle Counter, Flow on Global, Time Gear
Rich Text Component, Table Component, iFrame Component, Local Video Component, Monitor Component
III. Example
Note: Users who have installed the "FVS Large Screen Editing Mode" plugin can refer to this article for learning.
1. Create a new big screen dashboard
The user clicks File > New Big Screen Dashboard in the menu bar, sets the name of the large screen template as FVS Click to Switch Page Example, and clicks OK, as shown in the following figure:
Add "Page 2" by clicking +New Page in the page area, as shown in the following figure:
2. Create a new dataset
User creates a new database to query ds1, SQL statement: SELECT * FROM sales_volume
As shown below:
3. Design Page1
1) The overall effect of page1 is shown in the following figure:
2) Add a pie chart component to "Page1". Set the pie chart data from the dataset ds1, as shown in the following figure. Component styles can be set according to personal preferences, and this article will not repeat them.
3) Add 2 title components to "Page1". Set the title content as Page1 and Page2,as shown in the following figure. Component styles can be set according to personal preferences, and this article will not repeat them.
4. Design Page2
1) The overall effect of page2 is shown in the following figure:
2) Add a column chart component to "Page2". Set the column chart data from the dataset ds1, as shown in the following figure. Component styles can be set according to personal preferences, and this article will not repeat them.
3) Add 2title components to "Page2". Set the title content as Page1 and Page2, as shown in the following figure. Component styles can be set according to personal preferences, and this article will not repeat them.
5. Set page jump event
1) In "Page1", select the title component "Page1", click Interaction > Click, and add the click event Page Jump.
Set the event name to Jump to Page1 and the trigger object to Page1, click OK. As shown below:
2) In "Page1", select the title component "Page 2", click Interaction > Click, and add the click event Page Jump.
Set the event name to Jump to Page2 and the trigger object to Page2, click OK. As shown below:
6. Set JavaScript event
1) In "Page2", select the title component "Page1", click Interaction > Click, and add the click event JavaScript.
Set the event name to Jump to Page1 and the script to duchamp.switchStory("Page1");, click OK. As shown below:
2) In "Page2", select the title component "Page2", click Interaction > Click, and add the click event JavaScript.
Set the event name to Jump to Page2 and the script to duchamp.switchStory("Page2");, click OK. As shown below:
7. Effect preview
Save the template, click the Preview button in the upper right corner, the effect is shown in Section I.2.
Users can freely switch pages in the template by clicking on the title component.
Previous：FVS Jumping to Web Links/Pop-up Box Events
