Displaying report explorer

Creating a custom web page using the Actuate JavaScript API : Navigating repository content using Report Explorer : Displaying report explorer

Displaying report explorer

The actuate.ReportExplorer class is a GUI that displays repository contents. Create an instance of the actuate.ReportExplorer class using JavaScript, as shown in the following code:

var explorer = new actuate.ReportExplorer("explorerpane");

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

<div id="explorerpane"></div>

Use setFolderName( ) to set the directory to display in the explorer, as shown in the following code:

explorer.setFolderName("/public");

SetFolderName( ) accepts a single parameter, which is the path and name of a directory in the repository. In this example, "/public" indicates the /public directory.

ReportExplorer requires a results definition in order to retrieve data from the repository. The setResultDef( ) accepts an array of strings to define the results definition, as shown in the following code:

var resultDef = "Name|FileType|Version|VersionName|Description";

explorer.setResultDef( resultDef.split("|") );

The valid string values for the results definition array are "Name", "FileType", "Version", "VersionName", "Description", "Timestamp", "Size", and "PageCount," which correspond to file attributes loaded by ReportExplorer as it displays repository contents.

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

explorer.submit( );

The submit( ) function submits all the asynchronous operations that previous ReportExplorer functions prepare and triggers an AJAX request for the file information. The Actuate web application returns the list according to the results definition and the page displays the report explorer in the assigned <div> element.

This is a complete example of constructing actuate.ReportExplorer( ) in a callback function to display repository contents:

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

  <title>Report Explorer Page</title>

</head>

<body onload="init( )">

<div id="explorerpane">

  <script type="text/javascript" language="JavaScript" src="http://localhost:8700/iportal/jsapi"></script>

  <script type="text/javascript" language="JavaScript">

  function init( ) {

    actuate.load("reportexplorer");

    requestOpts = new actuate.RequestOptions( );

    actuate.initialize( "http://localhost:8900/iportal",requestOpts, null, null, runReportExplorer);

  }

  function runReportExplorer( ) {

    var explorer = new actuate.ReportExplorer("explorerpane");

    explorer.setFolderName( "/Public" );

    var resultDef = "Name|FileType|Version|VersionName|Description";

    explorer.setResultDef( resultDef.split("|") );

    explorer.submit( );

  }

  </script>

</div>

</body>

</html>

The reportexplorer component displays the contents of the set folder, as shown in Figure 1-2.

Figure 1-2  Report Explorer page

Use the mouse or arrow keys to navigate the repository tree and expand folders to view their contents.