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.

Advertisements

19 Responses to Creating JavaScript Functions in Active Reports

  1. Noam Fine says:

    Bob, great post – this has helped me a ton. Using your method I have been able embed JavaScript in active reports for small tasks such as button clicks as well as large taks such as loading third party libraries (e.g. D3) to render custom visualizations that Cognos does not provide.

    Once again, thanks!!

  2. ibos says:

    Hi Bob, thanks for your good articles. I have tried this technique (running 10.2.2) and it results in the message box being dropped continuously on the page, without ever stopping. I even shortened the code down to

    but that makes no diff.; it still drops many message boxes, even after the page is completely rendered.

    Any idea why it might be failing?

  3. ibos says:

    removed the delimiters so the code would post:

    img src=”hal/imagesirot/progress.gif” width=”1″ height=”1″ onload=”
    alert(‘We are running the test function now’);
    “/

  4. Bob Reddert says:

    Irving,

    The only time I’ve seen that happen is when I had a a browser plugin that continually refreshed the page (Chrome’s Revolver – Tabs plugin).

    To get that one to only load once, I had to create a cookie.

    -Bob

    • Irving says:

      Hi Bob, this behaviour is only in IE. Works fine in FF and Safari on iPad. I have PMed you the JS code

      • Bob Reddert says:

        Irving,

        It sounds like you have a work-around.

        Keep in mind that the way Active Reports works, your hidden image could load before the document has been completely rendered. This is why it’s necessary to include the following line at the top of your onload event:
        while( ! alert) {}
        The bigger the report, the more important this becomes.

        Also, be sure that the placement of the html item containing your script is on the report page itself, and not inside any decks or other objects.

        Good luck!
        Bob

  5. Pingback: Wrapping radio prompts in an Active Report - CognosPaul

  6. Nachman says:

    Bob, thanks, you saved me with this one

  7. Yury says:

    thank you for your blog!
    I’m not so good in JS, so please, could you help to run jquery this in Active Report?
    this code for example

    https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js
    https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js

    var j = jQuery.noConflict();
    j(document).ready(function()
    {
    j(‘.ShowHideList’).hide();
    j(‘.ShowHideClicker’).click(function()
    {
    j(this).next().toggle();
    });
    });

    • Bob Reddert says:

      Sorry Yury, but I’m not going to be much help here. This technique has only been tested with unextended JavaScript.

      I have never tried to use JQuery in a Cognos report and know of nobody who has done this. JQuery requires the installation of a JQuery library on the server and I usually don’t have that kind of access to the server in a Cognos environment. Even if you did get the JQuery library installed, Active Reports run on the client alone, so I don’t know what complications you might encounter. It certainly would not work when the Active Report was being viewed off-line.

      I would recommend that you look for a way to accomplish your task without using JQuery.

      Best of luck!
      Bob

    • David Chacon says:

      Hi guys, I am a front-end developper I did not know Cognos recently i am new to cognos.

      I found a way to include jQuery into active report by using the img onload too.
      There are a few things you need to be careful though.

      – Make sure you put “;” after every variable declaration or functions
      – sometimes the “” tags wont work tou need to encode them like : < or > same thing with && or .
      – comments starting by // wont work too

      Although I was able to create a huge active report using jquery, had some bugs but i always found a was to fix them.

      Have fun 🙂

      BTW, Right now I am trying to include the jquery librairie into cognos active report so my client can see it offline…If anyone has an advice for that I’d be glad to hear about it =)

      here is how you can use jquery and everything that comes with it.
      I let some code to show you how to declare functions and fix some glitches when you use an Ipad.

      Enjoy!

  8. zaid says:

    hi
    can we use active variables in javascript.? and how can we change the values of active variables using script can you please share an example . THanks

    • Bob Reddert says:

      Zaid,

      I assume you mean directly changing the variable in JavaScript code. Everything within the Active Report is controlled through JavaScript, so it’s probably possible to reverse-engineer it to determine how to do this. However I have not invested the time to figure this out and I haven’t read of anybody else doing this either.

      Nevertheless, I have accomplished this indirectly by using JavaScript to alter a Data Radio Button Group which in turn alters the variable.

  9. Pingback: How to Set an Active Report Variable in JavaScript | Bob's Business Intelligence Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: