Viewing reports

The actuate.Viewer class loads and displays reports and report content. Load actuate.Viewer with actuate.load( ) before calling actuate.initialize( ), as shown in the following code:

actuate.load("viewer");

Load the viewer component to use the viewer on the page. Call actuate.Viewer functions to prepare a report, then call the viewer’s submit function to display the report in the assigned <div> element.

The actuate.Viewer class is a container for Actuate reports. Create an instance of actuate.Viewer using JavaScript, as shown in the following code:

var myViewer = new actuate.Viewer( "viewer1" );

The "viewer1" parameter is the name value for the <div> element which holds the report content. The page body must contain a <div> element with the id viewer1 as shown in the following code:

Use setReportName( ) to set the report to display in the viewer, as shown in the following code:

myViewer.setReportName("/test.rptdesign");

SetReportName accepts a single parameter, which is the path and name of a report file in the repository. In this example, "/test.rptdesign" indicates the test report design in the root (/) directory.

Call viewer.submit( ) to make the viewer display the report, as shown in the following code:

myViewer.submit( );

The submit( ) function submits all the asynchronous operations that previous viewer functions prepare and triggers an AJAX request for the report. The Actuate BIRT Viewer Toolkit application returns the report and the page displays the report in the assigned <div> element.

This is an example of calling viewer( ) in a callback function to display a report:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

/html;charset=utf-8" />

<title>Viewer Page</title>

</head>

src="http://localhost:8080/webapp/jsapi"></script>

function init( ){

actuate.load("viewer");

actuate.initialize( "http://localhost:8080/webapp", null, null, null, runReport);

} function runReport( ) {

var viewer = new actuate.Viewer("viewerpane");

viewer.setReportName("/test.rptdesign");

viewer.submit(callback);

}

</script>

</div>

</body>

</html>

The viewer component displays an entire report. If the report is larger than the size of the viewer, the viewer provides scroll bars to navigate the report. To display a specific element of a report instead of the whole report, use viewer.setReportletBookmark( ) prior to calling submit( ), as shown in the following code:

function init( ) {

actuate.load("viewer");

actuate.initialize( "http://localhost:8080/webapp", null, null, null, runReport);

function runReport( ) {

var viewer = new actuate.Viewer("viewerpane");

viewer.setReportName("/test.rptdesign");

viewer.setReportletBookmark("myChart");

viewer.submit(callback);

When the myChart bookmark is assigned to any element, this code displays that element.

Any changes to the report display must take place after viewer.submit( ) completes. Embed presentation code in a callback class to ensure proper execution.