Creating JavaScript Functions in Active Reports

For those of us who love to (of just need to) expand Cognos beyond it’s built-in capabilities, one of the fundamental tools we use is the JavaScript function.  We use JavaScript to perform all kinds of reporting sorcery, and we create functions for those things that we call over and over again.For years this worked well.  Even after major releases, most of our functions continued to work with little or no modifications.

Then, one day IBM came out with Active Reports.  We were awed by it’s ability to make reports portable, and the fact that data was embedded into the reports also meant that the reports were super-fast when users changed filters or parameters.  But all of this came with a cost.  We lost the ability to create JavaScript functions and the <script> tags that should execute as soon as the report opened no longer functioned. We were still able to execute in-line JavaScript, but this had significant limitations.

Recently, I was reading a comment in LinkedIn by Paul Mendelson (aka CognosPaul) where he talked about creating a function when a user clicked a button.  Within the inline JavaScript, it checked to see if the function existed.  If it didn’t exist, it created it, otherwise it went on with the rest of the actions that the button-click demanded.  This did not satisfy my immediate requirement because I needed something to happen the moment the screen opened up, but it set me in the right direction.

How To Create Functions and Run JavaScript When the Report Opens

The key to this technique is the <img> tag which is one of the few to include an onLoad event.  This event fires as soon as the image is displayed.

Add an HTML item anywhere on the report, just make sure it’s somewhere that will always be rendered (on the page, but not inside any decks). Give the HTML item the following text:

<img src="hal/imagesirot/progress.gif" width="1" height="1" onload="
     while( ! alert) {} 
     /* Define the function */ 
     if (!document.testFunction ) { 
          testFunction = function() { 
               alert('We are running the test function'); 
          } 
     } 
     /* Run any startup actions */ 
     testFunction(); 
"/>

The first line of the onload event is sure to raise hairs on the back of your head. “while( ! alert) {}” will endlessly loop until it detects the existence of the “alert” function.  This is necessary because in Active Reports, the image will load (and the onload event of the image will fire) before the document has completed loading.  JavaScript developers usually avoid this type of loop because JavaScipt runs synchronously, so the browser locks up until the loop is satisfied.  In my testing, this loop has never caused a problem, however, if someone can suggest a better alternative, I’m certainly open to trying it.

The image is hidden (style=”display:none;”), so it won’t affect your layout. I chose to use the progress.gif image because it’s always loaded.  You can use your own image, however I would not recommend a 1×1 transparent gif.  I tested this and it worked fine on Windows (IE, Firefox and Chrome), but did not work correctly on Cognos Mobile (iPad or Android).  If you do use your own image, it must also be somewhere in the report using a standard Cognos Image element from the toolbox, so that the image is properly registered.  Otherwise the image will only work while you are online.

The first thing you should do following the “while” loop is to define any functions you need.  In the example above I’ve demonstrated the “testFunction”.After that you can run any JavaScript that needs to run when the report first opens.Coming soon… getElementById in Active Reports.

Revisions
2014-09-17 – Added details about the images that can be used and the placement of the HTML Item.