Cognos BI Javascript: Add a Listener to Tab selection and all sort of prompts manipulation
Time for another multi-page dashboard related JS. It’s fairly complex (I’m not a js programmer, so am biased), works for 10.1 (and should work onwards and backwards, I don’t rely on cognos prompt syntax). The story behind it is quite simple: we’ve started doing dashboard pages as a global prompt on top and multiple report frames in the bottom. All went well up untill the point when global prompts had to change with regards to selected tab (some versions avalaible only on certain tabs, some have to be renamed, etc).
So this script adds an “onClick” function call to every tab name click, so when user selects a tab, you can add additional processing, for example, show/hide prompts or add / remove prompt values. I’m manipulating prompts as basic html.select objects, so it’s only for drop-down prompts now.
I generally try to avoid javascript at all costs, so after looking at resulting code for a day or two, we rolled our sleeves and “moved” global prompts into detailed reports. Way easier to understand and maintain, no javascript used anymore. Javascript is “dark side of the power”, use it wisely.
I’m leaving some tab names in the script as an example:
// show or hide prompt drop-down on portal page
function showHideDropDownPrompt(parameterName,visibility)
{
//all drop-down prompts on page are HTML select objects
var allElements = document.getElementsByTagName('select');
//alert(allElements.length);
for (var i = 0; i < allElements.length; i++) {
//alert (allElements[i].innerHTML);
if (allElements[i].innerHTML.indexOf(parameterName) > -1)
{
// alert('Prompt ' + parameterName + ' found');
//and hide / show it
allElements[i].style.visibility = visibility;
}
}
}
// need a function to remove options in scenario prompt
function removeDropDownPromptOption(parameterName,option)
{
//all prompts on page by select tag
var allElements = document.getElementsByTagName('select');
for (var i = 0; i < allElements.length; i++)
{
//alert (allElements[i].innerHTML);
if (allElements[i].innerHTML.indexOf(parameterName) > -1)
{
for (var o = 0; o < allElements[i].length; o++)
{
//alert ( allElements[i].options[o].text);
// error on the next line
if (trim(allElements[i].options[o].text.replace(/\s/g, "")) == option.replace(/\s/g, ""))
{
//alert ('Trying to remove option');
allElements[i].remove(o);
}
}/**/
}
}
}
// add previously removed option back to prompt
function addDropDownPromptOption(parameterName,optionDisplayName, optionValue, optionPosition)
{
//all prompts on page by select tag
var allElements = document.getElementsByTagName('select');
elementAlreadyPresent = false;
promptPosition = 0;
for (var i = 0; i < allElements.length; i++)
{
//alert (allElements[i].innerHTML);
if (allElements[i].innerHTML.indexOf(parameterName) > -1)
{
promptPosition = i;
for (var o = 0; o < allElements[i].length; o++)
{
//alert ( allElements[i].options[o].text);
// error on the next line
if (trim(allElements[i].options[o].text.replace(/\s/g, "")) == optionDisplayName.replace(/\s/g, ""))
{
//alert('Element ' + optionDisplayName + ' already present');
elementAlreadyPresent = true;
}
}/**/
}
}
if (! elementAlreadyPresent)
{
//alert ('Option not found, adding it');
var option=document.createElement("option");
option.dv = optionValue;
option.text=optionDisplayName;
option.value= optionValue;
try
{
// for IE earlier than version 8
allElements[promptPosition].add(option,allElements[promptPosition].options[null]);
}
catch (e)
{
allElements[promptPosition].add(option,null);
}
}
}
// need a function to rename options in scenario prompt, value remains the same, just display name changes
function renameDropDownPromptOption(parameterName,optionTextBefore, optionTextAfter)
{
//all prompts on page by select tag
var allElements = document.getElementsByTagName('select');
for (var i = 0; i < allElements.length; i++)
{
//alert (allElements[i].innerHTML);
if (allElements[i].innerHTML.indexOf(parameterName) > -1)
{
for (var o = 0; o < allElements[i].length; o++)
{
//alert ( allElements[i].options[o].text);
// error on the next line
if (trim(allElements[i].options[o].text.replace(/\s/g, "")) == optionTextBefore.replace(/\s/g, ""))
{
//alert ('Trying to remove option');
allElements[i].options[o].text=optionTextAfter;
}
}/**/
}
}
}
// add listener function to each tab so that we can work around any prompt differences between tabs
function addListenerToTabs()
{
//all links on page, tabs are links
var allElements = document.getElementsByTagName('a');
for (var i = 0; i < allElements.length; i++)
{
// all links with role = 'tab'
if (allElements[i].outerHTML.indexOf('role="tab"')!==-1)
{
//Attach event handler with Tab Name
allElements[i].onclick = function ()
{ clickedTab(this.innerHTML); };
}
}
}
// Listener for clicked tab event
function clickedTab (tabName)
{
//alert("Selected tab " + tabName);
switch (tabName) {
case 'Summary':
resetGlobalPrompts();
// hide Scenario prompt
showHideDropDownPrompt('pVersion','hidden');
break;
case "Production":
resetGlobalPrompts();
// if it's a nested tab, we have to reattach listeners
self.setTimeout("addListenerToTabs()",5000);
break;
default: resetGlobalPrompts(); break;
}
}
//Undo all evil done to global prompts and formatting
function resetGlobalPrompts() {
showHideDropDownPrompt('pVersion','visible');
// need to add Prior Year Actuals back to Scenario prompt
addDropDownPromptOption('pVersion','Prior Year Actual','Prior Year Actual',5);
// rename target back to budget
renameDropDownPromptOption('pVersion','Current Year Target','Budget');
}
// find currently selected tab
function selectedTab() { tabName = '';
//try finding active tab by class
var elems = document.getElementsByTagName('*'), i;
// properly selected tab is cogstyle-htabs-active in class 'cogstyle-htabs-bar'
// all previously selected tabs are marked cogstyle-htabs-active as well, so we have to do a nested search
for (i in elems) { if( ( (' ' + elems[i].className + ' ').indexOf(' ' + 'cogstyle-htabs-bar' + ' ') > -1))
{
//alert ('Found an tabs bar');//
alert (elems[i].innerHTML);
// all tab names are links
var activeTabs = elems[i].getElementsByTagName('*'), j;
for (j in activeTabs)
{
if((' ' + activeTabs[j].className + ' ').indexOf(' ' + 'cogstyle-htabs-active' + ' ')
> -1)
{
var allLinks= activeTabs[j].getElementsByTagName('a');
for (var i = 0; i < allLinks.length; i++)
{
// all links with role = 'tab'
if (allLinks[i].outerHTML.indexOf('role="tab"')!==-1)
{
//alert(allLinks[i].innerHTML);
tabName = allLinks[i].innerHTML;
}
}
}
}
}
}
alert (tabName);
return tabName;
}
function init()
{
var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);
if ( !fW || fW == undefined) { fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );}
if (fW)
{
clickedTab(selectedTab());
addListenerToTabs();
return;
}
}
self.setTimeout("init();",500);