Checkbox List Prompts revisited

A long while back, I published an article detailing how to use a list to interact with a checkbox prompt. Since then, several people have asked me to add features to the code, and to fix some bugs. I’ve also learned quite a bit since I wrote that, so I’ve rewritten a parts of it.

The basic core of the code is the same. Using div tags to identify the list and prompt objects, with more HTML items to build the actual checkbox in the list. This is by no means optimized JavaScript, nor is it using the 10.2 Prompt API.

Previously the code would only work with one list. The reference to the list was hardcoded in the script and the checkboxes and select all buttons would fail for the second list. Also requested, using grouped rows. For instance, a user might want to select all of the months in 2011 by checking on the checkbox in the 2011 group. Another thing I fixed was the way it would loop through value prompts to find the correct value. If the key had any special characters, it wouldn’t be able to find it. Cognos would automatically escape those special characters.

The XML below was written on 10.2, but will downgrade easily to 10.1 by changing

xmlns="http://developer.cognos.com/schemas/report/9.0/"

to

xmlns="http://developer.cognos.com/schemas/report/8.0/"

The JavaScript will work in 8.4 as well, but downgrading will be a bit more difficult – you need to use /report/6.0/ and remove all of the version 10 only XML elements. If there’s a demand for it, I’ll go through and post all of the different JavaScript objects here. (But there shouldn’t be, because 10.2 is the greatest things since 10.1.1 and you should all upgrade and IBM should be paying me push upgrades like this.)

checkbox-List-Prompt.txt (1390 downloads)

Button Prompts in Cognos 10

One of the features I’ve always wanted is buttons that set parameters. The existing prompt buttons just serve to provide navigation features to Cognos reports. You can’t, for instance, press the “Mountaineering Equipment” button and see a report which is filtered by mountaineering. Yes, you can use regular checkbox or radio prompts to do this, but that is hardly the point, is it? I want good, old fashioned buttons!

Consider the following screenshot:
report with buttons

There are buttons going across the top, to let the user select which product line, and buttons going down the left to let the user select how he wants to view the report (xtab, bar, or column).

It would be possible to use standard checkbox or radio prompts with this, but it wouldn’t look nearly as good. Some developers may be tempted to manually create the buttons with extensive use of HTML items. It would work, a certain developer (who will remain anonymous here) used that method for a series of reports and I still get calls asking how to add or remove buttons.

Instead, it is infinitely easier to write JS function that creates the button elements on the fly based on an existing prompt.

Read the following JS (10.2 only):

<script>

/*
  * Function: addEvent
  * Author: Dan Fruendel
  * Attachs an event or adds an event listener depending on the browser.
  */
var
  addEvent = function(element, event, func)
  {
    if(element.addEventListener)
    {
      addEvent = function(element, event, func)
      {
        element.addEventListener(event, func, false);
        return true;
      };
    }
    else if(element.attachEvent)
    {
      addEvent = function(element, event, func)
      {
        return element.attachEvent("on" + event, func);
      };
    }
    else
    {
      addEvent = function(element, event, func)
      {
        var oldEventHandler = element['on' + event];
        element['on' + event] = function()
        {
          //using .apply to pass on anything this function gets.
          if(typeof(oldEventHandler) === "function")
          {
            oldEventHandler.apply(element, arguments);
          }
          func.apply(element, arguments);
        }
        return true;
      };
    }
    return addEvent(element, event, func);
  }
/*
 * Fake Namespace and prompt getters.
 */
var paulScripts = {}
  , oCR = cognos.Report.getReport("_THIS_");

paulScripts.getSource = function()
{
    var targ;
    if (!e) var e = window.event;
    if(!e) return false;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
      targ = targ.parentNode;
    return targ;
}

paulScripts.getControl = function(promptName) {
  return oCR.prompt.getControlByName(promptName);
}

paulScripts.reprompt = function(){
if(!paulScripts.getSource() ) return true;
  oCR.sendRequest(cognos.Report.Action.REPROMPT);
  return true;
}

paulScripts.addButtons = function ( promptName, myClass,reprompt) {
var
    newOption = ''
  , reprompt = reprompt?reprompt:false
  , id = paulScripts.getControl ( promptName )._id_
  , selElm = document.getElementById('PRMT_SV_'+ id)
  , selElmSelect = document.getElementById('PRMT_SV_LINK_SELECT_'+ id)
  , selElmDeselect = document.getElementById('PRMT_SV_LINK_DESELECT_'+ id)
  , rads = selElm.getElementsByTagName('input')
  , len = rads.length
  , type = len==0?'none':rads[0].type
  , radioClick = function(){for(var radios=paulScripts.getSource().parentNode.getElementsByTagName('input').length/2;radios<paulScripts.getSource().parentNode.getElementsByTagName('input').length;radios++){paulScripts.getSource().parentNode.getElementsByTagName('input')[radios].className=myClass + 'Unselected'};paulScripts.getSource().parentNode.getElementsByTagName('input')[paulScripts.getSource().index].click(); paulScripts.getSource().className=myClass + 'Selected'}
  , checkClick= function(){paulScripts.getSource().parentNode.getElementsByTagName('input')[paulScripts.getSource().index].click(); paulScripts.getSource().className=paulScripts.getSource().className==myClass + 'Selected'?myClass + 'Unselected':myClass + 'Selected';}
  , selectAll= function(){ for(var elms=rads.length;elms>rads.length/2;elms--){rads[elms-1].className=myClass + 'Selected'}}
  , deselectAll= function(){ ; for(var elms=rads.length;elms>rads.length/2;elms--){rads[elms-1].className=myClass + 'Unselected'}}
;
  selElm.className = myClass;

  if(type == 'none') return false;

  for(i=0;i<len;i++)
  {
    newOption = document.createElement( 'input');
    newOption.type='button';
    newOption.value=rads[i].getAttribute('dv');
    newOption.className=rads[i].selected?myClass + 'Selected': myClass + 'Unselected';
    newOption.index=i;
    if(type=='checkbox') {addEvent(newOption,'click',checkClick)};
    if(type=='radio') {addEvent(newOption,'click',radioClick)};
    rads[i].parentNode.parentNode.style.display='none';
    selElm.appendChild(newOption );
  }

  if(reprompt) paulScripts.getControl ( promptName ).setValidator(paulScripts.reprompt);

  if(selElmSelect) addEvent(selElmSelect,'click',selectAll);
  if(selElmDeselect) addEvent(selElmDeselect,'click',deselectAll);
}

paulScripts.addButtons('Products','Horizontal',1);
paulScripts.addButtons('Reports','Vertical');

</script>

Look complicated? It’s actually not complicated at all. The first function there was written by a friend (and if you think I’m good at JS… he’s the kind of person to look at some code, think for 5 minutes and rewrite it using half the lines and make it run several times faster), it allows you to attach events in different browsers. The getSource function is there because some browsers have issues with THIS. getControl is the 10.2 method of identifying the referenced prompt object. The reprompt function is simply the way I force the report to refresh (on checkbox prompts, for instance).

The meat of the function is in the addButton function. First it finds the prompt object you’re referencing (using 10.2 methods, needs a rewrite if using in earlier versions). Next it determines if the prompt is a checkbox or radio. If it’s neither, the function exits. Then it starts creating the actual button elements. It generates an array of all of the elements in the prompt, then for each one creates a button using the display value and hides the original element. Each generated button has a click function that will, in turn, click on the correct checkbox or radio in the original prompt.

The buttons each have a class based on if it’s selected or not. Clicking on the button will alternate between selected/unselected. The style will have to be included in an HTML item as well. Each style must have three entries, styleName for the top box, styleNameSelected for selected buttons, and styleNameUnselected for unselected buttons.

If the reprompt option is set to true, then it will add the reprompt function to the validator, essentially making it an autosubmit prompt.

Finally, if this is a checkbox group, it will add functions to the select and deselect all links under the prompt.

To use the prompt, it’s then a simple matter of creating your prompt object on the page, naming it, and calling the function. So in the above screenshot there are two prompts on the page. A multiselect checkbox (based on the product line dimension) above the crosstab, and a radio button (with static choices) to the left. The function is called twice, once for each prompt. The reprompt flag is set for the checkbox prompt, while the radio is set to autosubmit in the report.

I wrote some simple CSS to highlight the buttons when selected:

<style>
.Vertical{
  width:'';
  height:'';
}

.VerticalUnselected{
  padding:2px 10px 3px 10px;
  margin-right:7px;
  background-image:url(../reportstyles/images/button_bg.png);
  background-position:left top;
  background-repeat:repeat-x;
  background-color:#EFEFEF;
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  text-align:center;
  border:1px solid #92afc2;
  width: 75px;
  display:block;
}

.VerticalSelected{
  padding:2px 10px 3px 10px;
  margin-right:7px;
  background-image:url(../reportstyles/images/button_bg.png);
  background-position:left top;
  background-repeat:repeat-x;
  background-color:#A0AFEB;
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  text-align:center;
  border:1px solid #92afc2;
  width: 75px;
  display:block;
}

.Horizontal{
  width:0;
  height:0;
  white-space:nowrap;
}

.HorizontalUnselected{
  padding:2px 10px 3px 10px;
  margin-right:7px;
  background-image:url(../reportstyles/images/button_bg.png);
  background-position:left top;
  background-repeat:repeat-x;
  background-color:#EFEFEF;
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  text-align:center;
  border:1px solid #92afc2;
}

.HorizontalSelected{
  padding:2px 10px 3px 10px;
  margin-right:7px;
  background-image:url(../reportstyles/images/button_bg.png);
  background-position:left top;
  background-repeat:repeat-x;
  background-color:#A0AFEB;
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  text-align:center;
  border:1px solid #92afc2;
}

</style>

Each button group can have it’s own unique style, if so desired. Just remember to write the CSS for each one.

Ultimately the report consists of 2 prompts, 2 graphs, a crosstab, a conditional block and a single HTML item.

The report XML (10.2, sales and marketing) below:

<report xmlns="http://developer.cognos.com/schemas/report/9.0/" useStyleVersion="10" expressionLocale="en-us">
				<modelPath>/content/folder[@name='Samples']/folder[@name='Cubes']/package[@name='Sales and Marketing (cube)']/model[@name='2008-07-25T15:28:38.072Z']</modelPath>
				<drillBehavior/>
				<layouts>
					<layout>
						<reportPages>
							<page name="Page1">
								<style>
									<defaultStyles>
										<defaultStyle refStyle="pg"/>
									</defaultStyles>
								</style>
								<pageBody>
									<style>
										<defaultStyles>
											<defaultStyle refStyle="pb"/>
										</defaultStyles>
									</style>
									<contents><table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse;width:100%"/></style><tableRows><tableRow><tableCells><tableCell><contents/></tableCell><tableCell><contents><selectValue parameter="Products" refQuery="Products" multiSelect="true" required="false" name="Products" selectValueUI="checkboxGroup"><useItem refDataItem="Product line"/><style><CSS value="height:0px;width:0px"/></style></selectValue></contents></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents><selectValue selectValueUI="radioGroup" name="Reports" autoSubmit="true" parameter="ReportType" hideAdornments="true"><selectOptions><selectOption useValue="1"><displayValue>Columns</displayValue></selectOption><selectOption useValue="2"><displayValue>Bar</displayValue></selectOption><selectOption useValue="3"><displayValue>Crosstab</displayValue></selectOption></selectOptions><style><CSS value="width:0px;height:0px"/></style><defaultSelections><defaultSimpleSelection>1</defaultSimpleSelection></defaultSelections></selectValue></contents><style><CSS value="vertical-align:top"/></style></tableCell><tableCell><contents>
												<conditionalBlocks>
			<conditionalBlockDefault>
				<contents/>
			</conditionalBlockDefault>
		<conditionalBlockCases refVariable="ReportType"><conditionalBlock refVariableValue="1"><contents><v2_combinationChart maxHotspots="10000" refQuery="Query2" name="Combination Chart2">
														<v2_combinationTypeTooltips/>
														<v2_legend>
															<v2_legendPosition>
																<v2_legendPreset/>
															</v2_legendPosition>
															<v2_legendTitle refQuery="Query2">
																<v2_chartTextContents>
																	<v2_automaticText/>
																</v2_chartTextContents>
																<style>
																	<defaultStyles>
																		<defaultStyle refStyle="lx"/>
																	</defaultStyles>
																</style>
															</v2_legendTitle>
															<style>
																<defaultStyles>
																	<defaultStyle refStyle="lg"/>
																</defaultStyles>
															</style>
														</v2_legend>
														<v2_commonAxis>
															<v2_ordinalAxis>
																<v2_axisTitle refQuery="Query2">
																	<v2_chartTextContents>
																		<v2_automaticText/>
																	</v2_chartTextContents>
																	<style>
																		<defaultStyles>
																			<defaultStyle refStyle="at"/>
																		</defaultStyles>
																	</style>
																</v2_axisTitle>
																<v2_axisLine lineWeight="0"/>
																<v2_axisLabels>
																	<style>
																		<defaultStyles>
																			<defaultStyle refStyle="al"/>
																		</defaultStyles>
																	</style>
																</v2_axisLabels>
															</v2_ordinalAxis>
															<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Product Types"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_commonAxis>
														<v2_topLeftAxis>
															<v2_combinationChartTypes>
																<v2_bar borders="show">
																	<v2_solidPalette>
																		<v2_solidPaletteEntries>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#8599D3">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#8599D3"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#5876AE"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#E3AE6C">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#E3AE6C"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#CD854E"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#839862">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#839862"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#6C7F56"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#B7C873">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#B7C873"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#AFB885"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#8484A8">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#8484A8"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#525E7E"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#C0CCED">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#C0CCED"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#B0C2E5"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#8C5580">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#8C5580"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#794067"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#C789BC">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#C789BC"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#BB72BC"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#D5BAEF">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#D5BAEF"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#C29FD1"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#83683F">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#83683F"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#604926"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#DCB05A">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#DCB05A"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#C09C52"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#F4DF9E">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#F4DF9E"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#E4CF87"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#5F8A8C">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#5F8A8C"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#537579"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#96C4B2">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#96C4B2"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#89B0A0"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#CBE8E7">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#CBE8E7"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#BDD6D5"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#AE6564">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#AE6564"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#875352"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#D88C6F">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#D88C6F"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#C47D61"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#E3C9B0">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#E3C9B0"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#D2B2A5"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#848484">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#848484"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#555555"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#a4a4a4">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#a4a4a4"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#909090"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																			<v2_solidPaletteEntry>
																				<v2_fillEffect defaultColor="#C7C7C7">
																					<v2_linearGradient>
																						<v2_gradientColor gradientColor="#C7C7C7"/>
																						<v2_gradientColor colorPosition="100" gradientColor="#c1c1c1"/>
																					</v2_linearGradient>
																				</v2_fillEffect>
																			</v2_solidPaletteEntry>
																		</v2_solidPaletteEntries>
																	</v2_solidPalette>
																	<!-- v2_solidPaletteRef ref=&amp;amp;quot;gDefaultSolid&amp;amp;quot;/ -->
																	<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Revenue"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_bar>
															</v2_combinationChartTypes>
															<v2_axis>
																<v2_axisTitle refQuery="Query2">
																	<v2_chartTextContents>
																		<v2_automaticText/>
																	</v2_chartTextContents>
																	<style>
																		<defaultStyles>
																			<defaultStyle refStyle="at"/>
																		</defaultStyles>
																	</style>
																</v2_axisTitle>
																<v2_axisLine lineWeight="0"/>
																<v2_axisRange>
																	<v2_automaticRange/>
																</v2_axisRange>
																<v2_axisLabels>
																	<style>
																		<defaultStyles>
																			<defaultStyle refStyle="al"/>
																		</defaultStyles>
																	</style>
																</v2_axisLabels>
																<v2_majorGridlines lineWeight="0" lineColor="#CCCCCC"/>
																<v2_majorBackgroundColors>
																	<v2_firstBackgroundColor color="#D2D2D2" transparency="50"/>
																	<v2_secondBackgroundColor color="#E2E2E2" transparency="50"/>
																</v2_majorBackgroundColors>
															</v2_axis>
														</v2_topLeftAxis>
														<style>
															<defaultStyles>
																<defaultStyle refStyle="ch"/>
															</defaultStyles>
														</style>
														<noDataHandler>
															<contents>
																<block>
																	<contents>
																		<textItem>
																			<dataSource>
																				<staticValue>No Data Available</staticValue>
																			</dataSource>
																			<style>
																				<CSS value="padding:10px 18px;"/>
																			</style>
																		</textItem>
																	</contents>
																</block>
															</contents>
														</noDataHandler>
														</v2_combinationChart></contents></conditionalBlock><conditionalBlock refVariableValue="2"><contents><v2_combinationChart maxHotspots="10000" orientation="horizontal" refQuery="Query2" name="Combination Chart1">
																		<v2_combinationTypeTooltips/>
																		<v2_legend>
																			<v2_legendPosition>
																				<v2_legendPreset/>
																			</v2_legendPosition>
																			<v2_legendTitle refQuery="Query2">
																				<v2_chartTextContents>
																					<v2_automaticText/>
																				</v2_chartTextContents>
																				<style>
																					<defaultStyles>
																						<defaultStyle refStyle="lx"/>
																					</defaultStyles>
																				</style>
																			</v2_legendTitle>
																			<style>
																				<defaultStyles>
																					<defaultStyle refStyle="lg"/>
																				</defaultStyles>
																			</style>
																		</v2_legend>
																		<v2_commonAxis>
																			<v2_ordinalAxis>
																				<v2_axisTitle refQuery="Query2">
																					<v2_chartTextContents>
																						<v2_automaticText/>
																					</v2_chartTextContents>
																					<style>
																						<defaultStyles>
																							<defaultStyle refStyle="at"/>
																						</defaultStyles>
																					</style>
																				</v2_axisTitle>
																				<v2_axisLine lineWeight="0"/>
																				<v2_axisLabels>
																					<style>
																						<defaultStyles>
																							<defaultStyle refStyle="al"/>
																						</defaultStyles>
																					</style>
																				</v2_axisLabels>
																			</v2_ordinalAxis>
																			<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Product Types"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_commonAxis>
																		<v2_topLeftAxis>
																			<v2_combinationChartTypes>
																				<v2_bar borders="show">
																					<v2_solidPalette>
																						<v2_solidPaletteEntries>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#8599D3">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#8599D3"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#5876AE"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#E3AE6C">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#E3AE6C"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#CD854E"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#839862">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#839862"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#6C7F56"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#B7C873">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#B7C873"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#AFB885"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#8484A8">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#8484A8"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#525E7E"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#C0CCED">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#C0CCED"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#B0C2E5"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#8C5580">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#8C5580"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#794067"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#C789BC">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#C789BC"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#BB72BC"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#D5BAEF">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#D5BAEF"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#C29FD1"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#83683F">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#83683F"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#604926"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#DCB05A">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#DCB05A"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#C09C52"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#F4DF9E">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#F4DF9E"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#E4CF87"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#5F8A8C">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#5F8A8C"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#537579"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#96C4B2">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#96C4B2"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#89B0A0"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#CBE8E7">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#CBE8E7"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#BDD6D5"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#AE6564">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#AE6564"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#875352"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#D88C6F">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#D88C6F"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#C47D61"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#E3C9B0">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#E3C9B0"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#D2B2A5"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#848484">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#848484"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#555555"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#a4a4a4">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#a4a4a4"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#909090"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																							<v2_solidPaletteEntry>
																								<v2_fillEffect defaultColor="#C7C7C7">
																									<v2_linearGradient>
																										<v2_gradientColor gradientColor="#C7C7C7"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#c1c1c1"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_solidPaletteEntry>
																						</v2_solidPaletteEntries>
																					</v2_solidPalette>
																					<!-- v2_solidPaletteRef ref=&amp;amp;quot;gDefaultSolid&amp;amp;quot;/ -->
																					<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Revenue"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_bar>
																			</v2_combinationChartTypes>
																			<v2_axis>
																				<v2_axisTitle refQuery="Query2">
																					<v2_chartTextContents>
																						<v2_automaticText/>
																					</v2_chartTextContents>
																					<style>
																						<defaultStyles>
																							<defaultStyle refStyle="at"/>
																						</defaultStyles>
																					</style>
																				</v2_axisTitle>
																				<v2_axisLine lineWeight="0"/>
																				<v2_axisRange>
																					<v2_automaticRange/>
																				</v2_axisRange>
																				<v2_axisLabels>
																					<style>
																						<defaultStyles>
																							<defaultStyle refStyle="al"/>
																						</defaultStyles>
																					</style>
																				</v2_axisLabels>
																				<v2_majorGridlines lineWeight="0" lineColor="#CCCCCC"/>
																				<v2_majorBackgroundColors>
																					<v2_firstBackgroundColor color="#D2D2D2" transparency="50"/>
																					<v2_secondBackgroundColor color="#E2E2E2" transparency="50"/>
																				</v2_majorBackgroundColors>
																			</v2_axis>
																		</v2_topLeftAxis>
																		<style>
																			<CSS value=""/><defaultStyles><defaultStyle refStyle="ch"/></defaultStyles></style>
																		<noDataHandler>
																			<contents>
																				<block>
																					<contents>
																						<textItem>
																							<dataSource>
																								<staticValue>No Data Available</staticValue>
																							</dataSource>
																							<style>
																								<CSS value="padding:10px 18px;"/>
																							</style>
																						</textItem>
																					</contents>
																				</block>
																			</contents>
																		</noDataHandler>
																		</v2_combinationChart>
																</contents></conditionalBlock><conditionalBlock refVariableValue="3"><contents><crosstab name="Crosstab1" refQuery="Query2" pageBreakText="false" repeatEveryPage="true">
			<crosstabCorner>
				<contents/>
				<style>
					<defaultStyles>
						<defaultStyle refStyle="xm"/>
					</defaultStyles>
				</style>
			</crosstabCorner>

			<noDataHandler>
				<contents>
					<block>
						<contents>
							<textItem>
								<dataSource>
									<staticValue>No Data Available</staticValue>
								</dataSource>
								<style>
									<CSS value="padding:10px 18px;"/>
								</style>
							</textItem>
						</contents>
					</block>
				</contents>
			</noDataHandler>
			<style>
				<CSS value="border-collapse:collapse"/>
				<defaultStyles>
					<defaultStyle refStyle="xt"/>
				</defaultStyles>
			</style>
		<crosstabFactCell><contents><textItem><dataSource><cellValue/></dataSource></textItem></contents><style><defaultStyles><defaultStyle refStyle="mv"/></defaultStyles></style></crosstabFactCell><crosstabRows><crosstabNode><crosstabNodeMembers><crosstabNodeMember refDataItem="Product Types" edgeLocation="e1"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><textItem><dataSource><memberCaption/></dataSource></textItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabRows><crosstabColumns><crosstabNode><crosstabNodeMembers><crosstabNodeMember refDataItem="Revenue" edgeLocation="e2"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><textItem><dataSource><memberCaption/></dataSource></textItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabColumns></crosstab></contents></conditionalBlock></conditionalBlockCases></conditionalBlocks></contents><style><CSS value="width:100%;vertical-align:top;text-align:left"/></style></tableCell></tableCells></tableRow></tableRows></table><HTMLItem>
			<dataSource>
				<staticValue>&lt;style&gt;
.Vertical{
  width:'';
  height:'';
}

.VerticalUnselected{
  padding:2px 10px 3px 10px;
  margin-right:7px;
  background-image:url(../reportstyles/images/button_bg.png);
  background-position:left top;
  background-repeat:repeat-x;
  background-color:#EFEFEF;
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  text-align:center;
  border:1px solid #92afc2;
  width: 75px;
  display:block;
}

.VerticalSelected{
  padding:2px 10px 3px 10px;
  margin-right:7px;
  background-image:url(../reportstyles/images/button_bg.png);
  background-position:left top;
  background-repeat:repeat-x;
  background-color:#A0AFEB;
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  text-align:center;
  border:1px solid #92afc2;
  width: 75px;
  display:block;
}

.Horizontal{
  width:0;
  height:0;
  white-space:nowrap;
}

.HorizontalUnselected{
  padding:2px 10px 3px 10px;
  margin-right:7px;
  background-image:url(../reportstyles/images/button_bg.png);
  background-position:left top;
  background-repeat:repeat-x;
  background-color:#EFEFEF;
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  text-align:center;
  border:1px solid #92afc2;
}

.HorizontalSelected{
  padding:2px 10px 3px 10px;
  margin-right:7px;
  background-image:url(../reportstyles/images/button_bg.png);
  background-position:left top;
  background-repeat:repeat-x;
  background-color:#A0AFEB;
  color:#000000;
  font-size:10pt;
  font-weight:normal;
  text-align:center;
  border:1px solid #92afc2;
}

&lt;/style&gt;
&lt;script&gt;

/*
  * Function: addEvent
  * Author: Dan Fruendel
  * Attachs an event or adds an event listener depending on the browser.
  */
var
  addEvent = function(element, event, func)
  {
    if(element.addEventListener)
    {
      addEvent = function(element, event, func)
      {
        element.addEventListener(event, func, false);
        return true;
      };
    }
    else if(element.attachEvent)
    {
      addEvent = function(element, event, func)
      {
        return element.attachEvent("on" + event, func);
      };
    }
    else
    {
      addEvent = function(element, event, func)
      {
        var oldEventHandler = element['on' + event];
        element['on' + event] = function()
        {
          //using .apply to pass on anything this function gets.
          if(typeof(oldEventHandler) === "function")
          {
            oldEventHandler.apply(element, arguments);
          }
          func.apply(element, arguments);
        }
        return true;
      };
    }
    return addEvent(element, event, func);
  }
/*
 * Fake Namespace and prompt getters.
 */
var paulScripts = {}
  , oCR = cognos.Report.getReport("_THIS_");

paulScripts.getSource = function()
{
    var targ;
    if (!e) var e = window.event;
    if(!e) return false;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
      targ = targ.parentNode;
    return targ;
}

paulScripts.getControl = function(promptName) {
  return oCR.prompt.getControlByName(promptName);
}

paulScripts.reprompt = function(){
if(!paulScripts.getSource() ) return true;
  oCR.sendRequest(cognos.Report.Action.REPROMPT);
  return true;
}

paulScripts.addButtons = function ( promptName, myClass,reprompt) {
var
    newOption = ''
  , reprompt = reprompt?reprompt:false
  , id = paulScripts.getControl ( promptName )._id_
  , selElm = document.getElementById('PRMT_SV_'+ id)
  , selElmSelect = document.getElementById('PRMT_SV_LINK_SELECT_'+ id)
  , selElmDeselect = document.getElementById('PRMT_SV_LINK_DESELECT_'+ id)
  , rads = selElm.getElementsByTagName('input')
  , len = rads.length
  , type = len==0?'none':rads[0].type
  , radioClick = function(){for(var radios=paulScripts.getSource().parentNode.getElementsByTagName('input').length/2;radios&lt;paulScripts.getSource().parentNode.getElementsByTagName('input').length;radios++){paulScripts.getSource().parentNode.getElementsByTagName('input')[radios].className=myClass + 'Unselected'};paulScripts.getSource().parentNode.getElementsByTagName('input')[paulScripts.getSource().index].click(); paulScripts.getSource().className=myClass + 'Selected'}
  , checkClick= function(){paulScripts.getSource().parentNode.getElementsByTagName('input')[paulScripts.getSource().index].click(); paulScripts.getSource().className=paulScripts.getSource().className==myClass + 'Selected'?myClass + 'Unselected':myClass + 'Selected';}
  , selectAll= function(){ for(var elms=rads.length;elms&gt;rads.length/2;elms--){rads[elms-1].className=myClass + 'Selected'}}
  , deselectAll= function(){ ; for(var elms=rads.length;elms&gt;rads.length/2;elms--){rads[elms-1].className=myClass + 'Unselected'}}
;
  selElm.className = myClass;

  if(type == 'none') return false;

  for(i=0;i&lt;len;i++)
  {
    newOption = document.createElement( 'input');
    newOption.type='button';
    newOption.value=rads[i].getAttribute('dv');
    newOption.className=rads[i].selected?myClass + 'Selected': myClass + 'Unselected';
    newOption.index=i;
    if(type=='checkbox') {addEvent(newOption,'click',checkClick)};
    if(type=='radio') {addEvent(newOption,'click',radioClick)};
    rads[i].parentNode.parentNode.style.display='none';
    selElm.appendChild(newOption );
  }

  if(reprompt) paulScripts.getControl ( promptName ).setValidator(paulScripts.reprompt);

  if(selElmSelect) addEvent(selElmSelect,'click',selectAll);
  if(selElmDeselect) addEvent(selElmDeselect,'click',deselectAll);
}

paulScripts.addButtons('Products','Horizontal',1);

paulScripts.addButtons('Reports','Vertical');
&lt;/script&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents>
								</pageBody>
							</page>
						</reportPages>
					</layout>
				</layouts>
			<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/><XMLAttribute name="RS_modelModificationTime" value="2008-07-25T15:28:38.133Z" output="no"/></XMLAttributes><classStyles><classStyle name="cls1" label="Button1"><CSS value="padding:2px 10px 3px 10px;margin-right:7px;background-image:url(../reportstyles/images/button_bg.png);background-position:left top;background-repeat:repeat-x;background-color:#CCFFCC;color:#000000;font-size:10pt;font-weight:normal;text-align:center;border:1px solid #92afc2"/></classStyle></classStyles><reportName>radios to buttons</reportName><queries><query name="Query2"><source><model/></source><selection><dataItem name="Product Types"><expression>descendants(
#promptmany('Products','mun','[sales_and_marketing].[Products].[Products].[Products]-&gt;:[PC].[@MEMBER].[Products]','set(','',')')#
,[sales_and_marketing].[Products].[Products].[Product type]
)</expression></dataItem><dataItemMeasure name="Revenue"><dmMember><MUN>[sales_and_marketing].[Measures].[Revenue]</MUN><itemCaption>Revenue</itemCaption></dmMember><dmDimension><DUN>[sales_and_marketing].[Measures]</DUN><itemCaption>Measures</itemCaption></dmDimension><XMLAttributes><XMLAttribute name="RS_dataType" value="9" output="no"/></XMLAttributes></dataItemMeasure></selection></query><query name="Products"><source><model/></source><selection><dataItem name="Product line" aggregate="none"><expression>[sales_and_marketing].[Products].[Products].[Product line]</expression></dataItem></selection></query></queries><reportVariables><reportVariable type="string" name="ReportType">
			<reportExpression>ParamValue('ReportType')</reportExpression>
		<variableValues><variableValue value="1"/><variableValue value="2"/><variableValue value="3"/></variableValues></reportVariable></reportVariables></report>

Quickie – Dynamic select and search size

Generally the select box of the Select and Search prompt is wide enough to display all the information you need. But there are times where you need it to show everything.

Is the first option there Chaun Yang Sport Equipment Company? Org? IBM does have a way to fix this issue, but it involves modifying one of the internals, specifically the webcontentpromptingproperties.js file. In several of my clients, modifying any internal files is expressly forbidden. So I’ve written a quick and somewhat dirty javascript to handle it.

Drag an HTML item to the left of the prompt:

<div id="selectSearch">

Drag an HTML item to the right of the prompt:

</div>
<script>
  var e=document.getElementById('selectSearch');
  var myselect = e.getElementsByTagName('select')[0];
  if(myselect.childNodes.length>0){myselect.style.width=''}
</script>

This code will find the selectSearch div you wrapped the prompt with, find all of the select tags, and if there are any options the select will expand or shrink to fit.

And finally, as usual (when I remember) the report XML:

<report xmlns="http://developer.cognos.com/schemas/report/8.0/" useStyleVersion="10" expressionLocale="en-us">
				<modelPath>/content/folder[@name='Samples']/folder[@name='Models']/package[@name='GO Data Warehouse (query)']/model[@name='model']</modelPath>
				<drillBehavior modelBasedDrillThru="true"/>
				<layouts>
					<layout>
						<reportPages>
							<page name="Page1">
								<style>
									<defaultStyles>
										<defaultStyle refStyle="pg"/>
									</defaultStyles>
								</style>
								<pageBody>
									<style>
										<defaultStyles>
											<defaultStyle refStyle="pb"/>
										</defaultStyles>
									</style>
									<contents><HTMLItem>
			<dataSource>
				<staticValue>&lt;div id="selectSearch"&gt;</staticValue>
			</dataSource>
		</HTMLItem><selectWithSearch parameter="Parameter1" refQuery="Query1"><useItem refDataItem="Retailer"/></selectWithSearch><HTMLItem>
			<dataSource>
				<staticValue>&lt;/div&gt;
&lt;script&gt;
  var e=document.getElementById('selectSearch');
  var myselect = e.getElementsByTagName('select')[0];
  if(myselect.childNodes.length&gt;0){myselect.style.width=''}
&lt;/script&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents>
								</pageBody>
							</page>
						</reportPages>
					</layout>
				</layouts>
			<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="false" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/><XMLAttribute name="RS_modelModificationTime" value="2011-06-09T13:50:33.233Z" output="no"/></XMLAttributes><queries><query name="Query1"><source><model/></source><selection><dataItem name="Retailer" aggregate="none"><expression>[Sales (query)].[Retailers].[Retailer]</expression></dataItem></selection></query></queries></report>

The XML is for Cognos 10, but this code was tested successfully on all the flavors of Cognos 8.4.