JS Events Supported by FVS Dashboard

  • Last update:May 08, 2023
  • 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

    JAR Package

    Plugin Version

    Function Changes

    11.0.6

    /

    1.5.0

    Add six types of Widget components and add events and   interfaces supported by the widget components.

    Change After-load Event in the table to After Initialization in the Interaction

    11.0

    2021/11/15

    1.0.0

    /


    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.

    Events

    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.

    图1.png

    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:

    image2023-3-6_16-13-23.png

    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.

    图4.png

    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.


    图5.png

    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


    图7.png

    Notes

    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);




    Attachment List


    Theme: FineVis Data Visualization
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy