Opening files from ReportExplorer

Creating a custom web page using the Actuate JavaScript API : Navigating repository content using Report Explorer : Opening files from ReportExplorer

Opening files from ReportExplorer

The ReportExplorer class generates an actuate.reportexplorer.eventconstants.ON_SELECTION_CHANGED event when the user selects a folder or file in the Report Explorer User Interface. To access the file information in this event, implement an event handler like the one shown in the following code:

var file;

...

explorer.registerEventHandler( actuate.reportexplorer.EventConstants.ON_SELECTION_CHANGED, selectionChanged );

...

function selectionChanged( selectedItem, pathName ){

  file = pathName;

}

The event passes the path and name of the file in the second parameter of the handler, pathName. To access the file, the event handler stores the path in a global variable, file.

In this implementation, the file path is updated each time a file selected. To open the file currently selected, implement a button on the page that runs a separate function that opens the file. The following code example shows a button that calls the custom displayReport( ) function, which attempts to open the file using an actuate.viewer object:

<input type="button" style="width: 150pt;" value="View Report" onclick="javascript:displayReport( )"/>

...

function displayReport( ){

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

  try {

    viewer.setReportName(file);

    viewer.submit( );

  } catch (e) {

    alert("Selected file is not viewable: " + file);

    runReportExplorer( );

  }

}

The try-catch block returns to the report explorer if viewer is unable to open the file.

This is a complete example of a ReportExplorer page that opens a file in the BIRT Viewer when the user activates the View Report button:

<!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( )">

<input type="button" style="width: 150pt;" value="View Report"onclick="javascript:displayReport( )"/>

<hr />

<div id="explorerpane">

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

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

  var file = "unknown";

  function init( ) {

    actuate.load("reportexplorer");

    actuate.load("viewer");

    actuate.load("dialog");

    requestOpts = new actuate.RequestOptions( );

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

  }

  function runReportExplorer( ) {

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

    explorer.registerEventHandler( actuate.reportexplorer.EventConstants.ON_SELECTION_CHANGED, selectionChanged );

    explorer.setFolderName( "/Public" );

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

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

    explorer.submit( );

  }

  function selectionChanged( selectedItem, pathName ){

    file = pathName;

  }

  function displayReport( ){

    var y = document.getElementById('explorerpane'), child;

    while(child=y.firstChild){

      y.removeChild(child);

    }

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

    try {

      viewer.setReportName(file);

      viewer.submit( );

    } catch (e) {

      alert("Selected file is not viewable: " + file);

      runReportExplorer( );

    }

  }

  </script>

</div>

</body>

</html>