Using Cognos 10.2 Prompt API to create a multi-select popup prompt

This solution uses javascript, cascading style sheets and the prompt API to neatly provide a multi-select control that doesn’t use a lot of screen real estate

The control

The control

When clicked, this pops up

When clicked, this pops up

After a reprompt, the list is filtered

After a reprompt, the list is filtered

I’ve put together a fully working example against the GOSales (query) package, click the download icon below to get the complete package:
Click to Download

There are a few pieces required to make this all work:

  • A CSS script – popup_multi_AM.css
  • A Javascript file – popup_multi_AM.js
  • Five HTML items
  • A text box prompt
  • A list box prompt
  • An image – DropDownPlus.png

Note that all of the examples below are hard coded for a ‘Product’ control.

popup_multi_AM.css

 .black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 2400px;
height: 1200px;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=70);
}
.white_content {
display: none;
position: absolute;
top: 50px;
left: 25%;
width: 500x;
height: 520px;
padding: 16px;
border: 4px solid #002776;
background-color: white;
z-index:1002;
overflow: auto;
}

.DisplayMulti.clsTextWidget {
background-image: url('../../images/DropDownPlus.png');
background-repeat:no-repeat;
background-position:120px -3px;
cursor: arrow;
}

popup_multi_AM.js

function Submit_Multi (PromptName)
{
var oCR = cognos.Report.getReport("_THIS_");
var vMulti = oCR.prompt.getControlByName( 'pr' + PromptName ).getValues();
// build text string to show in text box from selected options
if (vMulti.length>0)
{
// loop through all options ticked in prompt
for(var i=0;i<vMulti.length;++i) { // treat alpha parents differently to numeric cost centres var pattern = RegExp("[A-Za-z]") if (pattern.test(vMulti[i].use.substring(0,1))) { // first character is alpha var vMultiSelected = vMulti[i].use; // remove leading .'s f vMultiSelected = vMultiSelected.replace(/[.]/g,''); } else { // first character is numeric var vMultiSelected = vMulti[i].use.substring(0,5); } // append appropriate string to text box if (i==0) { var vTextBoxDisplay = vMultiSelected; } else { vTextBoxDisplay = vTextBoxDisplay + ', ' + vMultiSelected; } } // truncate to fit text in text box. if it's too long, truncate and append an elipsis if (vTextBoxDisplay.length > 17)
{
oCR.prompt.getControlByName( 'prDisplay' + PromptName ).setValues( [{'use': vTextBoxDisplay.substring(0,17) + '…', 'display': vTextBoxDisplay.substring(0,16) + '…'}]);
} else {
oCR.prompt.getControlByName( 'prDisplay' + PromptName ).setValues( [{'use': vTextBoxDisplay, 'display': vTextBoxDisplay}]);
}
} else {
// nothing selected
oCR.prompt.getControlByName( 'prDisplay' + PromptName ).clearValues();
oCR.prompt.getControlByName( 'prDisplay' + PromptName ).setValues( [{'use': 'All', 'display': 'All'}] );
}

// Hide Lightbox
document.getElementById('light_' + PromptName).style.display='none';
document.getElementById('fade_' + PromptName).style.display='none';

// Show page level scrollbars, if present
// work in both Cognos Connection and Report Studio`
if (document.getElementById('RVContent_NS_') != null)
{
document.getElementById('RVContent_NS_').style.overflow='visible';
} else {
document.getElementById('RVContentRS').style.overflow='visible';
}
}

function HideLightbox (PromptName) {
document.getElementById('light_' + PromptName).style.display='none';
document.getElementById('fade_' + PromptName).style.display='none'
}

function ShowLightbox (PromptName) {
// work in both Cognos Connection and Report Studio
if (document.getElementById('RVContent_NS_') != null)
{
document.getElementById('RVContent_NS_').style.overflow='hidden';
} else {
document.getElementById('RVContentRS').style.overflow='hidden';
}

document.getElementById('light_' + PromptName).style.display='block';
document.getElementById('fade_' + PromptName).style.display='block';
}

popup_multi_HTML_Initialise

<link rel="stylesheet" type="text/css" href="../../../styles/popup_multi_AM.css">
<script type="text/javascript" src="../../../scripts/popup_multi_AM.js"></script>

popup_multi_HTML_1

<div onclick = "javascript:ShowLightbox('Product');" class="DisplayMulti">

popup_multi_HTML_2

</div>
<div id="light_Product" class="white_content">

popup_multi_HTML_3

<img src="../../images/submit.png" border="0" onclick = "javascript:Submit_Multi('Product')" />

popup_multi_HTML_4

</div>
        <div id="fade_Product" class="black_overlay" onclick = "javascript:Submit_Multi('Product');"></div>

Text Box prompt

This control must have the ‘Name’ property set to ‘prDisplayProduct’

List Box prompt

This control must have the ‘Name’ property set to ‘prProduct’.

DropDownPlus.png

DropDownPlus

Report Studio Layout

4 Report Studio setup

2 Comments

  1. meli says:

    I am trying to implement similar popup multiselection in Cognos 11.0.5.
    Tried to use this code but no help. any work around you have.

Leave a Comment