Use the actuate.ReportExplorer class to navigate and view the contents of a volume in a generic graphical user interface. Load the actuate.ReportExplorer class with actuate.load( ), as shown in the following code:

Call actuate.ReportExplorer functions to identify the root directory to display then call the ReportExplorer’s submit function to display the content in the assigned <div> element.

The ReportExplorer class requires the use of a pre-existing actuate.RequestOptions object loaded with initialize. To use the default RequestOptions, use the RequestOptions constructor and provide the object as a parameter to the initialize call, as shown in the following code:

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:

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:

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

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:

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:

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:

The report explorer component displays the contents of the set folder, as shown in Figure 16‑4.

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

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:

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:

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: