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.


 .black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 2400px;
height: 1200px;
background-color: black;
-moz-opacity: 0.8;
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;
overflow: auto;

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


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)
} else {

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)
} else {

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


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


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


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


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


        <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’.



Report Studio Layout

4 Report Studio setup


  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