Javascript in Cognos Analytics >R4: Hello world!

In R4 the possibility to add your own javascript code has returned. Welcome back! In this entry (and the following ones) I will try to dig into what’s new and where you have to pay attention.

At first – if you watched the introduction video for R4 – it sounded like the HTML-item just got replaced with the new custom control. So, what’s the fuzz about?

Basically it’s not that simple. There are actually 3 types now:

  • HTML- item: for your basic HTML and CSS needs
  • Custom control object (new): Provide your own user interface
  • Page module (new): Basically javascript code, which affected the whole page

Instead of a pasting code inline inside the html item you know specify a path to a file location. Cognos forces you to run a clean house (which is a good thing!).

What you need to know: Cognos now uses RequireJS (which is new for me) to load the javascript code. I strongly suggest you take a look at the technote (link below) where this approach is explained in far more detail.

Enough foreplay, let’s get a hello world out there. First off create a new file where you want to locate your script code. It should be placed in a folder which is accessible by the webserver – for simplicity reasons I just used the analytics -> webcontent -> bi -> js folder and placed a hello_world.js there.
page_moduleFor our first example we want to use the so called page module. It is located in the page properties: General -> Module Path. There we can locate the file we just created (check the screenshot). In case the file is not accessible or cannot be found you get a nice clear error.

In C10 you would (probably) have used a html item and some inline code. Now you need get comfortable with RequireJS and the AMD format (at least a little bit) – for our example though none of that is neccessary.

Let’s add some basic code to our hello_world.js. The snippet below is taken right out of the documentation from the technote (see link below).

define( function() {

function PageModule()
{};

PageModule.prototype.load = function( oPage )
{};

PageModule.prototype.show = function( oPage )
{

alert('Boy, these pretzels are makin' me thirsty.');

};

PageModule.prototype.hide = function( oPage )
{};

PageModule.prototype.destroy = function( oPage )
{};

return PageModule;
});

Now, run the report et voila: you should see an alert message popping up.

success_jsWell done – wait what did we actually do now? For the page module there are a few functions available, which get fired a specific moments in time. The hide function for example will be run, when the report is being hidden. We could have left it out, because it is optional. In fact, every function is optional – so in our case it would have been enough to use the following code:

define( function() {

function PageModule()
{};

PageModule.prototype.show = function( oPage )
{
alert('Boy, these pretzels are makin me thirsty.');
};

return PageModule;
});

We can’t use simple inline code anymore, instead we need to encapsulate the code as defined by the AMD method. The alert code could now be replaced with any other code.

This very basic introduction should get you up and walking. Note, that if you want to use the custom control you have to use different functions.

In the following sections I will deliver more details and examples (e.g. usage of JQuery).

I have to admit that this as a very good and clean approach used by IBM! Congrats!

IBM technote

Advertisements

5 thoughts on “Javascript in Cognos Analytics >R4: Hello world!

  1. Hi,

    I am using 11.0.5 and the pop up is not appearing.

    I created the same .js file and kept in an accessible path and called it through the Page properties->module path.

    Meli

    Liked by 2 people

    1. Hi Meli,

      just a few things from the top of my head:
      – is your report running in full interactive mode?
      – do you see any message / error at all?
      – could you check your console (F12) for any errors appearing?

      I’m gonna recheck the steps with 11.0.5, but they should be the same.

      Chris

      Liked by 2 people

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