一.概要
1.問題の説明
FineReportには、複雑なパラメータパネルの作成を実現できる、さまざまな編集可能なウィジェットが付属されています。ただし、システムインターフェイスのウィジェットとの一貫性を保つために、FRに組み込まれたパラメータパネルとツールバーを使用するのではなく、パラメータパネルとツールバーを自分で定義することを望む場合があります。この場合、どのように設定すればいいでしょうか？
効果は下の図に示す通りです。
①はパラメータパネルで、②はカスタムツールバーになります。
二.操作手順
1.Webデザイン
以下に示すように、カスタムツールバーコードをWebページに追加します。
以下のコードを挿入します。
<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>完成されたHTMLファイルは以下の通りです。
<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>
2.効果確認
完成済みのページを確認します。
前：帳票とWEB画面統合事例