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
Some FVS components support click operations and pass parameters to link other components. Support linkage of single component or global component. As shown below:
II. Function introduction
1. Function entry
Select the component, click Interaction > Click, and select Add Click Event > Component Linkage. You can add a click linkage component event, as shown in the following figure:
Setting item | Introduction |
---|---|
Event Name | Support custom input event name |
Scope | 1) Global linkage: the click behavior takes effect on the entire template, and the parameters are passed to each component in the template 2) Object linkage: the click behavior takes effect on the selected component, and the parameters will be passed to the selected component, other components and pages will not be affected |
Object | This option only appears when the linkage scope is "Object" The selection range is other components under the same page as this component, and multiple selections are supported. |
Parameter Name Parameter Type Value | Support for adding parameters Two parameter types are supported: 1) Formula: parameters support using formula input 2) Custom: parameters support directly filling in text |
2. Scope of application
The following components do not support FVS component frame interaction attributes. Unable to set click event to link other components:
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 Video Component
III. Prepare the template
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 Component Linkage Example, and clicks OK, as shown in the following figure:
Add "Page2" by clicking + New Page in the page area, as shown in the following figure:
2. Create a new dataset
The user creates a new database query "ds1", SQL statement: SELECT * FROM Sales_Volume where 1=1 ${if(len(area) == 0,"","and area in ('" + area + "')")}
As shown below:
3. New column chart component
On "Page1", the user selects the component area Chart > Column> Column Chart and clicks to add to the page.
Select the component, set the component Content > Data in the configuration area, set the dataset tods1, the category is Salesperson, and the series field name is Sales_Volume. As shown below:
4. Add Pie Chart Component
On "Page1", the user selects the component area Chart > Pie > Pie Chart and clicks to add to the page.
Select the component, set the component Content > Data in the configuration area, set the dataset to ds1, the catagory to None, the series name to Product, and the value to Sales_Volume. As shown below:
5. New bar chart component
On "Page2", the user selects the component area Chart > Bar > Bar Chart and clicks to add to the page.
Select the component, set the component Content > Data in the configuration area, set the dataset to ds1, the category is Product, and the series field name is Sales_Volume. As shown below:
6. Effect Preview
All components in all pages are displayed according to the parameter is empty, as shown in the following figure:
IV. Example 1: Click linkage to specified component
Note: Please complete the basic template creation according to Chapter III first, and then perform the operations in this chapter based on the basic template.
1. Add title component
On "Page1", the user selects Text > Title Component in the component area and clicks to add to the page.
Select the component, set the component Content in the configuration area, and set the title content to Click to link specified component. As shown below:
2. Add click event
Select the title component, click Interaction > Click Event, and select +Add Click Event > Component Linkage.
The event name is Click to link column chart, the linkage scope is selected as Object, and the linkage object is selected as Page 1_Column Chart1.
The parameter name is area, the parameter type is Custom, and the parameter value is East China.
As shown below:
3. Effect preview
Save the template and click Preview.
When clicking on the title component "Click to link specified component", the parameter "area=East China" is passed to the column chart. The column chart only displays the sales in East China, and the other components remain unchanged. As shown below:
V. Example 2: Click to link global components
Note: Please complete the basic template creation according to Chapter III first, and then perform the operations in this chapter based on the basic template.
1. Add title component
On "Page1", the user selects Text > Title in the component area and clicks to add to the page.
Select the component, set the component Content in the configuration area, and set the title content to Click to link global components. As shown below:
2. Add click event
Select the title component, click Interaction > Click Event, and select +Add Click Event > Component Linkage.
The event name is Click to link global component, and the linkage scope selects Global.
The parameter name is area, the parameter type is Custom, and the parameter value isNorth China.
As shown below:
3. Effect preview
Save the template and click Preview.
When the title "Click to link global components" is clicked, the parameter "area=North China" is passed to all components on all pages in the template. Bar chart, pie chart, and column chart only show sales in East China. As shown below:
Before clicking:
After clicking: