In this second article about the
onContentUpdate event, we explore how to help enable reports that need to do more than... well reports.<br />
<br />
Report parameters are great, they allow you to custom tailor the output based on some inputs. The problem with report parameters, is they require you to re-run the report. Which require you to go back to the data source, run the (potentially same) query again, and draw some visualizations only slightly differently than the previous iteration. Actuate BIRT allows you to interact with content, so you can sort/filter/group/etc the content without going back to the data source, but this is limited to traditional listing style tables. This will solve many business requirements, but many sophisticated BIRT applications require more than this.<br />
<br />
BIRT is a web based business intelligence platform.
The output is meant for HTML first, and a piece of paper second. This is contrary to all other BI platforms out there. This is why BIRT is the best next generation BI platform. It was created from the ground up for the next generation. Taking advantage of this, is key to creating BI applications that will impress all your users.<br />
<br />
Understanding web based technologies, and how you can incorporate them into your BIRT reports will allow you to create next generation BI solutions with ease. You don't need to have a black belt in JavaScript kung-fu, but understanding the basics can go a very... very long way.<br />
<br />
An easy to use trick, which will certainly make your users happy is to show and hide content dynamically, based on controls built into the report itself. Imagine a drop-down box, part of your report, where the user can select a product line. Once a new product line is selected, a chart showing information about that product line is immediately displayed. No need to re-execute a report, and re-run a query. Just show the chart.
HTMLElement.style.display = "none";
HTMLElement.style.display = "block";
<br />
Those 2 theoretical lines of JavaScript code will hide an HTML element (can be a chart) and show another one...
instantly. No flicker, no refresh, no loading indicator. It just happens right away. It's a very simple technique, which can provide a significantly improved user experience.<br />
<br />
So how does this relate to onContentUpdate?<br />
<br />
Since BIRT is a web based platform, it has features and functions geared towards HTML output. One of them is the TextItem control which allows you to specify any HTML (and JavaScript) code you desire. Another one is the Bookmark property of every report element. The Bookmark property, will eventually be the HTML id attribute... well kind of. Since Actuate BIRT allows you to embed multiple reports on one page via JSAPI, there needs to be a way to guarantee uniqueness amongst all HTML IDs, to ensure collusion will not happen. This is done by prefixing the JSAPI viewer id to the bookmark name. Unfortunately getting a handle on the JSAPI viewer is not always easy... unless you use onContentUpdate, which has context on the viewer.<br />
<br />
In the spirit of the multitude of JavaScript frameworks that have cropped up lately, using the $ as a function and/or global object, lets create our own function and call it _$. This function does one thing: return an HTML element, based on its id (bookmark name). Since the ultimate HTML output id, will get prefixed by the JSAPI viewer's id, the function will take care of the prefix for us.<br />
<br />
The secret sauce is to define and create the function within the browser's global space from
onContentUpdate. Next we will call that function elsewhere in the report, and subsequently get a handle on the HTML element so we can hide/show it at will.
var _$_id = this.getViewer() ? this.getViewer().getId() + "_" : "";
window["_$"] = function(name) {return document.getElementById(_$_id + name);};
<br />
The above creates a locally scoped JavaScript variable, and a function with scope on that variable. The function is stuffed into the global (window) space, so it can be called from anywhere on the page.<br />
<br />
Next you would use the TextItem control to output some raw HTML to contain the HTML elements (drop-down boxes) the user will interact with, as well as small simple JavaScript functions, which will hide/show other HTML elements (charts).<br />
<br />
Attached is a simple report which does just that. To understand how the report works, look at the Report Design's onContentUpdate event, and the first component in the report itself which is a TextItem component. Also understand that onContentUpdate is called after the report is rendered to the browser, so the last things onContentUpdate does is call a function called
initCharts (defined in the TextItem) which gets everything ready for the user.<br />
<br />
Stay tuned for future articles in this series which will showcase increased functionality and power of
onContentUpdate, and taking interactivity to the next level.<br />
<br />
Part 1 - Controlling Interactivity<br />
Part 3 - Interactivity and Beyond<br />
Part 4 - The Smart(er) Report
