Originally Written by Fred Sandsmark
Second in a series.
In a previous BIRT Interactive Viewer Extension (found here), a few lines of jQuery code let you add row highlighting capability to BIRT tables. In this post we extend that idea further, showing how to add a fully configurable pop-up dialog box to display details that don’t need to appear in every row.
Why would you want this? We’ve all worked with tables in which one column held so much text that every line in the report had tons of extra white space. This one column forced the table or report to be many more pages than necessary. Sometimes users who are scrolling through tables of data need a quick way to see detail on one record without leaving the table.
With this easy extension, all report rows are just one line and a pop-up dialog box gives a full item description (a longer block of text) in paragraph form. The user can click anywhere in any row to see the description. The result looks like this:
To add this effect to your BIRT tables, you just need to add a column that contains the contents of what you want to display in the pop up and add some code (posted below) in a HTML text object in the table header.
Just follow these simple steps:
- Add everything that you want to display in the description dialog to the detail cell of the first row. You can display multiple items in the first row. Make sure that the first row’s header is empty.
- For every element in the first cell in the table report layout, click on the general properties and change the display to “No Display”. This will change the CSS display properties to “none” so the element will not be visible – but the contents will still be accessible to jQuery.
- Make the width of the first row .1” or some other small number. The column display needs to remain “visible,” but the narrow width will keep it from being noticed by your users.
- In the clientSripts/clientInitialize script, add the following includes:
- In the header of the first item in a row, add a text item and change the type to html.
- Cut and paste the following code into the text item.
You can copy the code above, or download working Report Design source code here: DescDialog.
Like the Row Highlight extension, this method lets you can add functionality to new or existing reports very easily. It’s simple to change colors, type styling, and other aspects of the pop-up dialog to match your existing UX. All other BIRT Interactive Viewer functions (like sorted columns) are unaffected.
This series of free BIRT Interactive Viewer Extensions is being created by BIRT engineers Clement Wong and Bill Clark. BIRT Interactive Viewer is ideal for putting personalized BIRT content in all users’ hands, and their goal with these extensions make it even better. The next Extension, also created using jQuery, adds a pop-up box that can write back to the database.
That script will be shared on this blog soon, so please Subscribe (at left) to be notified of new entries. And please let us know in the comments what other additions you’d like to see to BIRT Interactive Viewer.