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 (481 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>

Cognos Mashup Services – a brief example

In a previous post I showed how to embed Cognos reports in other applications or reports by using iframes. Unfortunately there are many problems with using iframes, difficulty interacting with objects with JavaScript, security issues, even positioning objects well into a page.

Instead it might be better to use CMS. You can pull a specific object from the report, and it becomes an actual element of the page you’re working on. CMS also allows you to pull elements in a number of different formats. HTMLFragment will return the report object exactly as it appears in the report, while JSON will allow you to easily use the data from the report in a JS function. This will post will two examples, HTMLFragment and JSON.

We’ll start with a JSON example.

In this report, we’ll create a text box prompt and a list prompt. Typing anything into the text prompt will populate the list prompt, like a search and select, but without refreshing the page.

This example is using Cognos 10.2 and the sales and marketing cube. The JavaScript will not downgrade to previous versions as I’m using the new Prompt API. People using previous versions can get around it by attaching events to their prompts.

To begin, create a list report with a value and key. In my example I’m using Product and Product – Category Code from the Sales and Marketing cube.
1. Source list

The Product field is actually a filter expression:

filter(
  [sales_and_marketing].[Products].[Products].[Product]
  , upper([sales_and_marketing].[Products].[Products].[Product].[Product - Long Name]) contains upper(#prompt('SearchString','string')#)
    or [sales_and_marketing].[Products].[Products].[Product].[Product - Category Code]  contains (#prompt('SearchString','string')#)
)

As CMS allows us to reference objects directly, it’s important to remember to give each object a name that describes what it is, what it contains, while being short enough to be easily referenceable . In this case, I’m calling the list object “List”.

When you run the report, you’re prompted to enter a string, and any product that contains the caption or code will be returned.

Save it under /CMS/Source and create a new report.

This report should have a table with 3 rows, 1 column. In the first row, put a text box prompt. In the second, a multi select list prompt. Leave the third blank for now. Remember to name the text box and value prompts. Let’s call them Text and Select.

Drag in an HTML item in the bottom row of the table, and paste in the following code.

<script>
/*
 * Fake Namespace and prompt getters.
 */
var paulScripts = {}
var 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.setPromptValue = function ( promptName, value ) {
var
  newOption = ''
  , selElm = document.getElementById('PRMT_SV_'+paulScripts.getControl ( promptName )._id_);
//  selElm.options.length=0;
  for(i=0;i<selElm.options.length;i++)
  {
    if(selElm.options[i].selected==true){
      for(x in value) {if(value[x].use == selElm.options[i].value) {value.splice(x,1); break;}}
    } else {selElm.remove(i);i--}
  }

  for(i=0;i<value.length;i++)
  {
    newOption = document.createElement( 'option');
    newOption.value=value [i].use ;
    newOption.innerHTML = value[i].display ;
    newOption.dv = value [i].display ;

    selElm.appendChild(newOption );

  }
}

/*
* This creates the XMLHttpRequest object used to communicate with CMS.
* The initialization of the object depends on what browser is being used. This
* code is compatible with IE 5.5, 6, 7, 8 and all versions of Firefox and Chrome
*
* For more information on the XMLHttpRequest object, see http://www.w3.org/TR/XMLHttpRequest/
*/
try  {
var objXHR = new XMLHttpRequest();
} catch (e) {
try {
var objXHR = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
var objXHR = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
alert('XMLHttpRequest not supported'); }
}
}

paulScripts.getValues = function (searchString)
{
  var
    searchString = searchString?searchString:'',
    url= '../ibmcognos/cgi-bin/cognos.cgi/rds/reportData/searchPath/%2fcontent%2ffolder%5b%40name%3d%27CMS%27%5d%2freport%5b%40name%3d%27Source%27%5d?fmt=JSON&async=off&selection=List&p_SearchString=' + searchString;
   objXHR.open("POST", url, false);
   objXHR.send(null);
   if (objXHR.status == 200)
   {
     dataCache = (eval('(' + objXHR.responseText + ')'));
     return paulScripts.parseJSON(dataCache);
   }
}

/*
 * Loop through tableData, extract the use and display fields, and dump them into
 * a JS object.
 */
paulScripts.parseJSON = function(tableData)
{
  if(!tableData.filterResultSet.filterResult) return false;
  var
      rows = tableData.filterResultSet.filterResult[0].reportElement[0].lst.group.row
    , JSONData = [];

  for (var i=0; i < rows.length; i++)
  {
    JSONData.push ( {use :  rows[i].cell[1].item[0].txt.fmtVal, display : rows[i].cell[0].item[0].txt.fmtVal  });
  }
return JSONData;
}

/*
 * function loadOptions. Paul Mendelson - 2013-01-15
 * When text is entered into the text box, this will be triggered. It will wait for further input
 * before loading the select box with values.
 */
paulScripts.loadOptions= (function () {
  var timer;
  return function (){
    var name = this.getName()
    , search = this.getValue();
    clearTimeout(timer);
    timer = window.setTimeout(function() {
      if(this.oldValue==search) {return true} else {this.oldValue=search}
      paulScripts.setPromptValue( 'Select', paulScripts.getValues(search));
    },1000);
    return true;
    };
})();

paulScripts.getControl('Text').setValidator(paulScripts.loadOptions);

</script>

When you run the report the select box will be empty. Start typing into the textbox. The JS will wait 1 second after the last keystroke, then pass the value to the Source report, retrieve data in JSON format, parse it and populate the select.

I’m not going to get into all of the JS here, just what is salient to CMS.

The paulScripts.getValues first coalesces the search string into nothing. You can make prompts optional by making your filters “this = ?searchString? or ‘-1’ = ?searchstring?”, and having the searchString set to ‘-1’. The URL in this example uses the search path of the report. While longer, I find it preferable over using the storeID. Just remember to URL Encode it. Notice the search string is appended to the URL. It then opens an XMLHttpRequest to Cognos. Cognos will interpret the request and send back a responseText.

The responseText will need to be handled differently depending on the format of the request. In this case, Cognos is returning JSON, and the results will need to be parsed as such.

The paulScripts.parseJSON will loop through the rows in the table. I know that the first cell is the label, and the second is the code, I also know there is only a single object in each table cell.

The monster tableData.filterResultSet.filterResult[0].reportElement[0].lst.group.row[1].cell[0].item[0].txt is how we reference text of the first item in the first cell of the second row (indexes are 0 based). If I managed to pull two lists, I could decide to use reportElement[1] to get the second list.

When parseJSON finishes creating the JS object, it will return it to getValues which in turn returns it to setPromptValue. setPromptValue will loop through the JS object and create the options in the select list.

Now that we have functional prompts. Let’s create a chart that shows revenue per month for each of the selected products.

Put the Month level in the categories, Revenue in the Measure and a new Query Calculation: filter(
[sales_and_marketing].[Products].[Products].[Product]
, [sales_and_marketing].[Products].[Products].[Product].[Product - Category Code] in (#promptmany('Products','string')#)
)

When run, it will prompt for codes.

Now let’s change the HTML item to:

<div id="chart"></div>
<script>
/*
 * Fake Namespace and prompt getters.
 */
var paulScripts = {}
var 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.setPromptValue = function ( promptName, value ) {
var
  newOption = ''
  , selElm = document.getElementById('PRMT_SV_'+paulScripts.getControl ( promptName )._id_);
//  selElm.options.length=0;
  for(i=0;i<selElm.options.length;i++)
  {
    if(selElm.options[i].selected==true){
      for(x in value) {if(value[x].use == selElm.options[i].value) {value.splice(x,1); break;}}
    } else {selElm.remove(i);i--}
  }

  for(i=0;i<value.length;i++)
  {
    newOption = document.createElement( 'option');
    newOption.value=value [i].use ;
    newOption.innerHTML = value[i].display ;
    newOption.dv = value [i].display ;

    selElm.appendChild(newOption );

  }
}

/*
* This creates the XMLHttpRequest object used to communicate with CMS.
* The initialization of the object depends on what browser is being used. This
* code is compatible with IE 5.5, 6, 7, 8 and all versions of Firefox and Chrome
*
* For more information on the XMLHttpRequest object, see http://www.w3.org/TR/XMLHttpRequest/
*/
try  {
var objXHR = new XMLHttpRequest();
} catch (e) {
try {
var objXHR = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
var objXHR = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
alert('XMLHttpRequest not supported'); }
}
}

paulScripts.getValues = function (searchString)
{
  var
    searchString = searchString?searchString:'',
    url= '../cgi-bin/cognos.cgi/rds/reportData/searchPath/%2fcontent%2ffolder%5b%40name%3d%27CMS%27%5d%2freport%5b%40name%3d%27Source%27%5d?fmt=JSON&async=off&selection=List&p_SearchString=' + searchString;
   objXHR.open("POST", url, false);
   objXHR.send(null);
   if (objXHR.status == 200)
   {
     dataCache = (eval('(' + objXHR.responseText + ')'));
     return paulScripts.parseJSON(dataCache);
   }
}

/*
 * Loop through tableData, extract the use and display fields, and dump them into
 * a JS object.
 */
paulScripts.parseJSON = function(tableData)
{
  if(!tableData.filterResultSet.filterResult) return false;
  var
      rows = tableData.filterResultSet.filterResult[0].reportElement[0].lst.group.row
    , JSONData = [];

  for (var i=0; i < rows.length; i++)
  {
    JSONData.push ( {use :  rows[i].cell[1].item[0].txt.fmtVal, display : rows[i].cell[0].item[0].txt.fmtVal  });
  }
return JSONData;
}

/*
 * function loadOptions. Paul Mendelson - 2013-01-15
 * When text is entered into the text box, this will be triggered. It will wait for further input
 * before loading the select box with values.
 */
paulScripts.loadOptions= (function () {
  var timer;
  return function (){
    var name = this.getName()
    , search = this.getValue();
    clearTimeout(timer);
    timer = window.setTimeout(function() {
      if(this.oldValue==search) {return true} else {this.oldValue=search}
      paulScripts.setPromptValue( 'Select', paulScripts.getValues(search));
    },1000);
    return true;
    };
})();

paulScripts.getControl('Text').setValidator(paulScripts.loadOptions);

/*
 * function loadProducts. Paul Mendelson - 2013-01-15
 * When a product is selected in the select, this will be triggered. It will wait for further input
 * before attempting to retrieve the chart.
 */
paulScripts.loadProducts= (function () {
  var timer;
  return function (){
    var name = this.getName()
    , products = this.getValues()
    , productsLabel='';
    clearTimeout(timer);
    timer = window.setTimeout(function() {
    if(products.length===0) return true;
    for (i=0;i<products.length;i++) {productsLabel+='&p_Products='+products[i].use}
    paulScripts.getChart(productsLabel);
    },1000);
    return true;
    };
})();

paulScripts.getChart = function (products)
{
  var
    url= '../cgi-bin/cognos.cgi/rds/reportData/searchPath/%2fcontent%2ffolder%5b%40name%3d%27CMS%27%5d%2freport%5b%40name%3d%27Chart%27%5d?fmt=HTMLFragment&async=off&selection=Chart' + products;
   objXHR.open("POST", url, false);
   objXHR.send(null);
   if (objXHR.status == 200)
   {
     document.getElementById('chart').innerHTML = objXHR.responseText ;
   }
}

paulScripts.getControl('Select').setValidator(paulScripts.loadProducts);

</script>

A div has been added above the scripts node. A validator for the Select prompt has been added. When the user selects a value it will wait one second for further input, then pass the selected codes to the chart report. The chart report will return an HTMLFragment as a string, which is then passed to the div as it’s innerHTML.

Cognos Mashup Services is an incredibly versatile tool. The possibilities are limitless. I suspect, but haven’t tried, that it will allow you to embed objects in systems that do not allow iFrames. The only drawback is that it will only work in HTML. You can’t use this to merge objects from different models into a single PDF

IBM has a few guides on it. Start here.

Report XML:

<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 modelBasedDrillThru="true"/>
				<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"/></style><tableRows><tableRow><tableCells><tableCell><contents><textBox parameter="Parameter1" name="Text" required="false"/></contents></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents><selectValue parameter="Parameter2" multiSelect="true" selectValueUI="listBox" name="Select"/></contents></tableCell></tableCells></tableRow></tableRows></table><HTMLItem description="scripts">
			<dataSource>
				<staticValue>&lt;div id="chart"&gt;&lt;/div&gt;
&lt;script&gt;
/*
 * Fake Namespace and prompt getters.
 */
var paulScripts = {}
var 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.setPromptValue = function ( promptName, value ) {
var
  newOption = ''
  , selElm = document.getElementById('PRMT_SV_'+paulScripts.getControl ( promptName )._id_);
//  selElm.options.length=0;
  for(i=0;i&lt;selElm.options.length;i++)
  {
    if(selElm.options[i].selected==true){
      for(x in value) {if(value[x].use == selElm.options[i].value) {value.splice(x,1); break;}}
    } else {selElm.remove(i);i--}
  }

  for(i=0;i&lt;value.length;i++)
  {
    newOption = document.createElement( 'option');
    newOption.value=value [i].use ;
    newOption.innerHTML = value[i].display ;
    newOption.dv = value [i].display ;

    selElm.appendChild(newOption );

  }
}

/*
* This creates the XMLHttpRequest object used to communicate with CMS.
* The initialization of the object depends on what browser is being used. This
* code is compatible with IE 5.5, 6, 7, 8 and all versions of Firefox and Chrome
*
* For more information on the XMLHttpRequest object, see http://www.w3.org/TR/XMLHttpRequest/
*/
try  {
var objXHR = new XMLHttpRequest();
} catch (e) {
try {
var objXHR = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
var objXHR = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
alert('XMLHttpRequest not supported'); }
}
}

paulScripts.getValues = function (searchString)
{
  var
    searchString = searchString?searchString:'',
    url= '../cgi-bin/cognos.cgi/rds/reportData/searchPath/%2fcontent%2ffolder%5b%40name%3d%27CMS%27%5d%2freport%5b%40name%3d%27Source%27%5d?fmt=JSON&amp;async=off&amp;selection=List&amp;p_SearchString=' + searchString;
   objXHR.open("POST", url, false);
   objXHR.send(null);
   if (objXHR.status == 200)
   {
     dataCache = (eval('(' + objXHR.responseText + ')'));
     return paulScripts.parseJSON(dataCache);
   }
}

/*
 * Loop through tableData, extract the use and display fields, and dump them into
 * a JS object.
 */
paulScripts.parseJSON = function(tableData)
{
  if(!tableData.filterResultSet.filterResult) return false;
  var
      rows = tableData.filterResultSet.filterResult[0].reportElement[0].lst.group.row
    , JSONData = [];

  for (var i=0; i &lt; rows.length; i++)
  {
    JSONData.push ( {use :  rows[i].cell[1].item[0].txt.fmtVal, display : rows[i].cell[0].item[0].txt.fmtVal  });
  }
return JSONData;
}

/*
 * function loadOptions. Paul Mendelson - 2013-01-15
 * When text is entered into the text box, this will be triggered. It will wait for further input
 * before loading the select box with values.
 */
paulScripts.loadOptions= (function () {
  var timer;
  return function (){
    var name = this.getName()
    , search = this.getValue();
    clearTimeout(timer);
    timer = window.setTimeout(function() {
      if(this.oldValue==search) {return true} else {this.oldValue=search}
      paulScripts.setPromptValue( 'Select', paulScripts.getValues(search));
    },1000);
    return true;
    };
})();

paulScripts.getControl('Text').setValidator(paulScripts.loadOptions);

/*
 * function loadProducts. Paul Mendelson - 2013-01-15
 * When a product is selected in the select, this will be triggered. It will wait for further input
 * before attempting to retrieve the chart.
 */
paulScripts.loadProducts= (function () {
  var timer;
  return function (){
    var name = this.getName()
    , products = this.getValues()
    , productsLabel='';
    clearTimeout(timer);
    timer = window.setTimeout(function() {
    if(products.length===0) return true;
    for (i=0;i&lt;products.length;i++) {productsLabel+='&amp;p_Products='+products[i].use}
    paulScripts.getChart(productsLabel);
    },1000);
    return true;
    };
})();

paulScripts.getChart = function (products)
{
  var
    url= '../cgi-bin/cognos.cgi/rds/reportData/searchPath/%2fcontent%2ffolder%5b%40name%3d%27CMS%27%5d%2freport%5b%40name%3d%27Chart%27%5d?fmt=HTMLFragment&amp;async=off&amp;selection=Chart' + products;
   objXHR.open("POST", url, false);
   objXHR.send(null);
   if (objXHR.status == 200)
   {
     document.getElementById('chart').innerHTML = objXHR.responseText ;
   }
}

paulScripts.getControl('Select').setValidator(paulScripts.loadProducts);

&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><reportName>start2</reportName><reportVariables><reportVariable type="boolean" name="dontRender">
			<reportExpression>1=0</reportExpression>
			<variableValues>
				<variableValue value="1"/>
			</variableValues>
		</reportVariable></reportVariables></report>