Tutorial 9: Implementing the JSAPI in a web page to display report parameters
This tutorial provides step-by-step instructions for authoring a web page to display a BIRT report with parameters in BIRT Viewer.
1 Using a code editor, open or create a JSAPITemplate.html file that contains the essential components for any web page that implements the JSAPI.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>JSAPI Template</title>
</head>
<body onload="init( )">
<div id="sample">
<script type="text/javascript" language="JavaScript" src="http://127.0.0.1:8700/iportal/jsapi"></script>
<script type="text/javascript" language="JavaScript">
<!-- Insert code here -->
</script>
</div>
</body>
</html>
2 Navigate to the following line:
<title>JSAPI Template</title>
In title, change:
JSAPI Template
to:
Report Parameters Page
3 Navigate to the following line:
<div id="sample">
In id, change:
sample
to:
parameters
4 Navigate to the empty line after the following line:
<script type="text/javascript" language="JavaScript">
5 Add the following code:
function init( ) {
actuate.load("viewer");
actuate.load("parameter");
actuate.initialize( "http://127.0.0.1:8700/iportal", null, "administrator", "", displayParams);
}
function displayParams( ) {
param = new actuate.Parameter("parameters");
param.setReportName("/Applications/BIRT Sample App
/Customer Order History.rptdesign");
param.submit( function ( ) {document.getElementById("run").style.visibility = 'visible';});
}
function processParameters( ) {
param.downloadParameterValues(runReport);
}
</script>
</div>
 
<hr><br />
<input type="button" class="btn" name="run" id="run"
value="Run Report" onclick="processParameters( )" style="visibility: hidden">
 
<div id="viewer">
<script type="text/javascript" language="JavaScript"
src="http://127.0.0.1:8700/iportal/jsapi"></script>
<script type="text/javascript" language="JavaScript">
function runReport(paramvalues) {
var viewer = new actuate.Viewer("viewer");
viewer.setReportName("/Applications/BIRT Sample App
/Customer Order History.rptdesign");
viewer.setParameterValues(paramvalues);
viewer.submit( );
}
6 Save the file as parameterviewer.html.
7 In Internet Explorer, open parameterviewer.html.
If you receive a security warning that Internet Explorer has restricted this page from running scripts or ActiveX controls that could access your computer, right-click on the message and select Allow Blocked Content.
8 Choose Run Report to view the report.