JS API

Version

Update Notes

FineReport 11.0 provides a brand-new JS API manual, with detailed usage instructions for each API, making it easy to perform front-end design on reports. Compared with FineReport 10.0 JS APIs, the 11.0 APIs have the following advantages:

• APIs are unified and standardized. Except in special cases, the same functionality is implemented using the same APIs for both FRM reports and general reports.

• Clear structure, well-defined scope, and comprehensive coverage. Each API has detailed usage instructions, making it easy to learn and use.

• Dedicated APIs are now provided for commonly used scenarios in 10.0, eliminating the need to write extensive custom code. Good compatibility, with minimal impact from version updates on code. Examples include marquee effects and cell color changes on mouse hover.

When upgrading from 10.0 to 11.0, pay special attention to compatibility issues. For details, see: JS API Compatibility Description

Function Overview

The API manual is divided into two major modules: the public module and the private module. APIs under the public module can be used by both FRM reports and general reports, while APIs under the private module can only be used by the corresponding report type.

For a summary of all APIs, see: JS API Summary.

• Public module:

Based on the scope of elements that APIs can act upon, the APIs are divided into: report global APIs, parameter panel APIs, widget APIs, table APIs, chart APIs, toolbar APIs, and report pagination and export APIs.

• Private module:

The reports are categorized by type: general report, FRM report, and FVS visualization dashboard.

For general reports, APIs are grouped based on supported preview modes. For FRM reports, APIs are grouped by component type. FVS dashboard APIs are only available when editing FVS dashboards.

When using APIs, first obtain the report object through the global API. You can then use the methods of the report object to perform operations on the report or retrieve other objects. After obtaining an object, use its methods or continue retrieving child objects.

Obtain the specified object layer by layer through methods, and then use the methods and properties provided by that object. The API has a hierarchical object structure, where objects inherit methods and properties from their parent objects in JavaScript (JS).

For example, to hide the comboBox0 widget on the parameter panel, in other words, to set the comboBox0 widget to invisible:

1. First, use the global API _g() to obtain the report object.

2. Since you need to obtain the widget on the parameter panel, first obtain the parameter panel object using the getParameterContainer method of _g():

_g().getParameterContainer

3. After obtaining the parameter panel object, obtain the comboBox widget on the parameter panel object using the parameter panel's getWidgetByName API:

_g().getParameterContainer().getWidgetByName("comboBox0")

4. After obtaining the widget, use the widget's setVisible method to set the widget to unavailable and hide it. This generates the JS statement for making the widget on the parameter panel invisible:

_g().getParameterContainer().getWidgetByName("comboBox0").setVisible(false);

Usage in Templates

When using APIs in a template, simply add the code in the JS script. For instructions on how to add it, refer to: JS Introduction.

For example, add the code for hiding the comboBox widget mentioned above in the click event of a button widget, as shown in the following figure.

Save the template, click Preview to see the function of hiding the comboBox widget by clicking the button, as shown in the following figure.

Usage in Web Pages

When developing reports, you can also call the JS APIs provided by FineReport in custom web pages.

1. If the report is embedded in an iframe on the web page, first obtain the iframe object using document.getElementById('ID of the iframe containing the report'), obtain the contentWindow, and finally use the API.

For example, when the report is embedded in an iframe with the ID reportFrame,  the code for calling the report's submission API is as follows:

document.getElementById('reportFrame').contentWindow._g().writeReport();

document.getElementById('reportFrame') obtains the report iframe object. Then, _g() is used to get the report object, and finally the submission API writeReport() is used.

For detailed examples, refer to Custom Submission Button.

2. If you want to use methods on an FR object, you need to first import the fineReport.js file. For example, use the FR object's dialog popup method:

<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
<script>
function button_onclick(){
FR.showDialog("Test", 600, 400, "Hello World")
}
</script>