Over a million developers have joined DZone.

Extend BIRT Interactive Viewer with a Pop-up Dialog Box [Code]

· Java Zone

What every Java engineer should know about microservices: Reactive Microservices Architecture.  Brought to you in partnership with Lightbend.

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:

cropped screenshot FS

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:

  • Create a column to the left of the first column of your table. In our JavaScript code, we are going to traverse the DOM and place the contents of first cell of the clicked-on row in the pop-up.
  • 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.

<div id="descDialog" title="Description" style="z-index: 9999;display: none;"> 
    <span class="ui-state-default"><span class="ui-icon ui-icon-info" 
style="float:left; margin:0 7px 0 0;"></span></span> 
   <div style="margin-left: 23px;"> 
      <div id="descText"> 
         No description found. 
      </div></div> <
<script type="text/javascript">   

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

   var el = $(this);   

//  debugger;   


      dialog = $('#descDialog') 
       .dialog({modal:false,  buttons: { 
        "Learn More": function() {
            console.log("Learn More"); 
            window.open('http://www.google.com', '_blank') 
        "Okay": function() { 
            console.log("close dialog"); 

/* Add this for alternating background colors */ 
allCells.parent().parent().parent().find("tr:odd").css("background-color", "#EEEEEE") 
allCells.parent().parent().parent().find("tr:even").css("background-color", "")   

   .on("mouseover", function() { 
      var el = $(this); 
   .on("mouseout", function() { 
      /* No Background color */ 
      /* Alternating background color */ 
         allCells.parent().parent().parent().find("tr:odd").css("background-color", "#EEEEEE") 
         allCells.parent().parent().parent().find("tr:even").css("background-color", "") 


As you can see in the above code, the description dialog box is a div with the id “descDialog” and the div with the id “descText” has its html updated with the contents of the first cell of the clicked-on row in the JavaScript on click event.

If you do not want alternating background colors or row highlighting, just remove the relevant code form the JavaScript block.

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 example, and the others to come, show how extending BIRT Interactive Viewer is a snap thanks to Actuate’s JavaScript API. You can create any visualization imaginable using a resultset that you can access with a single JavaScript API call.

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.

Microservices for Java, explained. Revitalize your legacy systems (and your career) with Reactive Microservices Architecture, a free O'Reilly book. Brought to you in partnership with Lightbend.


Published at DZone with permission of Michael Singer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}