Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Extend BIRT Interactive Viewer with Row Highlighting [Code]

DZone's Guide to

Extend BIRT Interactive Viewer with Row Highlighting [Code]

· Java Zone ·
Free Resource

Atomist automates your software deliver experience. It's how modern teams deliver modern software.

Originally Written by Fred Sandsmark

First in a series.

Actuate’s BIRT Interactive Viewer is the go-to product for putting personalized BIRT content in all users’ hands. To make this hard-working product even better, two of Actuate’s BIRT engineers, Clement Wong and Bill Clark, are creating a suite of free extensions to BIRT Interactive Viewer that can improve both its appearance and usefulness. We’ll show off several of these extensions over the coming weeks on this blog.

Extending BIRT Interactive Viewer is a snap with Actuate’s JavaScript API. You can create any visualization imaginable using a resultset that you can access with a single JavaScript API call.

The first extension, enabled with just a few lines of jQuery code, adds row highlight capability to tables created for BIRT Interactive Viewer. As the user’s pointer moves up and down the table, the row is highlighted – a big help if the user is scanning a single column of a wide table. The result looks like this:

highlightTable yellow with cursor

To add this effect to your BIRT tables, simply add the following script in the table header as a text item. Set the item type as HTML.


<div id="here"></div> 
<script type="text/javascript"> 

var allCells = $("#here").closest("table").find( "td" ); 

allCells 
.on("mouseover", function() {
 var el = $(this);
 el.parent().css("background","#FFFFOO"); 
})
 .on("mouseout", function() {
 allCells.parent().css("background","");
 }); 

</script>

Copy the above, or you can download working Report Design source code here: TableRowHighlight

Beyond pure simplicity, this method has some nice features:  You can add it to new or existing reports very easily.  It’s simple to change the highlight color to match your existing UX. All other BIRT Interactive Viewer functions (like sorting columns) are unaffected.

As noted, this is just the first of a series of BIRT Interactive Viewer Extensions. The next Extension we’ll share, also created using jQuery, adds a fully configurable pop-up dialog box to a BIRT table. That script will be shared on this blog soon, so please subscribe (at left) to be notified of new entries. And let us know in the comments what other additions you’d like to see to BIRT Interactive Viewer.


Get the open source Atomist Software Delivery Machine and start automating your delivery right there on your own laptop, today!

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}