Pentaho Reporting: Building Interactive Reports in HTML

Exclusive offer: get 50% off this eBook here
Pentaho Reporting 3.5 for Java Developers

Pentaho Reporting 3.5 for Java Developers — Save 50%

Create advanced reports, including cross tabs, sub-reports, and charts that connect to practically any data source using open source Pentaho Reporting.

£16.99    £8.50
by Will Gorman | September 2009 | Java

It is possible to define highly customized interactive reports within the HTML/JavaScript environment. Pentaho Reporting defines a set of properties, which when specified, allow for rich interactivity between the user and a report. In this article by Will Gorman , you will get an overview of these properties, along with a rich example that demonstrates potential uses.

Interactive HTML report properties

All reporting elements share a common set of HTML-related properties that may be used to create a dynamic report. Below is a list of properties and their uses:

HTML Properties

class

This property sets the class attribute of the current HTML entity to the specified value.

name

This property sets the name attribute of the current HTML entity to the specified value.

title

This property sets the title attribute of the current HTML entity to the specified value.

xml-id

This property allows the naming of the current HTML entity, setting the id attribute, making it possible to reference in outside scripts.

append-body

This property allows the placement of raw HTML within the body of the HTML document, prior to the rendering of the current element.

append-body-footer

This property allows the placement of raw HTML within the body of the HTML document, after the rendering of the current element.

append-header

Defined only at the master report level, this property allows the inclusion of raw HTML within the header of the HTML document generated. This location is traditionally used to load additional CSS files, as well as external JavaScript files.

Pentaho Reporting 3.5 for Java Developers Create advanced reports, including cross tabs, sub-reports, and charts that connect to practically any data source using open source Pentaho Reporting.
Published: September 2009
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

HTML Events

on-click

This property renders an onclick HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user clicks on the element.

on-double-click

This property renders an ondblclick HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user double-clicks on the element.

on-mouse-down

This property renders an onmousedown HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user presses a mouse button. This might be used to detect the beginning of a drag operation.

on-mouse-up

This property renders an onmouseup HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user releases a mouse button.

on-mouse-move

This property renders an onmousemove HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user moves the mouse.

on-mouse-over

This property renders an onmouseover HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user moves the mouse over the element.

on-key-down

This property renders an onkeydown HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user presses a key down.

on-key-pressed

This property renders an onkeypressed HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user presses a key.

on-key-up

This property renders an onkeyup HTML attribute on the currently defined element. This property is a string of JavaScript that is executed within the browser when a user releases a key.

Manipulating the reporting HTML DOM

It is possible to alter the HTML document object model dynamically, by combining the xml-id property, along with the on-click event. For instance, by setting a label's xml-id to example, and setting the following JavaScript in the on-click property, you can toggle between two text values:

document.getElementById('example').innerHTML= (document.getElementById
('example').innerHTML == 'Hello') ? 'Goodbye' : 'Hello';

All the codes used in this article can be accessed here.

Including an external CSS or JavaScript resource

Using the master report object's append-header property, it is possible to include CSS or JavaScript in your report. This is useful if you have written a large amount of JavaScript that you would like to keep separate from your report, or if you want to include a useful JavaScript library, as demonstrated in the example that will follow. An example of the append-header value might be:

<link type="text/css" rel="stylesheet" href="custom.css" />

When implementing the server, it's important to make sure that the relative path of the files referenced are accessible from the current document.

Interactive HTML example

As a demonstration of how an interactive report might work, this example walks you through building a dashboard that includes rendering an HTML report with filters and charts, with the ability to view the result in PDF format.

To begin, you'll need to create a standard report. Note that the master report in this example does not require a query. You'll populate only the Report Header with two sub-reports. First, add a label to the Report Header entitled Session ID, and add a text field that references the SESSIONID input parameter. Note that you do not need to define the input parameter in Report Designer, as this will be managed by the web application. You'll now add two sub-reports to the Report Header. Place two sub-report objects within the report header below the session information. The result should look like this:

Pentaho Reporting 3.5 for Java Developers

You'll reuse the chart and summary sub-report definitions defined as part of the side-by-side sub-report example. Follow the instructions for populating these sub-reports. Also, you must create two identical master reports with the same content and query as the sub-reports. Save these master reports as chapter9/data/subreport_chart.prpt and chapter9/data/subreport_summary.prpt. When complete, the chart sub-report should look like this:

Pentaho Reporting 3.5 for Java Developers

The summary sub-report should look like this:

Pentaho Reporting 3.5 for Java Developers

When this dashboard example is complete, the sub-reports will be executed in two different manners. The first is rendered as a sub-report in the master report. The second is an independent report, which will be executed using a call from the browser and embedded within the existing report for dynamic updating. Save your report as chapter9/data/dashboard.prpt.

Now that you've defined the basic report without interactive capabilities, you'll set up the server as well. Copy the chapter3/src/Chapter3Servlet.java example to DashboardServlet.java in the chapter9/src folder. Rename the class to DashboardServlet. Also, copy chapter3/war/WEB-INF/web.xml to chapter9/war/WEB-INF/web.xml. Open the web.xml file and change all references of Chapter3Servlet to DashboardServlet.

The new DashboardServlet requires the HTTP parameter reportName to be passed so that the correct report is rendered. The two changes you'll need to make include updating the Servlet to render reports as HTML, and to pass in the sessionId as a report input parameter. First, you'll need to update the Session ID input parameter. Update the getParameterValues().put() call to pass the sessionId as SESSIONID:

report.getParameterValues().put("SESSIONID", sessionId);

For the second modification, HTML documents require additional code to render, as external files such as CSS, and images, must be cached and available over HTTP after the report has already been generated. First, add a member variable of type int called reportNum:

int reportNum = 0;

Now, after the Excel rendering code, add the following lines of code:

} else if ("html".equals(outputFormat)) {
String reportLoc = "report_" + reportNum++;
String path = this.getServletContext().getRealPath(reportLoc);
File folder = new File(path);
folder.mkdir();
HtmlReportUtil.createDirectoryHTML(report,
path + File.separator + "index.html");
response.sendRedirect(reportLoc + "/index.html");

Note that this code creates a new folder with CSS, HTML, and images for every request made to the server. In a production environment, these files would be hosted temporarily while the report loaded, and then cleaned out automatically. Make sure to add the following imports to complete the code changes:

import org.pentaho.reporting.engine.classic.core.modules.output.table.
html.HtmlReportUtil;

You'll now create the chapter9/war/index.html file with links to the three regular reports:

<html>
<body>
<h1>Interactive Dashboard Example</h1>
<p>This is an example application demonstrating how to create an html
based interactive report.</p>
<a href="report?reportName=dashboard&outputFormat=html&sessionId=1">
Master Report</a> |
<a href="report?reportName=subreport_chart&outputFormat=html&sessionId
=1">Chart Report</a> |
<a href="report?reportName=subreport_summary&outputFormat=html&session
Id=1">Summary Report</a>
</body>
</html>
Pentaho Reporting 3.5 for Java Developers Create advanced reports, including cross tabs, sub-reports, and charts that connect to practically any data source using open source Pentaho Reporting.
Published: September 2009
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

You're now ready to test the base set of reports, which you'll use for the interactive example. First, update the build.xml to build a chapter9/war folder vs the chapter2/war folder. Now, type ant war, along with ant start_tomcat, and visit http://localhost:8080/chapter9 in your web browser to view the three reports. The first is the master report.

Pentaho Reporting 3.5 for Java Developers

The second is the chart report.

Pentaho Reporting 3.5 for Java Developers

Finally, the last one is the summary report.

Pentaho Reporting 3.5 for Java Developers

Now that you have the three reports rendering, you're ready to add interactive elements, thereby creating a dynamic dashboard.

Adding interactive elements to the dashboard

The first step is to add a commonly used JavaScript library known as prototype.js to the dashboard.prpt report. You can download prototype.js from http://www.prototypejs.org. Place the prototype.js file in the chapter9/war folder. This example uses version 1.6 of prototype.js. To include this JavaScript file in your report, add the following text to the append-header property of the master report object:

<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="../prototype-1.6.0.3.js"></script>

Now, you're ready to add the Session ID select input. Place a label at the top of the Report Header, in the space left available. Set the label text to Select a Session:. Update the label's append-body-footer property to the following HTML and JavaScript:

<script>
// this function removes cells and rows from
// the generated HTML report for dynamic rendering
function removeNodes(node) {
if (node) {
var next = node.nextSibling;
node.parentNode.removeChild(node);
removeNodes(next);
}
}
// this function is triggered when a change occurs in the
// selection list
function filterChanged() {
var select = $('selection');
var currentValue = select.options[select.selectedIndex].text;
// remove cells to allow room for dynamic iframe reports
var summary = $('summary');
removeNodes(summary.nextSibling);
removeNodes(summary.parentNode.nextSibling);
summary.colSpan = "7";
summary.className= "";
// update the chart component with the correct filter
$('chart').innerHTML = "<iframe width='261' height='240'
scrolling='no' frameborder='0'
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='../report?reportName=subreport_chart&outputFormat=
html&sessionId="+currentValue+"'/>";
// update the pdf link with the correct filter
summary.innerHTML = "<iframe width='375' height='300' scrolling='no'
frameborder='0'
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original='../report?reportName=subreport_summary&outputFormat=
html&sessionId="+currentValue+"'/>";
var pdfLink = document.getElementById('pdfLink');
pdfLink.sessionId.value = currentValue;
}</script>
<form style="display:inline">
<select id="selection" name="sessionid" onchange="filterChanged()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>

This JavaScript references the HTML document object model locations of the sub-reports. In order for this to be successful, you need to specify the xml-id attribute for both the sub-reports as chart and summary.

The above JavaScript first removes cells from the HTML document, and then places two IFRAME elements within the HTML DOM. Pentaho Reporting renders a single HTML table as output, so sub-reports don't get wrapped by a single HTML parent element. The IFRAME elements must be used instead of direct HTML placements. This is to make sure that CSS styles, and relative directory paths of images within sub-reports, are both accessible.

Add a label with a single space to the right side of the report. You'll add a View As PDF button at this location. Edit the append-body attribute of the empty label with the following HTML and JavaScript:

<form style="display:inline" id="pdfLink" action="../report"
method="get">
<input type="hidden" name="reportName" value="dashboard"/>
<input type="hidden" name="outputFormat" value="pdf"/>
<input type="hidden" name="sessionId" value="1"/>
<input type="submit" value="View As PDF"/>
</form>

To demonstrate some of the event callback methods, specify the following JavaScript within the on-click attribute of the chart sub-report element, within the master report:

alert("You've clicked on the Chart");

Also, specify the following JavaScript within the on-double-click attribute of the chart sub-report element, within the master report:

alert("You've double clicked on the chart");

The final master report should look like this in design mode within Report Designer:

Pentaho Reporting 3.5 for Java Developers

You're now ready to save the changes and deploy them to the server. Note that there are no changes necessary on the server side to enable this interactive report. In your command prompt, type ant war to build the web archive, and ant start_tomcat to restart the server.

When running the interactive report, your browser should show a selection list, as well as a View As PDF button:

Pentaho Reporting 3.5 for Java Developers

Select another Session ID, and notice how the chart and summary sub-reports are dynamically updated. Finally, click the View as PDF button. Notice that the append-body attributes defined earlier do not render within the PDF document.

Summary

In this article, you learned how to build interactive reports using HTML as output. You also learned how to render an HTML report on a server, along with including external script files within the HTML rendered report. You learned how to modify the report HTML document object model dynamically when events are triggered from the report. You also learned to view an HTML report as a dashboard, finally allowing the HTML report to be rendered as PDF.

If you have read this article you may be interested to view :

About the Author :


Will Gorman

Will Gorman is an Engineering Team Lead at Pentaho. He works on a variety of Pentaho's products, including Reporting, Analysis, Dashboards, Metadata, and the BI Server. Will started his career at GE Research, and earned his Masters degree in Computer Science at Rensselaer Polytechnic Institute in Troy New York. Over the years, Will has given many talks, including topics at local Java User Groups. He has published technical papers in journals such as Neurology, and is the author of multiple patents. Will is originally from Cincinnati and now lives in Orlando, Florida, the headquarters of Pentaho.

Books From Packt

Drupal 6 JavaScript and jQuery: RAW
Drupal 6 JavaScript and jQuery: RAW

WordPress Theme Design
WordPress Theme Design

WordPress for Business Bloggers
WordPress for Business Bloggers

WordPress Complete
WordPress Complete

Building Powerful and Robust Websites with Drupal 6
Building Powerful and Robust Websites with Drupal 6

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

Drupal 6 Themes
Drupal 6 Themes

Professional Plone Development
Professional Plone Development

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software