Custom Parameter Pane and Toolbar-FineReport Help Document

Last update：December 22, 2020

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;"/>
       &nbsp;&nbsp; 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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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&para=" + 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;"/>
               
    &nbsp;&nbsp; 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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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>

Show Code