Custom JavaScript in Cognos Analytics: Notifications
Date: 15/06/2017

By Paul Mendelson

In the previous article, I created a library for handling start/end date prompt validations in Cognos Analytics with custom JavaScript. This works beautifully, but end users may not understand why their selections are not working. A well designed page should include some form of notification explaining why certain actions are, or are not working.

Custom JavaScript - Notifications

There are two basic ways of dealing with this.

1. A text item magically appears near the prompt explaining the problem.
This is by far the easiest solution to build. The JS API already contains code to interact with text items. Let’s start by creating a blank text item under the prompts. Give it a name so the JavaScript API can access it. The config of the control can be modified to incldue the name of the text item, and the text item can be modified with the following code:

//this assumes the text item name is “textNote”

var txt =[“textNote”])
txt.text=’error message goes here’;

In my opinion, however, anything worth doing is worth overdoing. So let’s make it a little more noticeable. Let’s make the error text fade in, bounce a little, then fade away. To do this we can use jQuery and the <a href=”” target=”_blank”>textillate plugin</a>.

Let’s start by adding jQuery to the define:

define( [
 ], function(  )

We now require the plugins:

      require( [
    , “/javascript/jquery.textillate.js”

Now we need a link to the lettering css file (animate.css), but we really only need one. So let’s try the following:

//Create link to animate.css
  var cssFile = document.createElement(‘link’);
  cssFile.rel = ‘stylesheet’;
  cssFile.type = ‘text/css’;’animatecss’;
  cssFile.href = ‘/javascript/animate.css’;

This will check for the existence of the animatecss link, and create it if it doesn’t exist.
Now let’s create the animation for the notification:

if(textNote) {
        textNoteElm =;
          selector: ‘.texts’,
          loop: false,
          minDisplayTime: 2000,
          initialDelay: 0,
          in: {
            effect: ‘pulse’,
            sync: true,
            reverse: false,
            shuffle: false,
            callback: function () {$(textNoteElm).textillate(‘out’)}
          out: {
            effect: ‘fadeOut’,
            delayScale: 1.5,
            delay: 2500,
            sync: true,
            reverse: false,
            shuffle: false,
            callback: function () {}
          autoStart: false,
          inEffects: [],
          outEffects: [ ‘hinge’ ],
          callback: function () {},
          type: ‘char’

When the note becomes visible, it will pulse into existence. As soon as it finished pulsing in, it calls the out function. After a delay of 2500ms, the warning fades away.

Instead of a text item, we’ll use a block as a container for the error. The lettering plugin will modify the span to such an extent that the API will no longer work with it.

Modify the config to reference the block, and let’s use the following in one of the checks:

//basic check to ensure the from date is before than the to date.

   if(fromDt > toDt ) {
          $(textNoteElm).find(‘.texts li:first’).text(‘Start date cannot be later than the end date!’);

Now when we run it, the error message will magically appear.


The other common way is to create a popup message. For this we can turn to Bootstrap and use it’s popover feature.

First, we add Bootstrap to the define:

define( [
     , “”
 ], function(  ) {

Next, we need to add the bootstrap CSS, and we can use the same method we did for the animatecss:

  var cssFile = document.createElement(‘link’);
  cssFile.rel = ‘stylesheet’;
  cssFile.type = ‘text/css’;’bootstrapcss’;
  cssFile.href = ‘’;

The code to trigger the popover can be applied after the check for the text note:

    $(textNoteElm).find(‘.texts li:first’).text(‘Start date cannot be set before ‘ + moment(minDate).format(‘YYYY-MM-DD’));
  else {
    ctrl.element.setAttribute(‘data-content’,’Start date cannot be set before ‘ + moment(minDate).format(‘YYYY-MM-DD’));

The label is set as the data-content attribute on the date control element. It appears, waits 3 seconds, and hides after 3 seconds. After it’s hidden, the data-content attribute is cleared to prevent the popover from appearing when a new date is typed in or selected.


There are all sorts of ways we could use notifications and popups – for more than just errors. I’ll leave those as an exercise for the reader.

You can view the report and js files here: Custom JavaScript - Notifications


I hope you find this closer look at custom JavaScript notifications helpful.  If you haven’t already, be sure to check out my previous article on custom JavaScript on our blog for additional tips and tricks.   

If you would like to learn how Cornerstone and PMsquare can help your organisation, please reach out to us at:

Australia Singapore, Philippines, Thailand     United States
Cornerstone PMsquare | A Cornerstone Group Company     PMsquare

Call +61 1300 840 048 or
email Piers Wilson
Call +65 6635 1700 or
email Carsten Brandt
    Call +1 (708) 575 2092 or
    email Chris Loechel

Blog post shared courtesy of PMsquare LLC