I. Overview
1. Requirement
In making a data entry report, how can we submit data by clicking a custom button rather than using buttons on FineReport-built-in toolbar?
A custom button can be either a button widget added to a FineReport template or a button defined by HTML when embedding a report into a web page:
Data submission with a custom button widget added to FineReport is described in Customize a Data Entry and Submission Button and Increase the Button Size；
In the part below, we will introduce how to submit data with a button in HTML when embedding a report into a web page. The final effect is shown as below:
2. Solution
The JavaScript built-in function of the FineReport for data submission is contentPane.writeReport(). If the report is embedded into iframe in HTML, only by modifying the statement to document.getElementById('id of the iframe in which the report is embedded').contentWindow.contentPane.writeReport() can you call this JavaScript function.
II. Steps
1. Prepare a template
Save the attached template FreeForm.cpt to the following directory: %FR_HOME%\webapps\webroot\WEB-INF\reportlets
2. Edit HTML codes
Add the codes for the button in HTML page:
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.writeReport()">Commit</button>
Input the following codes:
<html>
<head>
<title>Custom Submit Button</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="toolbar">
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.writeReport()">Commit</button>
</div>
<iframe id="reportFrame" onload="afterload()" src="/webroot/decision/view/report?viewlet=/FreeForm.cpt&op=write&__showtoolbar__=false" width = 100% height = 80%></iframe>
</body>
</html>
For the full demo, see the attachment write.html at the end of the text.
3. Preview
Save the template as a HTML file to the following folder: %FR_HOME%\webapps\webroot\help
Trigger the designer and type http://localhost:8075/webroot/help/write.html in the browser. The preview effect is shown as below:
4. Download the templates
Previous：Custom Parameter Pane and Toolbar
