JS Events Supported by FVS Dashboard

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

Functions

FVS large screen templates support JavaScript code to trigger interaction such as linkage and jump.

This article mainly introduces several events that support JavaScript code. For details of JS interfaces, see JS Interface Scenarios Supported by FVS Large Screen.

Page After-load Event

In the FVS large screen editing interface, click Template > Page After-load Event on the top menu bar to input JavaScript code. It will take effect for the entire FVS large screen template.

After Initialization Event

After Initialization Event is a new event in the 1.5.0 version plugin. Only table components and widget components support it.

After Initialization Event of a table component corresponds to the After-load Event in the Template menu bar at the top of the table component editing interface in plugins before 1.5.0 version.

As is shown below:

Edit Finish Events

Edit Finish Event is a new event in the plugin 1.5.0 version. Only Textbox, DateTime, Drop-downBox, and Drop-downCheckbox widgets support it.

Click Events

Other Components Except Widgets

Select a single component and click Interaction > Click Events in the configuration bar to add JavaScript click events. When you click the component or the specified content within the component, the events take effect.

Note: The following components do not support click events:

Rich Text, Table, Carousel, Textbox, Local Video, Monitor Video

Carousel Pie Chart, Carousel Luminous Gauge, Water Polo, Carousel KPI Card(Flashing), Carousel KPI Card(Electronic), Carousel 3D Combination Map, Carousel GIS Point Map, Carousel Bar Chart, Arc Column Chart.

Widget Components

In the 1.5.0 plugin version, we add widgets and widget events. Only ButtonGroup and CheckboxGroup support click events, and click events only support JavaScript code. As is shown below:

Carousel Events

Select a single component and click Interaction > Carousel in the configuration bar. It supports JavaScript carousel events. When you click the component or the specified content within the component, the events take effect.

Note: Only the following components support JavaScript carousel events:

Area Map, Carousel, Fancy Tree (Electronic), Fancy Tree (Model), Carousel Pie Chart, Carousel Luminous Gauge, Water Polo, Carousel KPI Card (Flashing), Carousel KPI Card (Electronic), Carousel 3D Combination Map, Carousel GIS Point Map

Ways of Invoking Interface

When using FineReport Designer's other report types, we typically use FR.xxx to call to the global interface and use _g.xxx to call the component interface.

However, in FVS large-screen reports, the interface is invoked in duchamp.xxx mode

Interface Supported by the Chart

For the time being, the only interface supported by charts in FVS large screen report is openAutoTooltip(), which enables chart data point to prompt carousel.

For details, see Extended Chart - Carousel Pixel Point Chart.

The code is as follows:

duchamp.on("storychange", (current) => {
  if (current === "page2") {
    duchamp.getWidgetByName("component1").openAutoTooltip();
  }
});

Document Usage in JavaScript

In FVS large screen reports, you cannot use the API of document directly. It is not recommended to use document. In particular, document cannot be used to obtain the internal elements of FVS pages because subsequent upgrades cannot guarantee compatibility.

If you have to use document, add "use document"; before JavaScript code.

For example, when certain conditions are met, such as a parameter value is greater than 100, the sound prompt will be triggered. The JavaScript code is as follows:

"use document";
// create an audio tab to play the sound
const audio = document.createElement("audio");
// specify an mp3 file to play.
audio.src = "/webroot/help/5196.mp3";
audio.loop = true;// set to loop
document.body.appendChild(audio);// add the label to the page, otherwise it will not play.
// create a timing loop with a period of two seconds.
const interval = setInterval(() => {
 // get the component named Component 1 from the FVS page
 const widget = duchamp.getWidgetByName("component1");
 // judge whether the value of the parameter abc for this component is greater than 100, if so
 if (widget.getParameters("abc") > 100) {
 audio.play();// start to play
 clearInterval(interval);// stop timing cycle
 }
}, 2000);