I. Requirement
FineReport has many built-in editable widgets that enable you to edit the parameter pane as sophisticated as you need. To keep these widgets consistent with those in the system interface, you may want to use your customized parameter pane and toolbar rather than FineReport’s built-in ones. So how to configure settings to meet your needs?
The effect is as shown below (①parameter pane ②toolbar):
II. Steps
1. Prepare a template
Take the template InventoryQuantity.cpt attached at the end of this document as an example. Save the template into the folder named reportlets.
2. HTML page design
Input codes for the custom toolbar in the web page, as shown below:
Input the following codes:
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">First</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">Previous</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">Next</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage()">Last</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.noClientPrint()">NoClientPrint</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">Export[Excel](Full Page)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">Export[Word]</button>
Input the following codes for the custom parameter pane in the web page:
<form name="paraForm" method="post" target="reportFrame">
Display products with inventory more than: <input type="text" name="num" id="num" value="10" style="width:5%; text-align:center;"/>
Display <select name="row" id="row">
<option value="10" select>10</option>
<option value="20">20</option>
<option value="30">30</option> </select> row(s) per page
<input type="button" name="show" value="Display" onclick="autoSubmit()"/>
</form>
Input the following complete HTML codes:
<html>
<head>
<title>Custom parameter pane and toolbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function autoSubmit() {
var num = document.getElementById('num').value; //Get the value of text widget
var row = document.getElementById('row').value; //Get the value of drop-down box
var reportURL = encodeURI("/webroot/decision/view/report?viewlet=/InventoryQuantity.cpt&__pi__=false&__showtoolbar__=false¶=" + num + "&row=" + row);// Encode the report path. The path is attached with 4 parameters: __pi__=false hides the parameter pane; __showtoolbar__=false hides the toolbar; para and row receives the value of text widget and drop-down box
document.paraForm.action = reportURL; // The target of the submission is the report path
document.paraForm.submit(); // Trigger the submit event of the form
}
</script>
</head>
<body>
<fieldset>
<legend>Query：</legend>
<form name="paraForm" method="post" target="reportFrame"><!--Custom parameter pane-->
Display products with inventory more than: <input type="text" name="num" id="num" value="10" style="width:5%; text-align:center;"/>
Display <select name="row" id="row">
<option value="10" select>10</option>
<option value="20">20</option>
<option value="30">30</option> </select> row(s) per page
<input type="button" name="show" value="Display" onclick="autoSubmit()"/>
</form><br>
<div id="toolbar"><!--Custom toolbar-->
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">First</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">Previous</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">Next</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage()">Last</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.noClientPrint()">NoClientPrint</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">Export[Excel](Full Page)</button>
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">Export[Word]</button>
</div>
</fieldset>
<iframe id="reportFrame" name="reportFrame" width="100%" height="100%" ></iframe>
</body>
</html>
3. Preview
Save the template as a HTML file named parameter_toolbar.html to the following folder: parameter_toolbar.html%FR_HOME%/webapps/webroot/help
Trigger the designer and type http://localhost:8075/webroot/help/parameter_toolbar.html in the browser. The preview effect is shown as below:
