JS API

1. Version

2. Update Instructions

FineReport 11.0 provides a brand new JS API manual, each interface has detailed usage instructions, which is convenient for users to design the front-end report. Compared with the JS interface of 10.0, the interface of 11.0 has the following advantages:

• The interface is unified and regular, the same function, except for special cases, the dashboard is the same as the general report; at the same time, the support of the mobile terminal is also explained.

• The structure is clear, the scope is clear, and it is integrated; each interface has detailed instructions for use, which is friendly to users and learning, and is simple and easy to use.

• In 10.0, the scenes that are used by many users are made into interfaces, which no longer need to be implemented by large pieces of code. The compatibility is good, and the version update has little impact on the code, such as the marquee, the color of the cell when the mouse is hovering, and so on.

3. Compatibility Instructions

In the new API manual of 11.0, the contentPane object is discarded, and most of the methods on the contentPane object are transferred to the report object obtained by _g(); at the same time, many new method interfaces are added to the object obtained by _g(). Final content reference after the change: API interface summary

Note: The interfaces listed in the API are all officially supported interfaces in 11.0, and the interfaces in 10.0 that are not listed in the API are recommended to be used with caution.

1) The interfaces in the API interface summary will continue to iteratively update with version 11.0, and users can use them all the time.

2) Almost all the discarded interfaces on the contentPane object have new alternative interfaces. For a small number of continuous updates without replacement, please refer to the 11.0 API for use.

3) The abandoned interface on the contentPane object can be used in 11.0, but there are restrictions on its use, and it will not be iteratively updated with the subsequent version. After the user upgrades, if such an old interface is used in the template, special attention should be paid to it, and it is recommended to replace it with a new interface.

4) The scenario scheme implemented by unofficial interfaces such as HTML DOM elements obtained through jQuery and CSS is closely related to the report front-end architecture. If it does not take effect after the 11.0 upgrade, you can re-modify the code.

Users should pay special attention to the following issues when upgrading from 10.0 to 11.0:

1) The 11.0 dashboard can be switched between the old and new versions. The old version corresponds to the dashboard of 10.0, so the interface in 10.0 only supports the use of the old dashboard, not the new dashboard. If you want to unify the old and new, you must use 11.0 Interface.

2) 11.0 new computing engine built-in, the interface in 10.0 does not support the use of the new computing engine, if you want to unify the two, you must use the 11.0 interface.

3) The original 10.0 contentPane object has been abandoned, unified as _g(), _g() has most of its methods, see for details: API interface summary

4) The original 10.0 contentPane.curLGP object had been abandoned, and the methods on it have been added to _g().

5) Obtain widget interface, there are obvious differences between the parameter pane and the widget in the cell, you can use it by referring to the API documentation.

4. Function introduction

The API manual is divided into two modules, public module and private module. Interface under the public module both dashboard and general report can be used, and the interface under the private module can only be used for the corresponding report type.

• The public module part is divided into report global interface, parameter pane interface, widget interface, table interface, toolbar interface, and report pagination export according to the range of elements that the interface can function.

• The private module part is divided into dashboard and general report, which can only be used in dashboard and general report respectively. General reports list interfaces supported in different preview modes, and dashboard are distinguished by component types.

As shown below:

All interface summary is visible: API interface summary

When using the interface, generally obtain the report object through the global interface, and then use its methods to globally operate the report or obtain other objects in the report object, and then use its methods or continue to obtain other objects after obtaining other objects.

Obtain the specified object through a layer-by-layer method, and then use its corresponding methods and attributes. It is hierarchical, that is, the inheritance of methods in JS.

To hide the "drop-down box" widget comboBox0 on the "parameter pane", that is, set the widget comboBox0 to be invisible:

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

2) Because you want to obtain the widget on the parameter pane, you must first obtain the parameter pane, and use the getParameterContainer method of _g() to get the parameter pane object, namely:

_g().getParameterContainer

3) After obtaining the parameter pane, obtain the "drop-down box" widget on the parameter pane, and use the getWidgetByName interface of the parameter pane to obtain the widget, namely:

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

4) After obtaining the widget, use the setVisible method of the widget to set the widget to be disabled and hide it. At this point, the JS statement for setting the widgetl to be disabled on the "parameter pane" is obtained, namely:

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

1. Use in templates

When using it in a template, you only need to add the code to the JavaScript script. For how to add it, please refer to: JavaScript script

For example, add the above code to hide the "drop-down box" widget in the "click" event of a "button widget", as shown in the following figure:

Save the template and click Preview to realize the function of clicking the button to hide the "drop-down box" widget, as shown in the following figure:

2. Use in Web pages

When developing a report, users can also call the JS interface provided by FineReport in a customized web page.

1) If the report is embedded in the iframe of the web page, first obtain the iframe object through document.getElementById('id of the iframe where the report is located'), then obtain the contentWindow, and finally use the interface.

For example, when the ID of the report embedded in the iframe is "reportFrame", the report data entry and submitting interface is called, and the code is as follows:

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

Among them, document.getElementById('reportFrame') is to obtain the report iframe object, and then obtain the report object through _g(), and finally use the report data entry interface writeReport() .

For details, please refer to: Custom Submit Button

2) If you want to use the method on the FR object, you need to import the fineReport.js file of FineReport before using it. For example, use the popup dialog method of the FR object after referencing:

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

For example details, please refer to: FR object usage instructions