Category Archives: web development

Custom WebFOCUS Double List Box Control

The double list box control that comes out-of-the-box with WebFOCUS meets most functional requirements. However, in one of my engagements, the double list box control didn’t have all the functionality required. So I took the challenge of creating my own in jQuery so it would be easy to integrate with WebFOCUS.

The additional functionality I added was:

  1. Being able to add more than 1 column to the boxes to provide more context on what was being selected
  2. Sorting of columns
  3. Search specific to only the double list box
  4. Custom sorting of items on the selected items using drag and drop functionality

Unfortunately, I can’t share this code with you, but the following video should give you a sense of what I created.

For those interested in learning more, feel free to reach me at: I will see what I can do for you!

WebFOCUS reports with sparklines – the jQuery approach


This post is going to provide step by step instructions on how to implement sparklines
within WebFOCUS reports using a jquery plugin rather than the standard Information
Builders approach. The major advantage with this technique is it’s quite simple to implement and maintain because of the small code footprint.

Who is this for?

  • Intermediate WebFOCUS knowledge is required
  • Some javascript / jquery knowledge would help but not required if you’re comfortable
    with reading APIs


In most reports, you typically have a column that represents a dimension (a grouping)
and values of measures for that row. Here’s an example:

Additional context that would be useful would be to provide how the measure is doing
over time. This is where sparklines can be used.

Wikipedia’s definition:

A sparkline is a very small line chart, typically drawn without axes or coordinates

Here is an example of a sparkline that shows the trend of a fictitious trading index:

Now I’m going to show you a way to do that with WebFOCUS.


  1. Download the Excel spreadsheet
    and upload it to your WebFOCUS application folder (mine is called sparkline-example)
    by right clicking on the folder, choosing ‘New’->’Upload Data’ and follow the wizard.
  2. This process will create a master file called Sheet1 assuming you choose all default
  3. Download this
    fex file
    and place into your WebFOCUS app folder that you added the Excel spreadsheet
    to. Read the in line comments to understand what’s going on.
  4. Finally, add the js files to your web application folder. You can download the js
    files here.

If you got everything set up properly, it should look like this when you run the
fex file.


The major gotcha is you will not be able to render this WebFOCUS report
as a PDF or do a page print with your browser. I.e. use this technique only if these are not required.