Overview
This document is applicable to users who have installed the FineVis Data Visualization plugin to learn operations related to FVS dashboard.
Version
Report Server Version | Plugin Version |
11.0.16 | V1.17 |
Application Scenarios
You may want to set communication between pages when using the FVS iframe component to embed other templates or pages. Example:
· A click in the iframe triggers the linkage of other components in the same FVS template.
· After operation in other components in the FVS template, components in the iframe are triggered to receive the message and perform the operation.
Note:The function is not supported on mobile terminals.
Implementation Method
You can use an application programming interface (API) for customizing messages to achieve communication through JavaScript events.
Example
Two templates are required. Add an iframe component in the Iframe Communication-Parent template and embed the Iframe Communication-Child template to demonstrate communication between the two templates.
The following sections introduce the content design of the two templates and how to set communication.
Creating a Template
Create two blank templates and save them to the current project directory.
1. Choose File > Create a FineVis Visualization Dashboard > Creating a Blank Dashboard and customize its name and size.
2. Click Save in the upper right corner to save the template to the current project directory for following operations.
Designing Parent Template
Data Preparation
Open the Iframe Communication-Parent template, create a database query, enter the SQL query statement: SELECT * FROM Sales where Region='${area}', and set the default parameter value to New York.
Adding Components
1. Add a text box widget, name it as area, and set the default value to New York.
2. Add a column chart component and bind the data.
3. Add an iframe component, select Template Link in the link address, click Select Template, and select Iframe Communication-Child.
Designing Child Template
Data Preparation
Open the Iframe Communication-Child template, create a database query, and enter the SQL query statement: SELECT * FROM Sales.
Adding Components
1. Add a pie chart component and bind the data.
2. Add a text box widget and name it as text0.
Basic templates are completed.
Setting Communication
Message Sent from FVS Page to Iframe
1. Open the Iframe Communication-Parent template. To achieve communication, you need to specify the domain of communication before sending messages, which can be set for the entire template by choosing Template > Event After Page Load.
JavaScript codes are as follows.
duchamp.onlyCommunicateWithOrigins(["http://localhost:8075"]); // Call API to specify the communication domain.
The procedures are shown in the following figure.
2. In the parent template, add a JavaScript click event to the column chart to send messages to the child template.
JavaScript codes are as follows.
duchamp.postMessage(product); // Send the parameter product as message to the iframe, with the parameter value being category names of the column chart.
The procedures are shown in the following figure.
3. In the child template, add an After Initialization event to the text box widget to receive messages from the parent template and display the corresponding content.
JavaScript codes are as follows.
window.addEventListener("message", function(event) {
duchamp.getWidgetByName("text0").setValue(event.data);
//Event represents the event and event.data represents the received message object.
})
The procedures are shown in the following figure.
Message Sent from Iframe to FVS Page
1. In the Iframe Communication-Child template, add a JavaScript click event to the pie chart to send messages to the parent template.
JavaScript codes are as follows.
window.parent.postMessage(area, 'http://localhost:8075'); // Send area as message to the specified domain, with the value of area being series names of the pie chart.
2. In the parent template, add an After Initialization event to the text box widget to receive messages from the child template and display the corresponding content.
JavaScript codes are as follows.
duchamp.addPostMessageListener((message) => {
// Listen for messages from the iframe and assign them to the area text box widget.
duchamp.getWidgetByName("area").setValue(message);
})
The procedures are shown in the following figure.
Demonstration
Save the two templates respectively and preview the parent template.
Previous：Realizing Widget Linkage and Query in the FVS Report
