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 support for dialog boxes from the Actuate JavaScript API using the actuate.load function, as shown in the following code:

actuate.load("dialog");

Load the viewer and dialog components 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("/public/customerlist.rptdocument");

SetReportName accepts a single parameter, which is the path and name of a report file in the repository. In this example, "/public/customerlist.rptdocument" indicates the Customer List report document in the /public 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 web 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://127.0.0.1:8080/iportal/jsapi"></script>

function init( ){

actuate.load("viewer");

var reqOps = new actuate.RequestOptions( );

actuate.initialize( "http://127.0.0.1:8080/iportal", reqOps, null, null, runReport);

} function runReport( ) {

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

viewer.setReportName("/Public/BIRT and BIRT Studio Examples/Top 5 Sales Performers.rptdocument");

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");

var reqOps = new actuate.RequestOptions( );

actuate.initialize( "http://127.0.0.1:8080/iportal", reqOps, null, null, runReport);

function runReport( ) {

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

viewer.setReportName("/Public/BIRT and BIRT Studio Examples/Top 5 Sales Performers.rptdocument");

viewer.setReportletBookmark("FirstTable");

viewer.submit(callback);

When the FirstTable bookmark is assigned to any table, this code displays that table.

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

Controlling viewer user interface features

Control the viewer controls and interface features with the actuate.viewer.UIOptions class. Create an instance of this class using JavaScript, as shown in the following code:

var uioptions = new actuate.viewer.UIOptions( );

Set the user interface options with the enable functions in the actuate.viewer.UIOptions class. For example, a toolbar appears in the viewer by default, as shown in Figure 11‑1.

Figure 11‑1 The default toolbar for the JavaScript API viewer

To disable this toolbar, use the following code:

uioptions.enableToolBar(false);

All of the enable functions take a Boolean value as an argument. To configure the viewer to use these options, use setUIOptions( ) as shown in the following code:

viewer.setUIOptions(uioptions);

The setUIOptions( ) function accepts one parameter: an actuate.viewer.UIOptions object. The viewer’s submit( ) function commits the user interface changes to the viewer when the function sends the object to the HTML container. Set the UI options using setUIOptions( ) before calling submit( ).