Overview
Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.
Note: Mobile devices are not supported.
Version
Report Server Version | Plugin Version | Function Change |
V11.0.6 | V1.8.0 | All components support the setVisible and isVisible interfaces, and the components on the current page can be hidden or displayed through JS. |
Application Scenarios
In FVS templates, FVS Carousel Component is usually used to switch and display multiple components, but the style or function of the carousel may not meet requirements in certain scenarios.
At this point, you can manually hide or display components during preview through JS, as shown in the expected effect in the figure below:
Implementation Method
You can achieve the effect by setting the JavaScript event in conjunction with the setVisible interface. The JavaScript code is as follows:
Note:
1. Only supports plugins of V1.8.0 and later versions.
2. This interface is only valid for components on the current page.
duchamp.getWidgetByName("component name").setVisible(false); //true means setting it to be visible, false means setting it to be invisible
Example
Creating a Template
Click File > New FVS Report in the top left corner of the designer.
Designing Components
Add FVS Title Component to set click events. You can add components that are used to be hidden or displayed at will. In this example, a column chart, a pie chart, and a line chart are added.
Overlap several charts together, and set the content of the title components to column chart, pie chart, line chart respectively. You can modify the component name in the Component panel.
Click the button in the lower left corner of the canvas to expand the Widget Layer list.
Each component on every page occupies one component layer. When the mouse hovers over the component object, appears on the left side, indicating that the component is in a visible state. Clicking the icon can switch to , indicating that the component is in an invisible state, and the icon will always be displayed.
In this example, the pie chart and line chart are set to be invisible.
Setting the JavaScript Event
1. Select the column chart title, and click Interaction > Click > Add Click Event > JavaScript.
Enter the event name and the JavaScript:
duchamp.getWidgetByName("column chart").setVisible(true); //Set the column chart to be visible
duchamp.getWidgetByName("pie chart").setVisible(false); //Set the pie chart to be invisible
duchamp.getWidgetByName("line chart").setVisible(false); //Set the line chart to be invisible
The procedure is as follows:
2. Similarly, set JavaScript events for two other title components:
Pie chart:
duchamp.getWidgetByName("pie chart").setVisible(true); //Set the pie chart to be visible
duchamp.getWidgetByName("column chart").setVisible(false); //Set the column chart to be invisible
duchamp.getWidgetByName("line chart").setVisible(false); //Set the line chart to be invisible
Line chart:
duchamp.getWidgetByName("line chart").setVisible(true); //Set the line chart to be visible
duchamp.getWidgetByName("pie chart").setVisible(false); //Set the pie chart to be invisible
duchamp.getWidgetByName("column chart").setVisible(false); //Set the column chart to be invisible
Previewing the Effect
Click Preview in the upper right corner and the effect is as shown in the section "Expected Effect".
Template Download
Click to download the template: Hiding or Displaying FVS Components Through JS.fvs
Previous：FVS Iframe Communication Through JS
