Friday, June 12, 2009

Calling BIRT reports from ASP.NET using Actuate’s JSAPI

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.

8 comments:

Chon Neth said...

This is good stuff. Is there a way to call and view actuate 8 reports from a .net app? Thanks!

Jason Weathersby said...

Chon,

Sorry for the delayed response.

The JSAPI was introduced in Actuate 10 and currently does not work with 8.

Jason

Suniti said...

How come the report extension "rptdesing". I know about .rod and .rox extensions. Can you please elaborate more on this I am using Actuate 10.
Thanks for any help.

Jason Weathersby said...

rptdesign files are BIRT based designs not ERDPro.

Anonymous said...

Thanks for your response Jason.

That means I am using ERDPro (extension .ROI and .ROX)
So if I am using ERDPro, can't I use JSAPI?

Suniti said...

Anonymous said...

Thanks for your response Jason.

That means I am using ERDPro (extension .ROI and .ROX)
So if I am using ERDPro, can't I use JSAPI?

Jason Weathersby said...

Currently it only works with BIRT content.

Suvarnni M V said...

Is there is any reference need for actuate viewer?
Because it is not working for me. If there means, tell me