Tutorial 11: Control the BIRT Interactive Viewer user interface

In this tutorial, you create web pages that customize the user interface based on data collected about the user, the user’s browser, and the user’s actions. You perform the following tasks:

Adjust UI configuration according to browser.

Adjust UI configuration according to user actions.

Adjust viewer options based on a user input.

Task 1: Adjust UI configuration according to browser

In this task, you open or create a copy of JSAPITemplate.html and edit its contents to collect data from the user’s browser and add the BrowserPanel UIConfig to the viewer if the browser is Internet Explorer.

1 Using a code editor, open or create a JSAPITemplate.html file that contains the essential components for any web page that implements the JSAPI.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>JSAPI Template</title>

</head>

</script>

</div>

</body>

</html>

2 Navigate to the following line:

<title>JSAPI Template</title>

In title, change:

JSAPI Template

to:

Interactive Viewer with browser-specific Controls

3 Navigate to the following line:

In id, change:

sample

to:

viewer

4 Navigate to the empty line after the following line:

5 Add the following code:

function init( ) {

actuate.load("viewer");

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

}

function runReport( ) {

var browserName = navigator.appName;

if (browserName == "Microsoft Internet Explorer"){

var ieUIConfig = new actuate.viewer.UIConfig( );

ieUIConfig.setContentPanel(new actuate.viewer.BrowserPanel());

var myviewer = new actuate.Viewer("viewer", ieUIConfig);

} else {

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

}

myviewer.setReportName("/Applications/BIRT Sample App
/Top 5 Sales Performers.rptdesign");

myviewer.submit( );

}

6 Save the file as browsercontrols.html.

7 In Internet Explorer, open browsercontrols.html.

If you receive a security warning that Internet Explorer has restricted this page from running scripts or ActiveX controls that could access your computer, right-click on the message and select Allow Blocked Content.

Task 2: Adjust UI configuration according to user actions

In this task, you implement buttons in HTML to collect user decisions regarding the interactive viewing feature.

1 Using a code editor, open or create the JSAPITemplate.html file.

2 Navigate to the following line:

<title>JSAPI Template</title>

In title, change:

JSAPI Template

to:

Viewer Options Page

3 Navigate to the empty line after the following line:

4 Add the following code:

5 Navigate to the following line:

In id, change:

sample

to:

contentpane

6 Navigate to the empty line after the following line:

7 Add the following code:

var myViewer;

function init() {

actuate.load("viewer");

actuate.initialize( "http://127.0.0.1:8700/iportal", null, "administrator", "", initViewer);

}

function initViewer(){

myviewer = new actuate.Viewer("contentpane");

}

function runViewer(){

myviewer.setReportName("/Applications/BIRT Sample App
/Sales by Customer.rptdesign");

myviewer.submit(function() {myviewer.disableIV();});

}

function runInteractive(){

myviewer.setReportName("/Applications/BIRT Sample App
/Sales by Customer.rptdesign");

myviewer.submit(function() {myviewer.enableIV();});

}

8 Save the file as vieweroptions.html.

9 In Internet Explorer, open vieweroptions.html.

Task 3: Adjust viewer options based on a user input

In this task, you create custom UIOptions depending upon a name the user provides. This is not a secure method of controlling features, as the JSAPI initializes using the administrator credentials, but demonstrates a way to restrict viewer options using a value on the page.

1 Using a code editor, open or create the JSAPITemplate.html file.

2 Navigate to the following line:

<title>JSAPI Template</title>

In title, change:

JSAPI Template

to:

User Restricted Page

3 Navigate to the empty line after the following line:

4 Add the following code:

User Name:

5 Navigate to the following line:

In id, change:

sample

to:

contentpane

6 Navigate to the empty line after the following line:

7 Add the following code:

function init(){

actuate.load("viewer");

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

}

function run(){

var manUIOptions = new actuate.viewer.UIOptions( );

var username = document.getElementById("username").value;

if (username != "administrator" && username != "Administrator"){

manUIOptions.enableMainMenu(false);

}

var myviewer = new actuate.Viewer("contentpane");

myviewer.setUIOptions(manUIOptions);

myviewer.setReportName("/Applications/BIRT Sample App
/Crosstab Sample Revenue.rptdesign");

myviewer.submit();

8 Save the file as userrestrictions.html.

9 In Internet Explorer, open userrestrictions.html.

10 For User Name, use the default value, Guest, and choose Run Viewer. The viewer loads but does not display the main menu, as shown in Figure 16‑12.

Figure 16‑12 Entering Guest disables the main menu in the viewer

11 To enable the main menu, in User Name, type Administrator, and choose Run Viewer. The viewer displays the main menu, as shown in Figure 16‑13.

Figure 16‑13 Entering Administrator enables the main menu in the viewer