2100 Clearwater Dr. Suite 330, Oak Brook IL 60523

1-(708) 575-2090 contact@pmsquare.com Visit our other locations: australia singapore philippines

Custom JavaScript in Cognos – Modifying Prompts

Custom JavaScript in Cognos

In this article I continue to explore ways to use custom JavaScript in Cognos.  This is the fourth article on the topic (I really like custom JavaScript in Cognos) so be sure to check out my other blogs.  In the previous article, I looked at how to create notifications to explain why certain actions are or are not working.

 

In all of the versions of Cognos, many people had complaints about the way prompts looked or behaved. From the default settings in the search and select prompts, to making checkbox prompts horizontal. Many scripts were written to make the necessary changes, but those won’t work in C11. So now is our chance to rewrite those to meet our needs.  Let’s roll up the sleeves and dive into some more custom JavaScript in Cognos!

Horizontal Radio and Checkboxes

One of the first JavaScript widgets I wrote was to make checkbox prompts horizontal. It looped through all of the options, and applied an inline display:inline-block to each of them. It worked quickly and efficiently, and a lot of people used it. Cognos Analytics gives us the opportunity to improve on this script.

Let’s start with radios. The HTML structure of the radio prompt is pretty simple. Simplified, it looks like:

[sourcecode language=”html”]
<div class=”clsPromptSelectValue”>
<div class=”clsAdornmentsArea”>
<img src=”cchl/images/icon_required.gif”>
</div>
<div>
<div>
<div class=”clsInputArea”>
<div class=”clsListView clsDialogText” role=”radiogroup”>
<div class=”clsListItem_normal” >
<img alt=”” src=”hal/images/lv_radio.svg” class=”clsLVRadio”>
<span>Lorem</span>
</div>
<div class=”clsListItem_normal”>
<img alt=”” src=”hal/images/lv_radio.svg” class=”clsLVRadio”>
<span>Ipsum</span>
</div>
</div>
</div>
</div>
</div>
</div>
[/sourcecode]

We can simply loop through all of the divs with the class clsListView and set those to inline-block.

Let’s take a look at a checkbox prompt now.
[sourcecode language=”html”]
<div class=”clsInputArea”>
<div class=”clsListView”>
<table>
<tbody>
<tr role=”option” checkboxitem=”true” tabindex=”0″ aria-label=”Lorem” aria-checked=”false”>
<td>
<div class=”clsListItem_normal”>
<img src=”hal/images/lv_checkbox.svg”>
<span>Lorem</span>
</div>
</td>
</tr>
<tr role=”option” checkboxitem=”true” tabindex=”-1″ aria-label=”Ipsum” aria-checked=”false”>
<td>
<div class=”clsListItem_normal”>
<img src=”hal/images/lv_checkbox.svg”>
<span >Ipsum</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
[/sourcecode]

A little less pretty, but still workable. We could create a new row in the prompt, and append the clsListItem_normal divs. But for some strange reason, the “Select All” buttons recreates all of the checkboxes! Any changes we do to those rows are lost whenever a user selects all of the prompts. Instead, we have to be clever here. Let’s append a className to the clsListView, since that isn’t affected by the “Select All”, then we just need to programmatically add a style element:

[sourcecode language=”javascript”]
if(!document.getElementById(‘horizPrompt’)){
var styleNode = document.createElement(‘style’);
styleNode.type = ‘text/css’;
styleNode.id=’horizPrompt’;
if(!!(window.attachEvent && !window.opera)) {
styleNode.styleSheet.cssText = ‘.horizPrmpt tr{display:inline-block} .horizPrmpt div.clsListItem_normal{display:inline-block}’;
} else {
var styleText = document.createTextNode(‘.horizPrmpt tr{display:inline-block} .horizPrmpt div{display:inline-block}’);
styleNode.appendChild(styleText);
}
document.getElementsByTagName(‘head’)[0].appendChild(styleNode)
}
[/sourcecode]

If the style node already exists, we can skip it. If it doesn’t, create one that looks for the horizPrmpt class, then looks for any table rows or divs, setting them to inline-block.

Add a little styling to make the prompt look good, and we’re done!

 

Custom JavaScript in Cognos1-horizontal-radios

 

Custom JavaScript in Cognos 2-horizontal-checkboxes

 

Select and Search Fixes

The new select and search prompts are gorgeous. Streamlined, fast, compact. Several steps fowards over the old, ugly, Cognos 10 select and search.

Compare:

Custom JavaScript in Cognos 3-new-sns

 

To:

 

Custom JavaScript in Cognos 4-old-sns

Now despite the advancements, there are a few issues. The biggest complaint about this is that the prompt doesn’t remember previous selections, meaning you can’t make two searches with selections from both.

Custom JavaScript in Cognos 5-sns-forgets-previous-selection

The solution here is a little more complex. First, we need to attach an event to the search button and input box to store the selected values in session storage:

[sourcecode]
, setVals = function() {sessionStorage.setItem(o[“promptName”]+’values’, JSON.stringify(prmptCtrl.getValues()))}
$(srchBttn).bind(‘click’,setVals);
$(srchTxt).keyup(function(event){if(event.keyCode == 13){setVals()}});
[/sourcecode]

Then it’s a simple matter of using a validator to reapply the values:

[sourcecode]
 var rememberPrompts = function(){

if(!sessionStorage.getItem(o["promptName"]+'values')) return true;
 prmptCtrl.setValidator(function(){});
 prmptCtrl.addValues(JSON.parse(sessionStorage.getItem(o["promptName"]+'values')));
 sessionStorage.setItem(o["promptName"]+'values','');
 prmptCtrl.setValidator(rememberPrompts);
return true;
 }

prmptCtrl.setValidator(rememberPrompts);
 [/sourcecode]

Now when we search for a new value, be it by pressing enter or clicking on the button, it remembers the previously selected value!

 

Custom JavaScript in Cognos 6-sns-remembers

Formatting Prompts

I have seen the occasional request for advanced formatting options in prompts. When a value is selected, the background color should be different, the cursor should be set to a pointer, the text should spin around whenever the user hovers over it. Completely normal requests for a business intelligence application, but Report Studio doesn’t have a native way of providing this essential functionality.

The way to solve this is to give the report developer the ability to specify the styles wanted for each individual prompt. The script will then take the element ID of the prompt, and prepend that before the generated classes. This allows a developer to specify two separate styles for two separate prompts of the same type.

The configuration file for this script is significantly more advanced than the previous scripts. Here, not only do we specify the name of the prompt, but we write in the desired CSS. This is done by means of an array in the config JSON:

{
“promptName”: “stylePromptRadio”,
“styles”: [
{
“className”: “clsDialogText”,
“style”: “color: transparent;   text-shadow: 0 0 5px rgba(0,0,0,0.5); ”
},
{
“className”: “clsLVRadio_checked+span”,
“style”: “text-shadow:none”
}
]
}

In this case, we are calling the prompt named stylePromptRadio, and adding two classes. clsDialogText will have a text shadow making a bit blurry by default, but the checked one will not have this shadow. Let’s see it, and a few others in action.

 

Custom JavaScript in Cognos 7-lookit-the-pretty-spinning-prompt-values

 

Conclusion

I hope you find this closer look at custom JavaScript in Cognos 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.  Subscribe to our e-newsletter for more technical articles and updates delivered directly to your inbox.

 

 

SUBSCRIBE

 

If you would like to learn more how PMsquare can help your organization please reach out to us at:

United States Australia Singapore, Philippines, Thailand
PMsquare LLC Cornerstone PMsquare | A Cornerstone Company
P: 708-575-2092
E: Chris Loechel
P:+61 1300 840 048
E: Piers Wilson
P:+65 6635 1700
E: Carsten Brandt

Blog post shared courtesy of PMsquare LLC