I. Overview
Applicable scenarios: Users who have installed the " FVS Large Screen Editing Mode " plug-in can refer to this article to learn about the 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. Application scenarios
By clicking the point/column/line/model in the FVS 3D city component, you can trigger the pop-up box of the corresponding element, support passing parameters, and support the custom pop-up box style. As shown below:
II. Function introduction
1. Scope of application
The "Interaction > Click > Pop-up Box" function of the FVS component framework only supports the 3D city component and does not support other components.
2. Function Entry
Select the 3D city component and click "Interaction > Click > Add Click Event".
First select the data layer to which events need to be added, and then select the event type as "Pop-up Box". You can add a popup event to the data layer, as shown in the following figure:
3. Function introduction
The settings of the popup event are divided into "content event" and "style setting".
1) Content EventsThe content event settings are shown below:
| 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 |
| Content URL | Content links support absolute paths
https://www.fanruan.com/
http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt |
Parameter Name Parameter Type Value | Support for adding parameters Three parameter types are supported: 1) Component field: parameter content can be combined with component content, such as building name, longitude, latitude, etc. 2) Custom formula editing: parameters support using formula input 3) Custom content: parameters support directly filling in text |
The style settings are shown below:
| Setting item | Introduction |
|---|---|
| Size | The width and height of the pop-up box |
| Border | Set the background of the popover body It supports three methods: color, built-in material, and custom upload. For the use of the three methods, please refer to: FVS page background/FVS component background Support for setting the opacity of the border background |
| Association line | Sets the color of the leader line between the data point and the popover |
| Padding | Margin between pop-up box and pop-up box content |
4. Notes
If you click on the relevant data layer, the pop-up window does not appear. It may be that the building blocks the data layer. Please rotate the viewing angle to ensure that the data layer is actually clicked.
III. Example
Example of this article: By clicking on the 3D city column data layer, a pop-up box displays the detailed information of the building. And pass the building name as the parameter value to the popup box.
Note: Users who have installed the " FVS Large Screen Editing Mode " plugin can refer to this article for learning.
1. Making FVS Template
Users need to make a FVS large screen template containing 3D city components as the main template.
Note: This article only demonstrates how to make a simple 3D city component.
1) Create a new large screen templateThe user clicks "File > New Big Screen Dashboard" in the menu bar, sets the name of the large screen template as "FVS Popup Example", and clicks "OK", as shown in the following figure:
A new dataset needs to be created to add a data layer to the 3D city.
The user creates a new built-in dataset "Building Address", and the content of the data set is shown in the following figure:
On "Page1", the user selects "3D Components > 3D City" in the component area, and clicks to add to the page.
Select the 3D city component and click "Content > Edit Component" in the configuration area to enter the 3D city editing interface. As shown below:
The user needs to prepare the scene data of the 3D city first, click to download and unzip the 3D geojson sample data:
In the 3D city editing interface, the user clicks the "Create Scene" button and selects "Generate New Scene" as the creation method. Click "Select Data", select the 3D geojson sample data provided by the document, and click "Generate Scene", as shown in the following figure:
After the scene is created successfully, click the configuration bar "Data > Add Data Layer > Cylinder-Data Layer".
Set the layer name to "Layer1". The dataset is taken from "Building Address", the coordinate points correspond to the "Longitude" and "Latitude" in the dataset respectively, and the column name selects "Building Name".
The column width ratio is set to 20%, and the character scale is set to 3.
Slide the mouse to adjust the perspective of the 3D city, and the final 3D city effect is shown in the figure below:
Users can click the "Return to Editor" button to return to the FVS large screen template interface.
Click the "Save" button in the upper right corner to save the template to the report project. As shown below:
2. Create popup template
The user needs to make a template as the content of the pop-up box.
This article uses general reports as the content of the pop-up box. Users can also select dashboard, large screen templates, html resource files, pictures, etc. as the content of the pop-up box according to their needs.
1) Create a new general reportThe user clicks "File > New General Report" on the menu bar. As shown below:
The user creates a new built-in dataset "Building Data", and the content of the data set is shown in the following figure:
The name of the building corresponds to the name of the building in the dataset in Section III.1.2).
The contents of the report body A1~E4 are shown in the following figure. Columns A and D are ordinary text, and columns B and E are data columns:
Note: It is recommended to set the cell text color to white. Black is used here for demonstration purposes only.
Select cells B2, B3, B4, E1, E2, E3, and E4, click "Cell Attributes > Expand" in the configuration bar, and set the left parent cell to "Custom > B1". As shown below:
This step is to make the data in the pop-up window correspond one-to-one with the building names of the 3D city.
Double-click cell B1, click "Filter", and set the filter condition as the column name "Building Name" equal to the parameter $name . Click "+Add > OK". As shown below:
This step is to optimize the display style of the pop-up window so that the toolbar of the general report is not displayed in the pop-up window.
The user clicks "Template > Web Attributes > Pagination Preview Settings", set it to "Individually set for the template", uncheck "Use Toolbar", and click "OK", as shown in the following figure:
This step is to make the content in the pop-up window display adaptively. Optimize the display style of the popup window.
The user clicks "Template > PC Adaptive Attr", set it to "Individually set for the template", set the font to "No adaptive" and the form to "Bidirectional", and click "OK", as shown in the following figure:
This step is to prevent the background color of the general report from being displayed in the pop-up window, but only the background color of the pop-up window. Optimize the display style of the popup window.
The user clicks "Template>Report Background", sets it to "Custom>Color>Transparent", and clicks "OK", as shown in the following figure:
Name the template created in Section III.2 Building Details.cpt and save it to the folder %FR_HOME%\webapps\webroot\WEB-INF\reportlets . As shown below:
Note: If it is saved to another folder/path, the address called by the pop-up box below needs to be changed by itself.
3. Setting the popup
1) Add popup eventOpen the "FVS Popup Example.fvs" template in Section III.1, select the 3D city component, and click "Interaction > Click > Add Click Event".
First select the data layer "Layer1" to which events need to be added, and then select the event type as "Pop-up Box". You can add a popup event to the data layer, as shown in the following figure:
Select "Content Event".
Set the event name to "Building Details" and the content link to "http://localhost:8075/webroot/decision/view/report?viewlet=Building Details.cpt".
Set the parameter name to "name" (same as the filter parameter set in Section III.2.4), select "Component Field" for the parameter type, and "Building Name" for the parameter content.
As shown below:
Choose style. Users can set according to their personal preferences, which will not be repeated in this article. After the setting is complete, click "OK", as shown in the following figure:
4. Effect preview
Save the template and preview the "FVS Popup Example.fvs" template. The effect is shown in Section I.2.
By clicking on the 3D city column data layer, a pop-up box displays the building details. And pass the building name as the parameter value to the popup box.
Note: If you click on the relevant data layer, the pop-up window does not appear. It may be that the building blocks the data layer. Please rotate the viewing angle to ensure that the data layer is actually clicked.
IV. Completed template
Click to download the FVS template:
Click to download the popup template:
Click to download and unzip the 3D city geojson data:
Previous：FVS Click to Switch Page
