BIRT World: June 2009

A while back I wrote a blog entry about Actuate’s new JSAPI. This API is AJAX based and allows BIRT reports to be displayed using virtually any front end. The previous post points to an article on Birt-Exchange that describes the capabilities of the API.

To include the API within an ASP.NET page is very simple. All that is needed is to add a script tag within the head tag and point it to the location you have installed the Actuate Java Component package.

<head runat="server">
<script type="text/javascript" language="JavaScript" src="http://localhost:8080/ActuateJavaComponent/jsapi"></script>
</head>

The viewer can now be created within any div statement in the page by using code similar to the following.

<div id="viewer1" style="width: 800px; height: 600px; border-width: 1px; border-style: solid;">
<script type="text/javascript" language="JavaScript">
function createViewer() {
var viewer1 = new actuate.Viewer("viewer1");
viewer1.setReportName("/Public/BIRT and BIRT Report Studio Examples/" + "<%=DropDownList1.Text%>");
viewer1.setWidth(600);
viewer1.setHeight(450);
viewer1.submit();

}
actuate.load("viewer");
actuate.initialize("http://localhost:8080/ActuateJavaComponent/", null, null, null, createViewer);
</script</div>

In the above example we are setting the report name based on a drop down list that is populated with the following code.

<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
<asp:ListItem>Customer Order History.rptdesign</asp:ListItem>
<asp:ListItem>Sales by Territory.rptdesign</asp:ListItem>
<asp:ListItem>Customer Dashboard.rptdesign</asp:ListItem>
</asp:DropDownList>

The viewer is created within the “viewer1” div tag.

The API also supplies a component for presenting parameters. This component can be created in a similar method to the viewer component.

function createParameter() {
myParam = new actuate.Parameter("myDivContainer");
myParam.setReportName("/Public/BIRT and BIRT Report Studio Examples/Sales By Territory.rptdesign");
myParam.submit();
}

This will present a parameter page that is based on the parameter designs within the report. The Parameter component can be used in conjunction with the Viewer component to display both the parameters and the report within one page.

<button onclick="runReport()">
Run Report
</button>

<div id="myDivContainer" style="border-width: 1px; border-style: solid;">
</div>
<div id="myViewerDivContainer" style="border-width: 1px; border-style: solid;">
</div>

<script type="text/javascript" language="JavaScript">
var myViewer = null;
var myParam = null;
function createParameter() {
myParam = new actuate.Parameter("myDivContainer");
myParam.setReportName("/Public/BIRT and BIRT Report Studio Examples/Sales By Territory.rptdesign");
myParam.submit();
}

function runReport() {
myViewer = new actuate.Viewer("myViewerDivContainer");
myViewer.setReportName("/Public/BIRT and BIRT Report Studio Examples/Sales By Territory.rptdesign");
myViewer.setParameters(myParam.getParameterMap();
myViewer.submit();
}
actuate.load("parameter");
actuate.load("viewer");
actuate.initialize("http://localhost:8080/ActuateJavaComponent/", null, null, null, createParameter);
</script>

This line:
myViewer.setParameters(myParam.getParameterMap();

Sets the parameters entered in the parameter component to the viewer component. If you decide to create your own parameter controls, the values can be passed to viewer component using name value pairs.

<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>NA</asp:ListItem>
<asp:ListItem>Japan</asp:ListItem>
<asp:ListItem>EMEA</asp:ListItem>
</asp:DropDownList>
</form>
.
.
myViewer.setParameters({ "Territory": document.getElementById("DropDownList1").value });

The examples are available here.