Second in a series of blog posts on handy extensions to OpenText Interactive Viewer, a module of iHub.
In a previous Interactive Viewer extension, a few lines of jQuery code let you add row highlighting capability to iHub 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 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 inch” 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 clientScripts/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.
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 Interactive Viewer functions (like sorted columns) are unaffected.
This series of free Interactive Viewer extensions was created by BIRT engineers Clement Wong and Bill Clark. Interactive Viewer is ideal for putting personalized report content in all users’ hands, and their goal with these extensions is to make it even better.
Other blog posts in this series: