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( "/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 customerlist report document in the /public directory.

Set the viewer dimensions in pixels. Use setSize( ) or setHeight( ) and setWidth( ), as shown in the following code:

// Use setSize( ) to set both width and height in pixels

myViewer.setSize( 400, 300 );

// Use setWidth( ) and setHeight( ) to set width and height separately

myViewer.setWidth( 400 );

myViewer.setHeight( 300 );

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>

<title>Viewer Page</title>

</head>

function init( ){

actuate.load("viewer");

var reqOps = new actuate.RequestOptions( );

reqOps.setVolumeProfile( "Default Volume" );

reqOps.setRepositoryType(
actuate.RequestOptions.REPOSITORY_ENCYCLOPEDIA);

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

}

function runReport( ) {

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

viewer.setReportName(
"/Public/Unshipped Orders 1H2013.rptdesign" );

viewer.setSize( 400, 300 );

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:8700/iportal", reqOps, null, null, runReport);

}

function runReport( ) {

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

viewer.setReportName(
"/Public/UnshippedOrders1H2013.rptdesign" );

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.