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
The FVS large screen template supports the use of JavaScript code to trigger interaction effects such as linkage and jump.
This article will describe where the JavaScript code is used and the supported interfaces.
II. Where to use
There are four places where JavaScript code is supported
1. Page After-load Event
On the FVS canvas editing page, select Template > Page After-load Event in the menu bar, and you can enter JavaScript code to take effect for the entire FVS large screen template.
2. Table After-load Event
In the table component (fast version)/table component editing area, select Template > Table After-load Event in the menu bar, and you can enter JavaScript code to take effect for the table component.
It should be noted that in the table component, the "table after-load event" cannot be passed to the outer FVS template. If it must be passed, add parent.window before the code.
For example, to set the toggle pagination event in the interactive click event of the title component, the code is:
duchamp.switchStory("Page1");And in the table aftr-load event of the table component, set the switching pagination event, the code is:
parent.window.duchamp.switchStory("Page1");3. Interaction - click event
Select a single component and click Interaction > Clickin the configuration bar to support the new JavaScript type of click event. The event takes effect when the specified content within this component/component is clicked.
Note: The following components do not support JavaScript type click events:
Rich text component, table component, carousel component, iFrame component, local video component, local monitoring component
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, Arc Column Chart, Particle Counter, Flow on Global, Time Gear
4. Interaction - Carousel Events
Select a single component and click Interaction > Carouselin the configuration bar to support the new JavaScript type of carousel events. The event takes effect when the specified content within this component/component rotates.
Note: Only the following components support JavaScript type carousel events:
Scene Switching map, Carousel component, Fancy Tree(Electronic), Fancy Tree(Model), 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
III. Supported Interfaces
The JavaScript function is a beta function and only supports the JS interface provided in this article.
| Scenes | Introduction | Example |
|---|---|---|
| Page refresh | FVS preview page refreshes automatically after a period of time; Or FVS triggers a refresh at a fixed time every day | setInterval(() => { duchamp.reload(); }, 2 * 1000); |
| Report block auto scroll | Report block marquee effect, support circular scrolling Can only be used in the table after-load event | 1) Table(Fast Version) Component: Start Marquee: setTimeout(() => { Stop Marquee: setTimeout(() => { 2) Table Component: Start Marquee: _g().startMarquee(); Stop Marquee: _g().startMarquee(); |
| Chart data point hint carousel | Chart data point hint carousel For details, see:Chart data tooltip auto display | duchamp.on("storychange", (current) => { if (current === "Page2") { duchamp.getWidgetByName("Component1").openAutoTooltip(); } }); |
| Sound alarm | When a certain condition is met, such as a parameter value > 100, a sound prompt will be triggered For details, see:JS Sound Alert for Data Entry | const audio = document.createElement("audio"); const interval = setInterval(() => { const widget = duchamp.getWidgetByName("组件1"); if (widget.getParameters("abc") > 100) { audio.play(); clearInterval(interval); } }, 2000); |
| Trigger component linkage/refresh | Trigger the refresh or linkage effect of a component | Refresh: duchamp.getWidgetByName("Component1").refresh(); Linkage: duchamp.getWidgetByName("Component1").trigger(); |
| Trigger page full screen | Trigger FVS page full screen The browser does not allow direct full screen, it must be operated by the user, so this JS can be used in the interactive JS of the component | duchamp.requestFullscreen(); |
| Jump to the specified page | JS of jumping to the specified page | duchamp.switchStory("Page4");//Jump to the Page4 duchamp.nextStory();//Jump to the next page duchamp.previousStory();//Jump to the previous page |
| Get 3D city data layer | Get 3D city data layers, hide/show layers For details, see:FVS click hide/show data layer | duchamp.getWidgetByName("3D city name").getDataLayers() //Obtain all data layers of a 3D city duchamp.getWidgetByName("3D city name").getDataLayerByName("layer1"); //Get the layer with the specified name of the 3D city |
Previous：JS Events Supported by FVS Dashboard
