Overview
When you preview a report on the frontend, FineReport converts the template into HTML and references finereport.js, the built-in FineReport JavaScript file, in the HTML head tag. The code is as follows:
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
finereport.js is not a physical file in the report project directory. Instead, FineReport assembles it on the server from multiple JavaScript files. finereport.js provides many built-in functions and public properties. After a template or another web page references finereport.js, you can use the FR object to call public properties and methods in the FR.xxx format. For details about the properties and methods of the FR object, see Global API.
Function Description
When a report is loaded, finereport.js is automatically referenced. Therefore, you can directly use FR.xxx to call FR methods in JavaScript code added to the report. To call FR methods on your own web page, first reference finereport.js in the HTML head tag, and then call the methods in the FR.xxx format.
Example
Calling FR Methods in a Report
Adding a Button
Create a general report, select cell A1, add a button widget to the cell, and set Button Name to Test, as shown in the following figure.
Adding an Event
Select cell A1, choose Widget Setting > Event on the right property panel, and add a Click event to the button, as shown in the following figure.
The JavaScript code is as follows:
FR.showDialog("Test",600,400,"Hello World")
Save the report and select Data Entry Preview. After you click the Test button, a prompt box is displayed, as shown in the following figure.
Calling FR Methods on a Web Page
Creating an HTML File
Create an HTML file to implement the effect: when you click a custom button, a prompt box pops up. Because the button calls the showDialog method of the FR object, you need to reference finereport.js in the code. The code is as follows:
Click to download the HTML file: Test.html.zip
Note: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FineReport Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
<link rel="stylesheet" type="text/css" href="/webroot/decision/view/report?op=emb&resource=finereport.css&cssVersion=1557882553214">
<script>
function button_onclick(){
FR.showDialog("Test", 600, 400, "Hello World")
}
</script>
<input type="button" value="Test" onclick="javascript:button_onclick();" />
</head>
<body>
</body>
</html>Adding the HTML File to the Project
Save the HTML file to FineReport installation directory/webapps/webroot, as shown in the following figure.
Previewing the Effect
Note: Open a browser and enter the URL of the HTML file in the address bar. For example, for a local project, enter http://localhost:8075/webroot/Test.html to access the file.
After you click the Test button, a prompt box is displayed. The effect is the same as in the "Calling FR Methods in a Report" section, as shown in the following figure.
Previous：FR.ajax
