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:
<div id="viewer1"></div>
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.rptdesign" indicates the Customer List report design 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>
  <meta http-equiv="content-type" content="text
    /html;charset=utf-8" />
  <title>Viewer Page</title>
</head>
<body onload="init( )">
<div id="viewerpane">
  <script type="text/javascript" language="JavaScript"
    src="http://localhost:8700/iportal/jsapi"></script>
 
  <script type="text/javascript" language="JavaScript">
 
  function init( ){
    actuate.load("viewer");
    actuate.initialize( "http://localhost:8700/iportal", null, null, null, runReport);
  }  function runReport( ) {
    var viewer = new actuate.Viewer("viewerpane");
    viewer.setReportName("/Public/BIRT and BIRT Studio Examples/Top 5 Sales Performers.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:8700/iportal", null, null, null, runReport);
  function runReport( ) {
  var viewer = new actuate.Viewer("viewerpane");
  viewer.setReportName("/Public/BIRT and BIRT Studio Examples/Top 5 Sales Performers.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.

Additional Links:

Copyright Actuate Corporation 2012