Automatically looping through charts in Active Reports

IMPORTANT NOTE! BLOG HAS RELOCATED TO: http://cognospaul.com/

Please make sure to update all links and bookmarks. The existing pages will remain, but will not be updated. Comments left here will be ignored.

This is the first of a series of articles on extending the usability of Active Reports.

Active Reports makes a wonderful addition to the Cognos suite. Locally processed interactivity (my Brio alter ego is shouting, “so what!”; just ignore him) means complex, though predefined, data exploration scenarios can be offered to ever more demanding users. Just by clicking on a row in a list, the entire report can be refreshed instantly. Standard web-based reports are simply incapable of that behavior.

Periodically I get requests for things Active Reports can’t do. For some reason, saying that something is not possible completely renders all of the other features moot. One such request was: “I want an animated chart that will loop through all of the months in the database”. The user wanted a chart that would show 12 months at a time, incrementing one month per second, looping back to the start once it hits the last month.

As a mockup, I built an example chart in a data deck that shows that behavior.
Chart in Data Deck

I stuck a Data Iterator under it. By pressing the next button you can make it look like it’s animated. Sadly, this wasn’t enough. The needed it to be automatic.

Now we can start playing with JavaScript. This presents a few interesting problems, some of which I’m still trying to solve.

Problem 1. Cognos rewrites IDs.
To demonstrate, I create a text item and an HTML item – a div with text inside it:
HTML Item In RS

But when I run it, and examine the HTML:
HTML Item Div ID Changed

That’s interesting! The ID of the div changed from myDiv to v9! This means that any JavaScript written will have to not use getElementById(). There is no guarantee that the div will be v9 tomorrow. Especially if there are data changes in the report. That’s fine though. I could do a getElementsByTagName(‘div’) and loop through them until I find one that has the correct name, or some other attribute I set. It’ll be slow, but better than nothing.

Let’s see what happens if I use JavaScript to count the number of divs. It should be a simple:

<script>alert(document.getElementsByTagName('div').length)</script>

I just add it to the existing HTML item:
script tag

And yet when I run it, I’m not getting the alert. The JS is sound, and if I copy it to the script console in IE Dev Toolbar I get back the expected value. So what is going on?

Unfortunately this is still one of the things that I’m still trying to figure out. My guess is that every element (list, chart, HTML item) is stored in an object and loaded into the page after the page has been loaded as needed. When running a report with a data deck, we can see that the individual cards aren’t loaded until another control references them. This allows the page to be significantly smaller on the first load, and far more responsive than if everything was rendered. Of course, this is just a guess and I could be completely wrong (but that hardly ever happens).

Effectively this means that onload events are out. And predefined functions are out. Everything will have to be inline events on elements hand written with HTML items.

Getting back to the original problems, the user said that he would be okay with a start/stop button. He presses it to start the “animation”, and clicks it again to stop it whenever he wants. This means we can define the function in the onclick event. And once again I’ve turned to my good friend Dan Freundel for help. And once again he turned 20 lines of spaghetti code into 5 lines of pure JS genius.

Since we can’t loop through divs that don’t yet exist, we’ll have to find a way to recreate the action of clicking on the next/previous buttons on the iterator. One way is to set the parameter directly. Any control that uses that param will be effected. Unfortunately, that way requires referencing minified JS functions. If we do it this way, any upgrade or fix pack will kill the report. Instead, I opted to literally click on the next/prev buttons in the loop.

First, the JS:

<button onclick="
if(!document.runAnim)
{

runAnim = function(buttonElement)
{
var intervalTracker, doStuff = function() {
var iter = buttonElement.previousSibling
, ibuttons = iter.getElementsByTagName(‘button’);
if(ibuttons[2].getAttribute(‘disabled’)) {ibuttons[0].setAttribute(‘disabled’,false);ibuttons[0].click();} else {ibuttons[2].click()}
}
buttonElement.onclick = function()
{
if(intervalTracker)
{
clearInterval(intervalTracker);
intervalTracker = false;
}
else
{
intervalTracker = setInterval(doStuff,1000);
}
};
intervalTracker = setInterval(doStuff,1000);

};}
runAnim(this);
this.value=’stop’;
" value="Start animation">Start</button>

First this defines the function. Since we can’t use inline HTML functions will have to be defined like this. On the first run, if the runAnim function doesn’t exist, it will create it. Next it will call that function in the scope of the button. That means the setInterval timer will exist only for that button, and it will not interfere with any other timers on the page. As mentioned before, because the IDs get rewritten, it is impossible to easily reference an element on the page. For this, I simply placed the button directly after the iterator. Next, when an iterator is first loaded, it has no value set and you can’t click any of the buttons. But if, somehow, the disabled=true was removed from the First button, clicking it would select the first item in the list.

So we have the script. The timer function is created the first time the button is clicked, that function and all associated variables are invoked in the scope of the button and it immediately starts working.
Loopy Charts

The list on the right acts both as a highlighter for the current row, and as a control to select which month you want to see in the chart.

10.2 XML (expand and double-click to select everything)

<report xmlns="http://developer.cognos.com/schemas/report/9.0/" useStyleVersion="10" expressionLocale="en-us" application="true">
				<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><appDataDeck name="Data Deck1" refQuery="Query2" width="0px" height="0px">
			<appDataCard>
				<contents><v2_combinationChart maxHotspots="10000" refQuery="Query1" name="Scatter Chart1">
																							<v2_combinationTypeTooltips/>
																							<v2_commonAxis>
																								<v2_ordinalAxis>
																									<v2_axisTitle refQuery="Query1">
																										<v2_chartTextContents>
																											<v2_automaticText/>
																										</v2_chartTextContents>
																										<style>
																											<defaultStyles>
																												<defaultStyle refStyle="at"/>
																											</defaultStyles>
																										</style>
																									</v2_axisTitle>
																									<v2_axisLine lineWeight="0" majorTickMarkLocation="none" minorTickMarkLocation="none"/>
																									<v2_axisLabels>
																										<style>
																											<defaultStyles>
																												<defaultStyle refStyle="al"/>
																											</defaultStyles>
																										</style>
																									</v2_axisLabels>
																								</v2_ordinalAxis>
																								<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Month"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_commonAxis>
																							<v2_topLeftAxis>
																								<v2_combinationChartTypes>
																									<v2_line>
																										<v2_linePalette markerSize="5pt">
																											<v2_linePaletteEntries><v2_linePaletteEntry>
																							<v2_lineFill>
																								<v2_linearGradient gradientAngle="0">
																									<v2_gradientColor colorPosition="0" gradientColor="#8599D3"/>
																									<v2_gradientColor colorPosition="100" gradientColor="#5876AE"/>
																								</v2_linearGradient>
																							</v2_lineFill>
																							<v2_pointPaletteEntry markerShape="circle">
																								<v2_fillEffect>
																									<v2_linearGradient gradientAngle="0">
																										<v2_gradientColor colorPosition="0" gradientColor="#8599D3"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#5876AE"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_pointPaletteEntry>
																						</v2_linePaletteEntry>
																					</v2_linePaletteEntries></v2_linePalette>
																										<!-- v2_linePaletteRef ref="gDefaultLine"/ -->
																									<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Revenue"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_line>
																								</v2_combinationChartTypes>
																								<v2_axis>
																									<v2_axisTitle refQuery="Query1">
																										<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="width:600px;height:400px"/><defaultStyles><defaultStyle refStyle="ch"/></defaultStyles></style>
																							
																							<v2_chartTitle refQuery="Query1"><style><defaultStyles><defaultStyle refStyle="ct"/></defaultStyles></style><v2_chartTextItems><v2_chartTextItem><dataSource><staticValue>Revenue</staticValue></dataSource></v2_chartTextItem></v2_chartTextItems></v2_chartTitle><masterDetailLinks><masterDetailLink><masterContext><dataItemContext refDataItem="Month"/></masterContext><detailContext><parameterContext parameter="Month"/></detailContext></masterDetailLink></masterDetailLinks><v2_bottomLeftAxis><v2_axis>
													<v2_axisTitle refQuery="Query1">
														<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_combinationChartTypes><v2_line seriesType="absolute"><chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Quantity"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes><v2_linePalette><v2_linePaletteEntries><v2_linePaletteEntry>
																							<v2_lineFill>
																								<v2_linearGradient gradientAngle="0">
																									<v2_gradientColor colorPosition="0" gradientColor="#8599D3"/>
																									<v2_gradientColor colorPosition="100" gradientColor="#5876AE"/>
																								</v2_linearGradient>
																							</v2_lineFill>
																							<v2_pointPaletteEntry markerShape="circle">
																								<v2_fillEffect>
																									<v2_linearGradient gradientAngle="0">
																										<v2_gradientColor colorPosition="0" gradientColor="#8599D3"/>
																										<v2_gradientColor colorPosition="100" gradientColor="#5876AE"/>
																									</v2_linearGradient>
																								</v2_fillEffect>
																							</v2_pointPaletteEntry>
																						</v2_linePaletteEntry>
																					</v2_linePaletteEntries></v2_linePalette></v2_line></v2_combinationChartTypes></v2_bottomLeftAxis></v2_combinationChart></contents>
			</appDataCard>
		<appCardDefinition><appCardValues><appCardValue refDataItem="Month"/></appCardValues></appCardDefinition><appContainerSelect><appCondition><appConditionDataItemComparison refDataItem="Month" refAppVariable="Month" operator="in"/></appCondition></appContainerSelect></appDataDeck><HTMLItem>
			<dataSource>
				<staticValue><div style="display:none"></staticValue>
			</dataSource>
		</HTMLItem><appDataIterator name="Data Iterator1" refQuery="Query2">
			<appIteratorUI>
				<appIteratorPrevious>
					<appIteratorButton/>
				</appIteratorPrevious>
				<appIteratorLabelArea>
					
				<appIteratorDropDownList width="200px"/></appIteratorLabelArea>
				<appIteratorNext>
					<appIteratorButton/>
				</appIteratorNext>
			<appIteratorFirst><appIteratorButton/></appIteratorFirst></appIteratorUI>
		<appIteratorDefinition><appIteratorValues><appIteratorValue refDataItem="Month"/></appIteratorValues><appIteratorLabel refDataItem="Month"/></appIteratorDefinition><appOnSelectSetVariableValues><appSetVariableValueToDataItemValue refDataItem="Month" refAppVariable="Month"/></appOnSelectSetVariableValues><appContainerSelect><appCondition><appConditionDataItemComparison refDataItem="Month" refAppVariable="Month" operator="in"/></appCondition></appContainerSelect></appDataIterator><HTMLItem>
			<dataSource>
				<staticValue></div><button onclick="
  if(!document.runAnim) 
  {

runAnim = function(buttonElement)
{
 var intervalTracker, doStuff = function() { 
  var iter = buttonElement.previousSibling
  , ibuttons = iter.getElementsByTagName('button');
  if(ibuttons[2].getAttribute('disabled')) {ibuttons[0].setAttribute('disabled',false);ibuttons[0].click();} else {ibuttons[2].click()}
}
 buttonElement.onclick = function()
 {
    if(intervalTracker)
   {
     clearInterval(intervalTracker);
     intervalTracker = false;
   }
   else
   {
     intervalTracker = setInterval(doStuff,1000);
   }
 };
 intervalTracker = setInterval(doStuff,1000);

};}
runAnim(this);
this.value='stop';
" value="Start animation">Start</button></staticValue>
			</dataSource>
		</HTMLItem></contents><style><CSS value="vertical-align:top"/></style></tableCell><tableCell><contents><block>
			<contents><list horizontalPagination="true" name="List1" refQuery="Query1">
			
			
			
			<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="ls"/>
				</defaultStyles>
			</style>
		<listColumns><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Month1"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Month1"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Revenue"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Revenue"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Quantity"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Quantity"/></dataSource></textItem></contents></listColumnBody></listColumn></listColumns><appContainerSelect><appCondition><appConditionDataItemComparison refAppVariable="Month" refDataItem="Month1" operator="in" dropIfValueIsEmpty="true"/></appCondition></appContainerSelect><appOnSelectSetVariableValues><appSetVariableValueToDataItemValue refAppVariable="Month" refDataItem="Month1"/></appOnSelectSetVariableValues></list></contents>
		<style><CSS value="height:550px;overflow:auto"/></style></block></contents></tableCell></tableCells></tableRow></tableRows></table></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><queries><query name="Query1"><source><model/></source><selection><dataItem name="Revenue"><expression>[sales_and_marketing].[Measures].[Revenue]</expression></dataItem><dataItem name="Product line" aggregate="none" rollupAggregate="none"><expression>[sales_and_marketing].[Products].[Products].[Product line]</expression></dataItem><dataItem name="Month" aggregate="none" rollupAggregate="none"><expression>lastPeriods(12,#prompt('Month','mun','[sales_and_marketing].[Time].[Time].[Time]->:[PC].[@MEMBER].[Time]')#)</expression></dataItem><dataItem name="Quantity"><expression>[sales_and_marketing].[Measures].[Quantity]</expression></dataItem><dataItemLevelSet name="Month1"><dmLevel><LUN>[sales_and_marketing].[Time].[Time].[Month]</LUN><itemCaption>Month</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Time]</DUN><itemCaption>Time</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Time].[Time]</HUN><itemCaption>Time</itemCaption></dmHierarchy></dataItemLevelSet></selection></query><query name="Query2"><source><model/></source><selection><dataItem name="Month" aggregate="none" rollupAggregate="none"><expression>[sales_and_marketing].[Time].[Time].[Month]</expression></dataItem></selection><detailFilters><detailFilter><filterExpression>[sales_and_marketing].[Measures].[Revenue]>0</filterExpression></detailFilter></detailFilters></query></queries><appProperties><appVariables><appVariable name="Month"/></appVariables></appProperties><reportName>AR Start Animation</reportName></report>
Advertisement

Book Review: IBM Cognos 10 Framework Manager, by Terry Curran

A well built metamodel is essential for any successful Cognos project. This book offers a solid guide to the best practices for building your model. The entire process of building a model, from joins to dimensional layers, is described in detail.

The chapters are ordered logically, first describing the tool and the various buttons and basic functionality, and then moving on to the advanced features. The book describes the entire process of building a model according to the most effective practices. Modellers will be well suited to keep this book open while building a model, even if it’s just to keep them on track.

In addition to describing the standard modeling features, the book also describes some advanced methods. Various multiuser modelling strategies are detailed; session parameters and parameter maps are explained with useful examples.

Terry does not go into every single trick, or explain how to fix every single bug in a given model (if he did, it would probably have to be several thousand pages long). However, he does lay down a set of guidelines which will provide for a portable and efficient model.

My only criticism is that it is sometimes too short. Some sections feel more like “how-to” guides that give step by step instructions without explaining the theory behind it.

Ultimately, both users who are unfamiliar with Framework, and veterans with years of experience will find it useful to read through and to keep it as a reference.

The book may be purchased from Amazon at http://www.amazon.com/IBM-Cognos-Framework-Manager-ebook/dp/B00CXPRD4G or directly from Packt http://www.packtpub.com/ibm-cognos-10-framework-manager/book

Information On Demand 2013!

Well, it’s once again time to start planning for the IOD. It was worth every penny last year, and I am certain it will only be better this year. The IOD is a great place to connect with other IBM business partners and customers. Where else can you talk with people from Boeing and Costco while eating breakfast? One of my most memorable moments was waiting for the flight back, talking to a woman from the Miami-Dade police on the way they use Cognos and BI to catch criminals.

The sessions are broken out by tracks of interest. Each track can have multiple sessions at the same time. To my despair, it’s impossible to attend more than one simultaneously. In addition to the sessions, there are hands on workshops about what you can do with the latest technology. The people manning the workshops are knowledgeable and will very cheerfully talk about how their tools work.

The early bird special ends June 28 for customers (September 13 for business partners), so I recommend registering earlier rather than later. You may want to contact your Cognos business partner of choice to find out if they have a promo code this year. So far I am aware of only three companies that are offering early bird registration specials, The following list is informational, they are in alphabetical order and I am not endorsing any one company over another, more will be added as more companies come out with deals. Feel free to leave a comment if you know of any others that should be mentioned.

  1. BSP – G13BSPSOFT
  2. Ironside – G13IRONSDE
  3. Motio – G13MOTIO
  4. PerformanceG2 – G13PERFG2

I’m holding off registering until IBM let’s me know if my session proposal has been accepted (I hear that they received over 2500 sessions proposals this year, so chances are slim).

Obviously, I am planning on going this year, and I have an offer. If any company wants to sponsor my trip (partially or fully) I will very happily give their products a completely biased review and will randomly tell people how awesome my sponsors’ products are. (Or I could do work for them, or something. I’m open to suggestions.)

And remember – PerformanceG2 for all your training needs!

Javascript drill up and down buttons

One of my more frequent requests is for a way to allow users to drill up without having to right click. Related, many developers also want a way to support both drill-throughs and drill-downs in a single click.

The way to handle this is actually fairly simple. It can be done with an inline onclick event inside an HTML item.

<img 
  src="..\hal\images\btn_arrow_up.gif" 
  onclick="
    var oCV = window['oCV'+'_THIS_'].getRV().getCV();
    oCV.getSelectionController().selectNode(this.parentNode,this.parentNode.nodeType);
    oCV.goDrillManager.rvDrillUp();" 
  onmouseover="this.style.cursor='pointer'"
/>

drill up down buttons

Stick this inside the crosstab node or list cell next to the label, make sure that drilling is enabled and test away. This behaves exactly as if you did a right-click->drill up. If drilling is disabled, this won’t do anything but select the node. This method will not override drill behaviors or security. If a user can’t right-click/drill up past a certain level, this will not let him either.

So how does this work?

The drill manager works by finding the selected node and performing the requested action on that. So whenever you click on the background of a node and it turns orange, that node has been selected. Notice that when you drill down normally, the moment before the action triggers the cell turns orange. That is the engine selecting that node before it runs the drill.

You can test this fairly easily by creating an input anywhere on the page with test drill Put that in an HTML item, run the report, highlight a node and click the button.

The next bit is getting this to work with charts. Unfortunately charts are a little more difficult. Charts themselves are composed (basically) of two parts, an image and an HTML map containing different areas. The areas are the parts of the chart that you can hover over for tooltips and click events. The map HTML of a fairly complex chart, revenue by year/product line, looks like:

<MAP class=chart_map name=RSrsvptt0 LID="rsvptt0RS">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line" tabIndex=-1 href="#" shape=POLY coords="352, 6, 495, 6, 495, 20, 352, 20" isChartTitle="true" ctx="11" type="legendTitle">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Camping Equipment" tabIndex=-1 href="#" shape=POLY coords="370, 20, 495, 20, 495, 36, 370, 36" ctx="5" type="legendLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Mountaineering Equipment" tabIndex=-1 href="#" shape=POLY coords="370, 36, 495, 36, 495, 52, 370, 52" ctx="6" type="legendLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Personal Accessories" tabIndex=-1 href="#" shape=POLY coords="370, 52, 495, 52, 495, 68, 370, 68" ctx="7" type="legendLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Outdoor Protection" tabIndex=-1 href="#" shape=POLY coords="370, 68, 495, 68, 495, 84, 370, 84" ctx="8" type="legendLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Product line = Golf Equipment" tabIndex=-1 href="#" shape=POLY coords="370, 84, 495, 84, 495, 100, 370, 100" ctx="9" type="legendLabel">
  <AREA class=chart_area title=Revenue tabIndex=-1 shape=POLY coords="19, 182, 19, 139, 7, 139, 7, 183, 19, 183" type="numericAxisTitle">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title=Year tabIndex=-1 href="#" shape=POLY coords="239, 344, 239, 334, 214, 334, 214, 345, 239, 345" isChartTitle="true" ctx="10" type="ordinalAxisTitle">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010" tabIndex=-1 href="#" shape=POLY coords="148, 330, 148, 320, 122, 320, 122, 331, 148, 331" ctx="1" type="ordinalAxisLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011" tabIndex=-1 href="#" shape=POLY coords="209, 330, 209, 320, 183, 320, 183, 331, 209, 331" ctx="2" type="ordinalAxisLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012" tabIndex=-1 href="#" shape=POLY coords="269, 330, 269, 320, 243, 320, 243, 331, 269, 331" ctx="3" type="ordinalAxisLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013" tabIndex=-1 href="#" shape=POLY coords="330, 330, 330, 320, 304, 320, 304, 331, 330, 331" ctx="4" type="ordinalAxisLabel">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Golf Equipment 
Revenue = 174,740,819.29" tabIndex=-1 href="#" shape=POLY coords="341, 310, 341, 224, 332, 224, 332, 311, 341, 311" ctx="30::9::4" type="chartElement" display="174,740,819.29">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Outdoor Protection 
Revenue = 4,471,025.26" tabIndex=-1 href="#" shape=POLY coords="332, 310, 322, 308, 322, 311, 332, 311" ctx="26::8::4" type="chartElement" display="4,471,025.26">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Personal Accessories 
Revenue = 443,693,449.85" tabIndex=-1 href="#" shape=POLY coords="322, 310, 322, 90, 312, 90, 312, 311, 322, 311" ctx="22::7::4" type="chartElement" display="443,693,449.85">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Mountaineering Equipment 
Revenue = 141,520,649.70" tabIndex=-1 href="#" shape=POLY coords="312, 310, 312, 240, 302, 240, 302, 311, 312, 311" ctx="18::6::4" type="chartElement" display="141,520,649.70">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2013 
Product line = Camping Equipment 
Revenue = 352,910,329.97" tabIndex=-1 href="#" shape=POLY coords="302, 310, 302, 135, 293, 135, 293, 311, 302, 311" ctx="15::5::4" type="chartElement" display="352,910,329.97">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Golf Equipment 
Revenue = 230,110,270.55" tabIndex=-1 href="#" shape=POLY coords="281, 310, 281, 196, 271, 196, 271, 311, 281, 311" ctx="29::9::3" type="chartElement" display="230,110,270.55">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Outdoor Protection 
Revenue = 10,349,175.84" tabIndex=-1 href="#" shape=POLY coords="271, 310, 271, 306, 261, 306, 261, 311, 271, 311" ctx="25::8::3" type="chartElement" display="10,349,175.84">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Personal Accessories 
Revenue = 594,009,408.42" tabIndex=-1 href="#" shape=POLY coords="261, 310, 261, 15, 252, 15, 252, 311, 261, 311" ctx="21::7::3" type="chartElement" display="594,009,408.42">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Mountaineering Equipment 
Revenue = 161,039,823.26" tabIndex=-1 href="#" shape=POLY coords="252, 310, 252, 230, 242, 230, 242, 311, 252, 311" ctx="17::6::3" type="chartElement" display="161,039,823.26">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2012 
Product line = Camping Equipment 
Revenue = 500,382,422.83" tabIndex=-1 href="#" shape=POLY coords="242, 310, 242, 61, 232, 61, 232, 311, 242, 311" ctx="14::5::3" type="chartElement" display="500,382,422.83">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Golf Equipment 
Revenue = 168,006,427.07" tabIndex=-1 href="#" shape=POLY coords="220, 310, 220, 227, 210, 227, 210, 311, 220, 311" ctx="28::9::2" type="chartElement" display="168,006,427.07">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Outdoor Protection 
Revenue = 25,008,574.08" tabIndex=-1 href="#" shape=POLY coords="210, 310, 210, 298, 201, 298, 201, 311, 210, 311" ctx="24::8::2" type="chartElement" display="25,008,574.08">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Personal Accessories 
Revenue = 456,323,355.90" tabIndex=-1 href="#" shape=POLY coords="201, 310, 201, 83, 191, 83, 191, 311, 201, 311" ctx="20::7::2" type="chartElement" display="456,323,355.90">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Mountaineering Equipment 
Revenue = 107,099,659.94" tabIndex=-1 href="#" shape=POLY coords="191, 310, 191, 257, 181, 257, 181, 311, 191, 311" ctx="16::6::2" type="chartElement" display="107,099,659.94">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2011 
Product line = Camping Equipment 
Revenue = 402,757,573.17" tabIndex=-1 href="#" shape=POLY coords="181, 310, 181, 110, 171, 110, 171, 311, 181, 311" ctx="13::5::2" type="chartElement" display="402,757,573.17">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010 
Product line = Golf Equipment 
Revenue = 153,553,850.98" tabIndex=-1 href="#" shape=POLY coords="159, 310, 159, 234, 150, 234, 150, 311, 159, 311" ctx="27::9::1" type="chartElement" display="153,553,850.98">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010 
Product line = Outdoor Protection 
Revenue = 36,165,521.07" tabIndex=-1 href="#" shape=POLY coords="150, 310, 150, 293, 140, 293, 140, 311, 150, 311" ctx="23::8::1" type="chartElement" display="36,165,521.07">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010 
Product line = Personal Accessories 
Revenue = 391,647,093.61" tabIndex=-1 href="#" shape=POLY coords="140, 310, 140, 116, 130, 116, 130, 311, 140, 311" ctx="19::7::1" type="chartElement" display="391,647,093.61">
  <AREA onmouseup=window.oCVRS.pcc(event) class="dl chart_area" title="Year = 2010 
Product line = Camping Equipment 
Revenue = 332,986,338.06" tabIndex=-1 href="#" shape=POLY coords="121, 310, 121, 145, 111, 145, 111, 311, 121, 311" ctx="12::5::1" type="chartElement" display="332,986,338.06">
</MAP>

Areas can’t be selected the same way as crosstab nodes. For one, the button can’t be placed directly into the chart. Secondly, the selectNode function won’t work on charts. No, for that we’ll need something radically different: setSelectedChartArea()

First, let’s decide what we want to drill up on. For the sake of this example, I’ll say that the users are drilling down on the time dimension in the ordinal axis. So in order to drill up, we need to isolate one of those areas. It normally doesn’t matter which one as they will all drill up to the same member (this may not always be the case, especially if you change the default drill behavior). We need to loop through the areas of the chart, and find the first area that has the type “ordinalAxisLAbel”. Once we have it, we can use the drastically different function to select it.

Since the button doesn’t exist inside the chart, we also need a way to find the chart element on the page. Fortunately there is a Cognos function for that. getLayoutElementFromLid works just like getElementById. Except just for Cognos objects. And when using it, you have to remember to specify the namespace you’re working in. So not like getElementById at all. Using getLayoutElementFromLid will return the actual image of the chart, so to get the areas we have to go two nodes up.

var oCV = window['oCV'+'_THIS_'].getRV().getCV()
  , areas = oCV.getLayoutElementFromLid('ChartName'+'_THIS_').parentNode.parentNode.getElementsByTagName('AREA')  ;

for(var i = 0;i<areas.length;i++){
  if ( areas[i].getAttribute('type')=='ordinalAxisLabel') 
  {
    oCV.getSelectionController().setSelectedChartArea(areas[i]);
    oCV.goDrillManager.rvDrillUp();break;
  }

}

Stick that into the onclick event of an element, and it will drill up on the first ordinal area it finds in your chart.

This should, in theory, work in previous versions of Cognos. It works perfectly in 10.1.1 (switch _THIS_ with the correct namespace (RS for running from Report Studio or _NS_ for running from connection or in a portlet)), but unfortunately I don’t have access to any prior versions to test.

Below is the report XML. You can downgrade this to 10.1 fairly easily by changing /report/9.0/ to /report/8.0/.

<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>
				
				<layouts>
					<layout>
						<reportPages>
							<page name="Page1">
								<style>
									<defaultStyles>
										<defaultStyle refStyle="pg"/>
									</defaultStyles>
								</style>
								<pageBody>
									<style>
										<defaultStyles>
											<defaultStyle refStyle="pb"/>
										</defaultStyles>
									</style>
									<contents><v2_combinationChart maxHotspots="10000" refQuery="Query1" name="MyChart">
								<v2_combinationTypeTooltips/>
								<v2_legend>
									<v2_legendPosition>
										<v2_legendPreset/>
									</v2_legendPosition>
									<v2_legendTitle refQuery="Query1">
										<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="Query1">
											<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="Year"><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 gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#8599D3"/>
																<v2_gradientColor colorPosition="100" gradientColor="#5876AE"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#E3AE6C">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#E3AE6C"/>
																<v2_gradientColor colorPosition="100" gradientColor="#CD854E"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#839862">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#839862"/>
																<v2_gradientColor colorPosition="100" gradientColor="#6C7F56"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#B7C873">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#B7C873"/>
																<v2_gradientColor colorPosition="100" gradientColor="#AFB885"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#8484A8">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#8484A8"/>
																<v2_gradientColor colorPosition="100" gradientColor="#525E7E"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#C0CCED">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#C0CCED"/>
																<v2_gradientColor colorPosition="100" gradientColor="#B0C2E5"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#8C5580">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#8C5580"/>
																<v2_gradientColor colorPosition="100" gradientColor="#794067"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#C789BC">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#C789BC"/>
																<v2_gradientColor colorPosition="100" gradientColor="#BB72BC"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#D5BAEF">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#D5BAEF"/>
																<v2_gradientColor colorPosition="100" gradientColor="#C29FD1"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#83683F">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#83683F"/>
																<v2_gradientColor colorPosition="100" gradientColor="#604926"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#DCB05A">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#DCB05A"/>
																<v2_gradientColor colorPosition="100" gradientColor="#C09C52"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#F4DF9E">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#F4DF9E"/>
																<v2_gradientColor colorPosition="100" gradientColor="#E4CF87"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#5F8A8C">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#5F8A8C"/>
																<v2_gradientColor colorPosition="100" gradientColor="#537579"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#96C4B2">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#96C4B2"/>
																<v2_gradientColor colorPosition="100" gradientColor="#89B0A0"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#CBE8E7">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#CBE8E7"/>
																<v2_gradientColor colorPosition="100" gradientColor="#BDD6D5"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#AE6564">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#AE6564"/>
																<v2_gradientColor colorPosition="100" gradientColor="#875352"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#D88C6F">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#D88C6F"/>
																<v2_gradientColor colorPosition="100" gradientColor="#C47D61"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#E3C9B0">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#E3C9B0"/>
																<v2_gradientColor colorPosition="100" gradientColor="#D2B2A5"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#848484">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#848484"/>
																<v2_gradientColor colorPosition="100" gradientColor="#555555"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#a4a4a4">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#a4a4a4"/>
																<v2_gradientColor colorPosition="100" gradientColor="#909090"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
													<v2_solidPaletteEntry>
														<v2_fillEffect defaultColor="#C7C7C7">
															<v2_linearGradient gradientAngle="0">
																<v2_gradientColor colorPosition="0" gradientColor="#C7C7C7"/>
																<v2_gradientColor colorPosition="100" gradientColor="#c1c1c1"/>
															</v2_linearGradient>
														</v2_fillEffect>
													</v2_solidPaletteEntry>
												</v2_solidPaletteEntries>
											</v2_solidPalette>
											<!-- v2_solidPaletteRef ref="gDefaultSolid"/ -->
										<chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Product line"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></v2_bar>
									</v2_combinationChartTypes>
									<v2_axis>
										<v2_axisTitle refQuery="Query1">
											<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_defaultChartMeasure refDataItem="Revenue"/></v2_combinationChart>
							<HTMLItem>
			<dataSource>
				<staticValue>&lt;input type="button" onclick="
var oCV = window['oCV'+'_THIS_'].getRV().getCV()
  , areas = oCV.getLayoutElementFromLid('MyChart'+'_THIS_').parentNode.parentNode.getElementsByTagName('AREA')  ;

for(var i = 0;i&lt;areas.length;i++){
  if ( areas[i].getAttribute('type')=='ordinalAxisLabel') 
  {
    oCV.getSelectionController().setSelectedChartArea(areas[i]);
    oCV.goDrillManager.rvDrillUp();break;
  }

}
" value="Drill up chart"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><list horizontalPagination="true" name="List1" refQuery="Query1">
			
			
			
			<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="ls"/>
				</defaultStyles>
			</style>
		<listColumns><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Year"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><dataItemValue refDataItem="Year"/></dataSource></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents></listColumnBody></listColumn></listColumns></list><crosstab horizontalPagination="true" name="Crosstab1" refQuery="Query1">
			<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>
		<crosstabRows><crosstabNode><crosstabNestedNodes><crosstabNode><crosstabNodeMembers><crosstabNodeMember refDataItem="Product line" edgeLocation="e2"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><memberCaption/></dataSource></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabNestedNodes><crosstabNodeMembers><crosstabNodeMember refDataItem="Year" edgeLocation="e1"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><memberCaption/></dataSource><reportDrills><reportDrill name="Drill-Through Definition1"><drillLabel><dataSource><staticValue/></dataSource></drillLabel><drillTarget method="execute" showInNewWindow="true"><reportPath path="CAMID(&quot;OpenDJ:u:cn=administrator&quot;)/folder[@name='My Folders']/report[@name='test drill down']"><XMLAttributes><XMLAttribute name="ReportName" value="test drill down" output="no"/><XMLAttribute name="class" value="report" output="no"/></XMLAttributes></reportPath></drillTarget></reportDrill></reportDrills><style><defaultStyles><defaultStyle refStyle="hy"/></defaultStyles></style></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabRows><crosstabFactCell><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><cellValue/></dataSource></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents><style><defaultStyles><defaultStyle refStyle="mv"/></defaultStyles></style></crosstabFactCell><defaultMeasure refDataItem="Revenue"/><crosstabColumns><crosstabNode><crosstabNodeMembers><crosstabNodeMember refDataItem="Region" edgeLocation="e3"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><HTMLItem description="drillUp">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_up.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillUp();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><memberCaption/></dataSource></textItem><HTMLItem description="drillDown">
			<dataSource>
				<staticValue>&lt;img src="..\hal\images\btn_arrow_down.gif" onclick="var oCV = window['oCV'+'_THIS_'].getRV().getCV();oCV.getSelectionController().selectNode(this.parentNode);oCV.goDrillManager.rvDrillDown();" onmouseover="this.style.cursor='pointer'"/&gt;</staticValue>
			</dataSource>
		</HTMLItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabColumns></crosstab></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><queries><query name="Query1"><source><model/></source><selection><dataItemLevelSet name="Year"><dmLevel><LUN>[sales_and_marketing].[Time].[Time].[Year]</LUN><itemCaption>Year</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Time]</DUN><itemCaption>Time</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Time].[Time]</HUN><itemCaption>Time</itemCaption></dmHierarchy></dataItemLevelSet><dataItemLevelSet name="Product line"><dmLevel><LUN>[sales_and_marketing].[Products].[Products].[Product line]</LUN><itemCaption>Product line</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Products]</DUN><itemCaption>Products</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Products].[Products]</HUN><itemCaption>Products</itemCaption></dmHierarchy></dataItemLevelSet><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><dataItemLevelSet name="Region"><dmLevel><LUN>[sales_and_marketing].[Retailers].[Retailers].[Region]</LUN><itemCaption>Region</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Retailers]</DUN><itemCaption>Retailers</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Retailers].[Retailers]</HUN><itemCaption>Retailers</itemCaption></dmHierarchy></dataItemLevelSet></selection></query></queries><reportName>test drill down</reportName><drillBehavior drillUpDown="true" modelBasedDrillThru="true"/></report>

Manipulate drill through definitions with JavaScript

This article is based on 10.2, and uses the 10.2 Prompt API. It can be easily adapted to earlier versions however.

When defining a drillthrough you can set various settings as report target, output format, locales and more. Unfortunately there is no easy way to change those settings on the fly. On the other hand, I just did all the work so now there is an easy way.

Drillthrough definitions come in two basic parts. The second part, which won’t be delved into in this article, has the actual values being passed. These can be seen in the links themselves.
drillthrough HTML
Looking at the code itself (modified for legibility):

<SPAN 
  dtTargets='
    <drillTarget 
      drillIdx=\"0\" 
      label=\"DrillThrough\">
      <drillParameter 
        name=\"Product Line\" 
        value=\"[sales_and_marketing].[Products].[Products].[Product line]-&amp;gt;:[PC].[@MEMBER].[991]\" 
        displayValue=\"Camping Equipment\"/>
      <drillParameter 
        name=\"Year\" 
        value=\"[sales_and_marketing].[Time].[Time].[Year]-&amp;gt;:[PC].[@MEMBER].[20100101-20101231]\" 
        displayValue=\"2010\"/>
    <\/drillTarget>'>
  <SPAN class=hy tabIndex=-1>
    81,929,179.22
  </SPAN>
</SPAN>

This can be modified by looping through with JavaScript fairly easily, but I’ll leave that for another time.

The first part describes the actual settings – the metadata of the drill. This is stored in JavaScript object in the page, which makes it significantly easier to modify. Stringifying the object returns (again, modified for legibility):

[
  {"m_label":"DrillThrough"
  ,"m_outputFormat":"HTMLFragment"
  ,"m_outputLocale":"en-us"
  ,"m_showInNewWindow":"true"
  ,"m_method":"execute"
  ,"m_path":"/content/folder[@name='JavaScript Examples']/folder[@name='Modifying Drillthrough Definitions']/report[@name='Drill 1']"
  ,"m_bookmark":""
  ,"m_parameters":"<bus:parameters xsi:type=\"SOAP-ENC:Array\" SOAP-ENC:arrayType=\"bus:baseParameter[2]\"><item xsi:type=\"bus:parameter\"><bus:name xsi:type=\"xs:string\">Product Line</bus:name><bus:type xsi:type=\"bus:parameterDataTypeEnum\">memberUniqueName</bus:type></item><item xsi:type=\"bus:parameter\"><bus:name xsi:type=\"xs:string\">Year</bus:name><bus:type xsi:type=\"bus:parameterDataTypeEnum\">memberUniqueName</bus:type></item></bus:parameters>"
  ,"m_objectPaths":"<bus:objectPaths xsi:type=\"SOAP-ENC:Array\" SOAP-ENC:arrayType=\"bus:searchPathSingleObject[4]\"><item xsi:type=\"bus:searchPathSingleObject\">storeID(&quot;i326070F7595B4B5BBCD38D945E66AAEB&quot;)</item><item xsi:type=\"bus:searchPathSingleObject\">storeID(&quot;iDB36CF1A0D654E99B3117B0B6A7F8789&quot;)/model[last()]</item><item xsi:type=\"bus:searchPathSingleObject\">/content/folder[@name=&apos;Samples&apos;]/folder[@name=&apos;Cubes&apos;]/package[@name=&apos;Sales and Marketing (cube)&apos;]/model[@name=&apos;2008-07-25T15:28:38.072Z&apos;]</item><item xsi:type=\"bus:searchPathSingleObject\">/content/folder[@name=&apos;Samples&apos;]/folder[@name=&apos;Cubes&apos;]/package[@name=&apos;Sales and Marketing (cube)&apos;]/model[last()]</item></bus:objectPaths>"
  ,"m_prompt":"false"
  ,"m_dynamicDrillThrough":false
  ,"m_parameterProperties":"<PARAMETER-PROPERTIES/>"}
  ,
  {"m_label":"DrillThrough"
  ,"m_outputFormat":"HTMLFragment"
  ,"m_outputLocale":"en-us"
  ,"m_showInNewWindow":"true"
  ,"m_method":"execute"
  ,"m_path":"/content/folder[@name='JavaScript Examples']/folder[@name='Modifying Drillthrough Definitions']/report[@name='Drill 1']"
  ,"m_bookmark":""
  ,"m_parameters":"<bus:parameters xsi:type=\"SOAP-ENC:Array\" SOAP-ENC:arrayType=\"bus:baseParameter[2]\"><item xsi:type=\"bus:parameter\"><bus:name xsi:type=\"xs:string\">Product Line</bus:name><bus:type xsi:type=\"bus:parameterDataTypeEnum\">memberUniqueName</bus:type></item><item xsi:type=\"bus:parameter\"><bus:name xsi:type=\"xs:string\">Year</bus:name><bus:type xsi:type=\"bus:parameterDataTypeEnum\">memberUniqueName</bus:type></item></bus:parameters>"
  ,"m_objectPaths":"<bus:objectPaths xsi:type=\"SOAP-ENC:Array\" SOAP-ENC:arrayType=\"bus:searchPathSingleObject[4]\"><item xsi:type=\"bus:searchPathSingleObject\">storeID(&quot;i326070F7595B4B5BBCD38D945E66AAEB&quot;)</item><item xsi:type=\"bus:searchPathSingleObject\">storeID(&quot;iDB36CF1A0D654E99B3117B0B6A7F8789&quot;)/model[last()]</item><item xsi:type=\"bus:searchPathSingleObject\">/content/folder[@name=&apos;Samples&apos;]/folder[@name=&apos;Cubes&apos;]/package[@name=&apos;Sales and Marketing (cube)&apos;]/model[@name=&apos;2008-07-25T15:28:38.072Z&apos;]</item><item xsi:type=\"bus:searchPathSingleObject\">/content/folder[@name=&apos;Samples&apos;]/folder[@name=&apos;Cubes&apos;]/package[@name=&apos;Sales and Marketing (cube)&apos;]/model[last()]</item></bus:objectPaths>"
  ,"m_prompt":"false"
  ,"m_dynamicDrillThrough":false
  ,"m_parameterProperties":"<PARAMETER-PROPERTIES/>"}]

Each of these settings is easily changed (except for the the m_parameters and m_parameterProperties because that means changing the settings on the actual drills themselves). People with sharp eyes may notice that both drillthrough definitions are exactly the same. Why does it appear twice? The drillthrough appears twice in my report’s crosstab. The definition appears for the detail row and again for the totals row. If I was passing the individual month with the detail, then the first drillthrough in the object would include the month.

Because the drills can appear twice, any function written to rewrite the settings must include a loop to check the m_label in each element.

Consider the following:

<script>
var paulScripts = {},  oCR = cognos.Report.getReport( "_THIS_" );

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

/*
 * function: changeDrillAttribute
 * By Paul Mendelson
 * This allows the user to change any attribute in the drill. Attributes may be:
 * m_label, m_outputFormat, m_outputLocale, m_showInNewWindow, m_method, m_path, 
 * m_bookmark, m_parameters, m_objectPaths, m_prompt, m_dynamicDrillThrough, 
 * m_parameterProperties
 * Drills may appear multiple times in the object, so the loop goes through the entire array. Each 
 * matching drill will have the attribute changed as desired.
 * Valid m_outputFormat:  CSV, HTML, layoutDataXML, MHT,  PDF, rawXML, singleXLS, spreadsheetML, XLS, 
 * XML, XLWA.
 * m_path: /content/folder[@name='folderName']/folder[@name='folderName']/report[@name='reportName']
 */

paulScripts.changeDrillAttribute = function (drillName,attribute,newValue){
  var oCV = window['oCV'+'_THIS_']
  , drillsObj = oCV.getRV().getCV().getDrillTargets();

  for(var i=0;i<drillsObj.length;i++){
   if( drillsObj[i].m_label == drillName) drillsObj[i][attribute] = newValue;
  }
}

</script>

paulScripts.changeDrillAttribute function will receive the name of the drill, the attribute to change, and the new value of that attribute. It will then loop through all of the elements in the drill targets, and if the label matches, change the attribute.

The following screenshot shows the crosstab containing the drill, and two radio button groups.
radios can change the drill

The radios have a validator set on them to invoke the changeDrillAttribute function.

<script>
paulScripts.getControl('Format').setValidator(
  function (values) {
  paulScripts.changeDrillAttribute ('DrillThrough','m_outputFormat',values[0].use);
  return true;
  }
);

paulScripts.getControl('Target').setValidator(
  function (values) {
  paulScripts.changeDrillAttribute ('DrillThrough','m_path',values[0].use);
  return true;
  }
);

</script>

Whenever the radio is changed, it will modify the drill appropriately. That setValidator function is the only use of the new Prompt API, so this can be changed very easily to previous versions by using onChange events.

Ultimately the end user can decide which report he wants to drill to, and in what format, without having to right-click. Because users don’t like right-clicking.

The following XML is the report. Remember to create two targets for the drill and to fix the value prompt. To get the path of the report, simply go to the properties of the report, click on “View the search path, ID and URL” and copy the search path.

<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"/>
				<queries>
					<query name="Query1">
						<source>
							<model/>
						</source>
						<selection><dataItemLevelSet name="Year"><dmLevel><LUN>[sales_and_marketing].[Time].[Time].[Year]</LUN><itemCaption>Year</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Time]</DUN><itemCaption>Time</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Time].[Time]</HUN><itemCaption>Time</itemCaption></dmHierarchy></dataItemLevelSet><dataItemLevelSet name="Quarter"><dmLevel><LUN>[sales_and_marketing].[Time].[Time].[Quarter]</LUN><itemCaption>Quarter</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Time]</DUN><itemCaption>Time</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Time].[Time]</HUN><itemCaption>Time</itemCaption></dmHierarchy></dataItemLevelSet><dataItemLevelSet name="Product line"><dmLevel><LUN>[sales_and_marketing].[Products].[Products].[Product line]</LUN><itemCaption>Product line</itemCaption></dmLevel><dmDimension><DUN>[sales_and_marketing].[Products]</DUN><itemCaption>Products</itemCaption></dmDimension><dmHierarchy><HUN>[sales_and_marketing].[Products].[Products]</HUN><itemCaption>Products</itemCaption></dmHierarchy></dataItemLevelSet><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>
				</queries>
				<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;script&gt;
var paulScripts = {},  oCR = cognos.Report.getReport( "_THIS_" );

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

/*
 * function: changeDrillAttribute
 * Paul Mendelson
 * This allows the user to change any attribute in the drill. Attributes may be:
 *   m_label, m_outputFormat, m_outputLocale, m_showInNewWindow, m_method, m_path, 
  * m_bookmark, m_parameters, m_objectPaths, m_prompt, m_dynamicDrillThrough, 
  * m_parameterProperties
  * Drills may appear multiple times in the object, so the loop goes through the entire array. Each 
  * matching drill will have the attribute changed as desired.
  *  Valid m_outputFormat:  CSV, HTML, layoutDataXML, MHT,  PDF, rawXML, singleXLS, spreadsheetML, XLS, 
  * XML, XLWA.
  * m_path: /content/folder[@name='folderName']/folder[@name='folderName']/report[@name='reportName']
  */

paulScripts.changeDrillAttribute = function (drillName,attribute,newValue){
  var oCV = window['oCV'+'_THIS_']
  , drillsObj = oCV.getRV().getCV().getDrillTargets();

  for(var i=0;i&lt;drillsObj.length;i++){
   if( drillsObj[i].m_label == drillName) drillsObj[i][attribute] = newValue;
  }
}

  &lt;/script&gt;
	</staticValue>
			</dataSource>
		</HTMLItem>
									<table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse"/></style><tableRows><tableRow><tableCells><tableCell><contents><crosstab refQuery="Query1" horizontalPagination="true" name="Crosstab1">
											<crosstabCorner><style><defaultStyles><defaultStyle refStyle="xm"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Revenue"/></dataSource></textItem></contents></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>
												<defaultStyles>
													<defaultStyle refStyle="xt"/>
												</defaultStyles>
												<CSS value="border-collapse:collapse"/>
											</style>
										<crosstabRows><crosstabNode><crosstabNestedNodes><crosstabNode><crosstabNodeMembers><crosstabNodeMember refDataItem="Quarter" edgeLocation="e2"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><textItem><dataSource><memberCaption/></dataSource></textItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode><crosstabNode><crosstabNodeMembers><crosstabNodeMember refDataItem="Year" edgeLocation="e3"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><textItem><dataSource><memberCaption/></dataSource></textItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabNestedNodes><crosstabNodeMembers><crosstabNodeMember refDataItem="Year" 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="Product line" edgeLocation="e4"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><textItem><dataSource><memberCaption/></dataSource></textItem></contents></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabColumns><defaultMeasure refDataItem="Revenue"/><crosstabFactCell><contents><textItem><dataSource><cellValue/></dataSource><reportDrills><reportDrill name="DrillThrough"><drillLabel><dataSource><staticValue/></dataSource></drillLabel><drillTarget method="execute" showInNewWindow="true"><reportPath path="/content/folder[@name='JavaScript Examples']/folder[@name='Modifying Drillthrough Definitions']/report[@name='Drill 1']"><XMLAttributes><XMLAttribute name="ReportName" value="Drill 1" output="no"/><XMLAttribute name="class" value="report" output="no"/></XMLAttributes></reportPath><drillLinks><drillLink><drillTargetContext><parameterContext parameter="Product Line"/></drillTargetContext><drillSourceContext><dataItemContext refDataItem="Product line"/></drillSourceContext></drillLink><drillLink><drillTargetContext><parameterContext parameter="Year"/></drillTargetContext><drillSourceContext><dataItemContext refDataItem="Year"/></drillSourceContext></drillLink></drillLinks></drillTarget></reportDrill></reportDrills><style><defaultStyles><defaultStyle refStyle="hy"/></defaultStyles></style></textItem></contents><style><defaultStyles><defaultStyle refStyle="mv"/></defaultStyles></style></crosstabFactCell></crosstab></contents></tableCell><tableCell><contents><table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse"/></style><tableRows><tableRow><tableCells><tableCell><contents><selectValue parameter="Format" selectValueUI="radioGroup" name="Format"><selectOptions><selectOption useValue="PDF"/><selectOption useValue="spreadsheetML"/><selectOption useValue="HTMLFragment"/><selectOption useValue="HTML"/></selectOptions><defaultSelections><defaultSimpleSelection>HTMLFragment</defaultSimpleSelection></defaultSelections></selectValue></contents></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents><selectValue parameter="Target" name="Target" selectValueUI="radioGroup"><selectOptions><selectOption useValue="/content/folder[@name='JavaScript Examples']/folder[@name='Modifying Drillthrough Definitions']/report[@name='Drill 1']"><displayValue>Target 1</displayValue></selectOption><selectOption useValue="/content/folder[@name='JavaScript Examples']/folder[@name='Modifying Drillthrough Definitions']/report[@name='Drill 2']"><displayValue>Target 2</displayValue></selectOption></selectOptions><defaultSelections><defaultSimpleSelection>/content/folder[@name='JavaScript Examples']/folder[@name='Modifying Drillthrough Definitions']/report[@name='Drill 1']</defaultSimpleSelection></defaultSelections></selectValue></contents></tableCell></tableCells></tableRow></tableRows></table></contents><style><CSS value="vertical-align:top"/></style></tableCell></tableCells></tableRow></tableRows></table><HTMLItem>
			<dataSource>
				<staticValue>&lt;script&gt;
paulScripts.getControl('Format').setValidator(
  function (values) {
  paulScripts.changeDrillAttribute ('DrillThrough','m_outputFormat',values[0].use);
  return true;
  }
);

paulScripts.getControl('Target').setValidator(
  function (values) {
  paulScripts.changeDrillAttribute ('DrillThrough','m_path',values[0].use);
  return true;
  }
);

&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>Report</reportName></report>

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

<report xmlns="http://developer.cognos.com/schemas/report/9.0/" expressionLocale="he" interactivePageBreakByFrame="true">
    <modelPath>/content/folder[@name='Samples']/folder[@name='Cubes']/package[@name='Sales and Marketing (cube)']/model[@name='2008-07-25T15:28:38.072Z']</modelPath> 
    <layouts> 
        <layout> 
            <reportPages> 
                <page name="Page1"> 
                    <pageBody> 
                        <contents><HTMLItem description="Styles"> 
                                <dataSource> 
                                    <staticValue>&lt;style type="text/css"&gt; 
  
input.updatebutton 
{ 
   font-size:11px; 
   font-weight:bold; 
   width:140px; 
   height:27px; 
   color:#000000; 
   background-color:#cdc9c9; 
   border-style:solid; 
   border-color:#003377; 
   border-width:3px; 
} 
  
  
  
input.matchbutton 
{ 
   font-size:11px; 
   font-weight:bold; 
   width:140px; 
   height:27px; 
   color:#EEFFFF; 
   background-color:#0088DD; 
   border-style:solid; 
   border-color:#003377; 
   border-width:3px; 
} 
  
input.selectbutton 
{ 
   font-size:9px; 
   font-weight:bold; 
   width:60px; 
   height:20px; 
   color:#000000; 
   background-color:#FFFFFF; 
   border-style:solid; 
   border-color:#FFFFFF; 
   border-width:3px; 
} 
  
&lt;/style&gt; 
  
&lt;script language="javascript"&gt; 
  
function goLite(FRM,BTN) 
{ 
   window.document.forms[FRM].elements[BTN].style.color = "#FFFF99"; 
   window.document.forms[FRM].elements[BTN].style.backgroundColor = "#11AAEE"; 
} 
  
function goDim(FRM,BTN) 
{ 
   window.document.forms[FRM].elements[BTN].style.color = "#EEFFFF"; 
   window.document.forms[FRM].elements[BTN].style.backgroundColor = "#0088DD"; 
} 
  
&lt;/script&gt; 
</staticValue> 
                                </dataSource> 
                            </HTMLItem> 
                            <HTMLItem description="Scripts"> 
                                <dataSource> 
                                    <staticValue>&lt;script&gt; 
function selectInCheckbox(cbGroup,id) 
{ 
   var inputs= document.getElementById(cbGroup).getElementsByTagName('input'); 
   for (var i=0;i&lt;inputs.length;i++) 
   { 
        if (inputs[i].value == id)  
        { 
            inputs[i].click(); 
        } 
   } 
} 
  
function selectInCheckboxRow(cbGroup,id) 
{ 
    var inputs= document.getElementById(cbGroup).getElementsByTagName('input'); 
    inputs[id].click(); 
} 

function checkAll(list){ 
var inputs=document.getElementById(list).getElementsByTagName('input') 
for (var i=0;i&lt;inputs.length;i++){ 
        if (inputs[i].type == 'checkbox') { 
            if (inputs[i].checked == true)  
        {} 
        else {inputs[i].click();} 
        } 
} 
}  
  
function unCheckAll(list){ 
var inputs=document.getElementById(list).getElementsByTagName('input') 
for (var i=0;i&lt;inputs.length;i++){ 
        if (inputs[i].type == 'checkbox') { 
            if (inputs[i].checked == true)  
        {inputs[i].click();} 
        else {} 
        } 
} 
}  

function getSource (){
    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; 
} 
  

function checkNested(){

var 
    elm = getSource().parentNode
  , tbody = elm.parentNode.parentNode.parentNode
  , rowsLength = tbody.rows.length
  , rowSpanLength = elm.rowSpan
  , rowIndex = elm.parentNode.rowIndex
  , isChecked = getSource().checked;

  for(var i=rowIndex;i&lt;rowIndex+rowSpanLength;i++)
  {
     var e = i == rowIndex?elm.cellIndex + 1 : 0;
      if(tbody.rows[i].cells[e].getElementsByTagName('INPUT')[0].checked == isChecked) {continue;}
     else{  tbody.rows[i].cells[e].getElementsByTagName('INPUT')[0].click()}
      i = i+elm.nextSibling.rowSpan - 1;

  }
}
&lt;/script&gt; 
  
</staticValue> 
                                </dataSource> 
                            </HTMLItem> 
                              
                              
                            <promptButton type="reprompt"> 
            <contents/> 
            <style> 
                <defaultStyles> 
                    <defaultStyle refStyle="bp"/> 
                </defaultStyles> 
            </style> 
        </promptButton><table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse"/></style><tableRows><tableRow><tableCells><tableCell><contents><HTMLItem description="div"> 
            <dataSource> 
                <staticValue>&lt;div id="checkbox1" &gt;</staticValue> 
            </dataSource> 
        </HTMLItem><selectValue multiSelect="true" parameter="code" range="false" refQuery="Prompt" required="false" selectValueUI="checkboxGroup"><useItem refDataItem="Product line code"/><sortList><sortItem refDataItem="Product line code"/></sortList></selectValue><HTMLItem description="/div"> 
            <dataSource> 
                <staticValue>&lt;/div&gt;</staticValue> 
            </dataSource> 
        </HTMLItem><HTMLItem description="div"> 
            <dataSource> 
                <staticValue>&lt;div id="checkbox2" &gt;</staticValue> 
            </dataSource> 
        </HTMLItem><selectValue multiSelect="true" parameter="Quarter" refQuery="Quarters" required="false" selectValueUI="checkboxGroup"><useItem refDataItem="Quarter - Category Code"><displayItem refDataItem="Quarter"/></useItem></selectValue><HTMLItem description="/div"> 
            <dataSource> 
                <staticValue>&lt;/div&gt;</staticValue> 
            </dataSource> 
        </HTMLItem></contents><style><CSS value="vertical-align:top"/></style></tableCell><tableCell><contents><HTMLItem description="div id=&quot;list1&quot;"> 
                                                                <dataSource> 
                                                                    <staticValue>&lt;div id="list1"&gt;</staticValue> 
                                                                </dataSource> 
                                                            </HTMLItem><list name="List2" pageBreakText="false" refQuery="Prompt" repeatEveryPage="true"> 
              
              
              
            <style> 
                <CSS value="border-collapse:collapse"/> 
                <defaultStyles> 
                    <defaultStyle refStyle="ls"/> 
                </defaultStyles> 
            </style> 
        <listColumns><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><staticValue>HTML Item</staticValue></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><HTMLItem description="Checkbox Start"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>&lt;input title="Faster but if the sorting is off then this won't work" type="checkbox"  
</staticValue></dataSource> 
                                                                                </HTMLItem><HTMLItem description="checked"> 
            <dataSource> 
                  
            <reportExpression>case when (ParamValue('code') +', ') contains ([Product line code] +', ') then (' checked ') else ('') end</reportExpression></dataSource> 
        </HTMLItem><HTMLItem description="onClick"> 
            <dataSource> 
                <staticValue>onClick="selectInCheckboxRow('checkbox1','</staticValue> 
            </dataSource> 
        </HTMLItem><HTMLItem description="Row"> 
            <dataSource> 
                  
            <reportExpression>RowNumber ()</reportExpression></dataSource> 
        </HTMLItem><HTMLItem description="CheckboxEnd"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>'); 
"&gt; 
</staticValue> 
                                                                                    </dataSource> 
                                                                                </HTMLItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><staticValue>By Code</staticValue></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><HTMLItem description="Checkbox Start"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>&lt;input title="Slower but less prone to error" type="checkbox"  
</staticValue></dataSource> 
                                                                                </HTMLItem><HTMLItem description="checked"> 
            <dataSource> 
                  
            <reportExpression>case when (ParamValue('code') +', ') contains ([Product line code] +', ') then (' checked ') else ('') end</reportExpression></dataSource> 
        </HTMLItem><HTMLItem description="onClick"> 
            <dataSource> 
                <staticValue>onClick="selectInCheckbox('checkbox1','</staticValue> 
            </dataSource> 
        </HTMLItem><HTMLItem description="Code"> 
            <dataSource> 
                  
            <dataItemValue refDataItem="Product line code"/></dataSource> 
        </HTMLItem><HTMLItem description="CheckboxEnd"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>'); 
"&gt; 
</staticValue> 
                                                                                    </dataSource> 
                                                                                </HTMLItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Product line"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Product line"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Quantity"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Quantity"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Revenue"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Revenue"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Gross profit"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Gross profit"/></dataSource></textItem></contents></listColumnBody></listColumn></listColumns><propertyList><propertyItem refDataItem="Product line code"/></propertyList><sortList><sortItem refDataItem="Product line code"/></sortList></list><HTMLItem description="/div"> 
                                                                <dataSource> 
                                                                    <staticValue>&lt;/div&gt;</staticValue> 
                                                                </dataSource> 
                                                            </HTMLItem><HTMLItem description="doAll"> 
                                                        <dataSource> 
                                                            <staticValue> &lt;input type="button" value="Select All" class="selectbutton" onmouseover = "this.style.cursor='hand'" onclick="checkAll('list1');"&gt; 
&lt;input type="button" value="Clear All" class="selectbutton" onmouseover = "this.style.cursor='hand'" onclick="unCheckAll('list1');"&gt;</staticValue> 
                                                        </dataSource> 
                                                    </HTMLItem><HTMLItem description="div id=&quot;list2&quot;"> 
                                                                <dataSource> 
                                                                    <staticValue>&lt;div id="list2"&gt;</staticValue> 
                                                                </dataSource> 
                                                            </HTMLItem><list horizontalPagination="true" name="List1" refQuery="Prompt">
			
			
			
			<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="ls"/>
				</defaultStyles>
			</style>
		<listColumns><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Time"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><HTMLItem>
			<dataSource>
				<staticValue>&lt;input type="checkbox" onclick="
checkNested()"&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><dataItemValue refDataItem="Time"/></dataSource></textItem></contents><listColumnRowSpan refDataItem="Time"/></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Year"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><HTMLItem>
			<dataSource>
				<staticValue>&lt;input type="checkbox" onclick="
checkNested()"&gt;</staticValue>
			</dataSource>
		</HTMLItem><textItem><dataSource><dataItemValue refDataItem="Year"/></dataSource></textItem></contents><listColumnRowSpan refDataItem="Year"/></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Quarter"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lc"/></defaultStyles></style><contents><HTMLItem description="Checkbox Start"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>&lt;input title="Slower but less prone to error" type="checkbox"  
</staticValue></dataSource> 
                                                                                </HTMLItem><HTMLItem description="checked"> 
            <dataSource> 
                  
            <reportExpression>case when (ParamValue('Quarter') +', ') contains ([Quarter - Category Code] +', ') then (' checked ') else ('') end</reportExpression></dataSource> 
        </HTMLItem><HTMLItem description="onClick"> 
            <dataSource> 
                <staticValue>onClick="selectInCheckbox('checkbox2',unescape('</staticValue> 
            </dataSource> 
        </HTMLItem><HTMLItem description="Code"> 
            <dataSource> 
                  
            <reportExpression>URLEncode ([Prompt].[Quarter - Category Code])</reportExpression></dataSource> 
        </HTMLItem><HTMLItem description="CheckboxEnd"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>')); 
"&gt; 
</staticValue> 
                                                                                    </dataSource> 
                                                                                </HTMLItem><textItem><dataSource><dataItemValue refDataItem="Quarter"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Quantity"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Quantity"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Revenue"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Revenue"/></dataSource></textItem></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Gross profit"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Gross profit"/></dataSource></textItem></contents></listColumnBody></listColumn></listColumns><propertyList><propertyItem refDataItem="Year - Category Code"/><propertyItem refDataItem="Quarter - Category Code"/></propertyList><listGroups><listGroup refDataItem="Time"/><listGroup refDataItem="Year"/></listGroups></list><HTMLItem description="/div"> 
                                                                <dataSource> 
                                                                    <staticValue>&lt;/div&gt;</staticValue> 
                                                                </dataSource> 
                                                            </HTMLItem><HTMLItem description="doAll"> 
                                                        <dataSource> 
                                                            <staticValue> &lt;input type="button" value="Select All" class="selectbutton" onmouseover = "this.style.cursor='hand'" onclick="checkAll('list2');"&gt; 
&lt;input type="button" value="Clear All" class="selectbutton" onmouseover = "this.style.cursor='hand'" onclick="unCheckAll('list2');"&gt;</staticValue> 
                                                        </dataSource> 
                                                    </HTMLItem><HTMLItem description="div id=&quot;list3&quot;"> 
                                                                <dataSource> 
                                                                    <staticValue>&lt;div id="list3"&gt;</staticValue> 
                                                                </dataSource> 
                                                            </HTMLItem><crosstab name="Crosstab1" pageBreakText="false" refQuery="Prompt" repeatEveryPage="true">
			<crosstabCorner>
				<contents/>
				<style>
					<defaultStyles>
						<defaultStyle refStyle="xm"/>
					</defaultStyles>
				</style>
			</crosstabCorner>
			
			
			
			<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><crosstabColumns><crosstabNode><crosstabNodeMembers><crosstabNodeMember edgeLocation="e5" refDataItem="Product line"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><HTMLItem description="Checkbox Start"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>&lt;input title="Slower but less prone to error" type="checkbox"  
</staticValue></dataSource> 
                                                                                </HTMLItem><HTMLItem description="checked"> 
            <dataSource> 
                  
            <reportExpression>case when (ParamValue('code') +', ') contains ([Product line code] +', ') then (' checked ') else ('') end</reportExpression></dataSource> 
        </HTMLItem><HTMLItem description="onClick"> 
            <dataSource> 
                <staticValue>onClick="selectInCheckbox('checkbox1','</staticValue> 
            </dataSource> 
        </HTMLItem><HTMLItem description="Code"> 
            <dataSource> 
                  
            <dataItemValue refDataItem="Product line code"/></dataSource> 
        </HTMLItem><HTMLItem description="CheckboxEnd"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>'); 
"&gt; 
</staticValue> 
                                                                                    </dataSource> 
                                                                                </HTMLItem><textItem><dataSource><memberCaption/></dataSource></textItem></contents><propertyList><propertyItem refDataItem="Product line code"/></propertyList></crosstabNodeMember></crosstabNodeMembers><crosstabNestedNodes><crosstabNode><crosstabNodeMembers><crosstabNodeMember edgeLocation="e1" refDataItem="Quantity"><contents><textItem><dataSource><memberCaption/></dataSource></textItem></contents><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style></crosstabNodeMember></crosstabNodeMembers></crosstabNode><crosstabNode><crosstabNodeMembers><crosstabNodeMember edgeLocation="e2" refDataItem="Revenue"><contents><textItem><dataSource><memberCaption/></dataSource></textItem></contents><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style></crosstabNodeMember></crosstabNodeMembers></crosstabNode><crosstabNode><crosstabNodeMembers><crosstabNodeMember edgeLocation="e3" refDataItem="Gross profit"><contents><textItem><dataSource><memberCaption/></dataSource></textItem></contents><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabNestedNodes></crosstabNode></crosstabColumns><crosstabRows><crosstabNode><crosstabNodeMembers><crosstabNodeMember edgeLocation="e4" refDataItem="Quarter"><style><defaultStyles><defaultStyle refStyle="ml"/></defaultStyles></style><contents><HTMLItem description="Checkbox Start"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>&lt;input title="Slower but less prone to error" type="checkbox"  
</staticValue></dataSource> 
                                                                                </HTMLItem><HTMLItem description="checked"> 
            <dataSource> 
                  
            <reportExpression>case when (ParamValue('Quarter') +', ') contains ([Quarter - Category Code] +', ') then (' checked ') else ('') end</reportExpression></dataSource> 
        </HTMLItem><HTMLItem description="onClick"> 
            <dataSource> 
                <staticValue>onClick="selectInCheckbox('checkbox2',unescape('</staticValue> 
            </dataSource> 
        </HTMLItem><HTMLItem description="Code"> 
            <dataSource> 
                  
            <reportExpression>URLEncode ([Prompt].[Quarter - Category Code])</reportExpression></dataSource> 
        </HTMLItem><HTMLItem description="CheckboxEnd"> 
                                                                                    <dataSource> 
                                                                                        <staticValue>')); 
"&gt; 
</staticValue> 
                                                                                    </dataSource> 
                                                                                </HTMLItem><textItem><dataSource><memberCaption/></dataSource></textItem></contents><propertyList><propertyItem refDataItem="Quarter - Category Code"/></propertyList></crosstabNodeMember></crosstabNodeMembers></crosstabNode></crosstabRows></crosstab><HTMLItem description="/div"> 
                                                                <dataSource> 
                                                                    <staticValue>&lt;/div&gt;</staticValue> 
                                                                </dataSource> 
                                                            </HTMLItem><HTMLItem description="doAll"> 
                                                        <dataSource> 
                                                            <staticValue> &lt;input type="button" value="Select All" class="selectbutton" onmouseover = "this.style.cursor='hand'" onclick="checkAll('list3');"&gt; 
&lt;input type="button" value="Clear All" class="selectbutton" onmouseover = "this.style.cursor='hand'" onclick="unCheckAll('list3');"&gt;</staticValue> 
                                                        </dataSource> 
                                                    </HTMLItem></contents><style><CSS value="vertical-align:top"/></style></tableCell></tableCells></tableRow></tableRows></table><block> 
                                <contents/> 
                            </block> 
                        <combinationChart maxHotspots="10000" name="Combination Chart1" refQuery="Report" showTooltips="true"> 
                                <legend> 
                                    <legendPosition> 
                                        <relativePosition/> 
                                    </legendPosition> 
                                    <legendTitle refQuery="Report"> 
                                        <style> 
                                            <defaultStyles> 
                                                <defaultStyle refStyle="lx"/> 
                                            </defaultStyles> 
                                        </style> 
                                    </legendTitle> 
                                    <style> 
                                        <defaultStyles> 
                                            <defaultStyle refStyle="lg"/> 
                                        </defaultStyles> 
                                    </style> 
                                </legend> 
                                <ordinalAxis> 
                                    <axisTitle refQuery="Report"> 
                                        <style> 
                                            <defaultStyles> 
                                                <defaultStyle refStyle="at"/> 
                                            </defaultStyles> 
                                        </style> 
                                    </axisTitle> 
                                    <axisLine color="black"/> 
                                    <style> 
                                        <defaultStyles> 
                                            <defaultStyle refStyle="al"/> 
                                        </defaultStyles> 
                                    </style> 
                                </ordinalAxis> 
                                <numericalAxisY1> 
                                    <axisTitle refQuery="Report"> 
                                        <style> 
                                            <defaultStyles> 
                                                <defaultStyle refStyle="at"/> 
                                            </defaultStyles> 
                                        </style> 
                                    </axisTitle> 
                                    <gridlines color="#cccccc"/> 
                                    <axisLine color="black"/> 
                                    <style> 
                                        <defaultStyles> 
                                            <defaultStyle refStyle="al"/> 
                                        </defaultStyles> 
                                    </style> 
                                </numericalAxisY1> 
                                <combinationChartTypes> 
                                    <bar><chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Revenue"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></bar> 
                                </combinationChartTypes> 
                                <style> 
                                    <defaultStyles> 
                                        <defaultStyle refStyle="ch"/> 
                                    </defaultStyles> 
                                </style> 
                                <commonClusters><chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Product type"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></commonClusters><conditionalRender refVariable="renderGraph"><renderFor refVariableValue="1"/></conditionalRender></combinationChart> 
                        </contents> 
                    <style><defaultStyles><defaultStyle refStyle="pb"/></defaultStyles></style></pageBody> 
                <style><defaultStyles><defaultStyle refStyle="pg"/></defaultStyles></style></page> 
            <page name="Page2"> 
                    <pageBody> 
                        <contents><HTMLItem description="Styles"> 
                                <dataSource> 
                                    <staticValue>&lt;style type="text/css"&gt; 
  
input.updatebutton 
{ 
   font-size:11px; 
   font-weight:bold; 
   width:140px; 
   height:27px; 
   color:#000000; 
   background-color:#cdc9c9; 
   border-style:solid; 
   border-color:#003377; 
   border-width:3px; 
} 
  
  
  
input.matchbutton 
{ 
   font-size:11px; 
   font-weight:bold; 
   width:140px; 
   height:27px; 
   color:#EEFFFF; 
   background-color:#0088DD; 
   border-style:solid; 
   border-color:#003377; 
   border-width:3px; 
} 
  
input.selectbutton 
{ 
   font-size:9px; 
   font-weight:bold; 
   width:60px; 
   height:20px; 
   color:#000000; 
   background-color:#FFFFFF; 
   border-style:solid; 
   border-color:#FFFFFF; 
   border-width:3px; 
} 
  
&lt;/style&gt; 
  
&lt;script language="javascript"&gt; 
  
function goLite(FRM,BTN) 
{ 
   window.document.forms[FRM].elements[BTN].style.color = "#FFFF99"; 
   window.document.forms[FRM].elements[BTN].style.backgroundColor = "#11AAEE"; 
} 
  
function goDim(FRM,BTN) 
{ 
   window.document.forms[FRM].elements[BTN].style.color = "#EEFFFF"; 
   window.document.forms[FRM].elements[BTN].style.backgroundColor = "#0088DD"; 
} 
  
&lt;/script&gt; 
</staticValue> 
                                </dataSource> 
                            </HTMLItem> 
                            <HTMLItem description="Scripts"> 
                                <dataSource> 
                                    <staticValue>&lt;script&gt; 
function selectInCheckbox(cbGroup,id) 
{ 
   var inputs= document.getElementById(cbGroup).getElementsByTagName('input'); 
   for (var i=0;i&lt;inputs.length;i++) 
   { 
        if (inputs[i].value == id)  
        { 
            inputs[i].click(); 
        } 
   } 
} 
  
function selectInCheckboxRow(cbGroup,id) 
{ 
    var inputs= document.getElementById(cbGroup).getElementsByTagName('input'); 
    inputs[id].click(); 
} 

function checkAll(list){ 
var inputs=document.getElementById(list).getElementsByTagName('input') 
for (var i=0;i&lt;inputs.length;i++){ 
        if (inputs[i].type == 'checkbox') { 
            if (inputs[i].checked == true)  
        {} 
        else {inputs[i].click();} 
        } 
} 
}  
  
function unCheckAll(list){ 
var inputs=document.getElementById(list).getElementsByTagName('input') 
for (var i=0;i&lt;inputs.length;i++){ 
        if (inputs[i].type == 'checkbox') { 
            if (inputs[i].checked == true)  
        {inputs[i].click();} 
        else {} 
        } 
} 
}  
&lt;/script&gt; 
  
</staticValue> 
                                </dataSource> 
                            </HTMLItem> 
                              
                              
                            <promptButton type="reprompt"> 
            <contents/> 
            <style> 
                <defaultStyles> 
                    <defaultStyle refStyle="bp"/> 
                </defaultStyles> 
            </style> 
        </promptButton><table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse"/></style><tableRows><tableRow><tableCells><tableCell><contents><HTMLItem description="div"> 
            <dataSource> 
                <staticValue>&lt;div id="checkbox1" &gt;</staticValue> 
            </dataSource> 
        </HTMLItem><selectValue multiSelect="true" parameter="code" range="false" refQuery="Prompt" required="false" selectValueUI="checkboxGroup"><useItem refDataItem="Product line code"/><sortList><sortItem refDataItem="Product line code"/></sortList></selectValue><HTMLItem description="/div"> 
            <dataSource> 
                <staticValue>&lt;/div&gt;</staticValue> 
            </dataSource> 
        </HTMLItem><HTMLItem description="div"> 
            <dataSource> 
                <staticValue>&lt;div id="checkbox2" &gt;</staticValue> 
            </dataSource> 
        </HTMLItem><selectValue multiSelect="true" parameter="Year" refQuery="Quarters" required="false" selectValueUI="checkboxGroup"><useItem refDataItem="Quarter - Category Code"><displayItem refDataItem="Quarter"/></useItem></selectValue><HTMLItem description="/div"> 
            <dataSource> 
                <staticValue>&lt;/div&gt;</staticValue> 
            </dataSource> 
        </HTMLItem></contents><style><CSS value="vertical-align:top"/></style></tableCell><tableCell><contents/><style><CSS value="vertical-align:top"/></style></tableCell></tableCells></tableRow></tableRows></table><block> 
                                <contents/> 
                            </block> 
                        <combinationChart maxHotspots="10000" name="Combination Chart2" refQuery="Report" showTooltips="true"> 
                                <legend> 
                                    <legendPosition> 
                                        <relativePosition/> 
                                    </legendPosition> 
                                    <legendTitle refQuery="Report"> 
                                        <style> 
                                            <defaultStyles> 
                                                <defaultStyle refStyle="lx"/> 
                                            </defaultStyles> 
                                        </style> 
                                    </legendTitle> 
                                    <style> 
                                        <defaultStyles> 
                                            <defaultStyle refStyle="lg"/> 
                                        </defaultStyles> 
                                    </style> 
                                </legend> 
                                <ordinalAxis> 
                                    <axisTitle refQuery="Report"> 
                                        <style> 
                                            <defaultStyles> 
                                                <defaultStyle refStyle="at"/> 
                                            </defaultStyles> 
                                        </style> 
                                    </axisTitle> 
                                    <axisLine color="black"/> 
                                    <style> 
                                        <defaultStyles> 
                                            <defaultStyle refStyle="al"/> 
                                        </defaultStyles> 
                                    </style> 
                                </ordinalAxis> 
                                <numericalAxisY1> 
                                    <axisTitle refQuery="Report"> 
                                        <style> 
                                            <defaultStyles> 
                                                <defaultStyle refStyle="at"/> 
                                            </defaultStyles> 
                                        </style> 
                                    </axisTitle> 
                                    <gridlines color="#cccccc"/> 
                                    <axisLine color="black"/> 
                                    <style> 
                                        <defaultStyles> 
                                            <defaultStyle refStyle="al"/> 
                                        </defaultStyles> 
                                    </style> 
                                </numericalAxisY1> 
                                <combinationChartTypes> 
                                    <bar><chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Revenue"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></bar> 
                                </combinationChartTypes> 
                                <style> 
                                    <defaultStyles> 
                                        <defaultStyle refStyle="ch"/> 
                                    </defaultStyles> 
                                </style> 
                                <commonClusters><chartNodes><chartNode><chartNodeMembers><chartNodeMember refDataItem="Product type"><chartContents><chartTextItem><dataSource><memberCaption/></dataSource></chartTextItem></chartContents></chartNodeMember></chartNodeMembers></chartNode></chartNodes></commonClusters><conditionalRender refVariable="renderGraph"><renderFor refVariableValue="1"/></conditionalRender></combinationChart> 
                        </contents> 
                    <style><defaultStyles><defaultStyle refStyle="pb"/></defaultStyles></style></pageBody> 
                <style><defaultStyles><defaultStyle refStyle="pg"/></defaultStyles></style></page></reportPages> 
        </layout> 
    </layouts> 
<queries> 
      
      
      
          
    <query name="Prompt"> 
            <source> 
                <model/> 
            </source> 
            <selection><dataItem aggregate="none" name="Product line code" rollupAggregate="none"><expression>[sales_and_marketing].[Products].[Products].[Product line].[Product line - Category Code]</expression></dataItem><dataItem aggregate="none" name="Product line" rollupAggregate="none"><expression>[sales_and_marketing].[Products].[Products].[Product line]</expression></dataItem><dataItem aggregate="total" name="Quantity"><expression>[sales_and_marketing].[Measures].[Quantity]</expression></dataItem><dataItem aggregate="total" name="Revenue"><expression>[sales_and_marketing].[Measures].[Revenue]</expression></dataItem><dataItem aggregate="total" name="Gross profit"><expression>[sales_and_marketing].[Measures].[Gross profit]</expression></dataItem><dataItem aggregate="none" name="Year - Category Code"><expression>[sales_and_marketing].[Time].[Time].[Year].[Year - Category Code]</expression></dataItem><dataItem aggregate="none" name="Year" rollupAggregate="none" sort="ascending"><expression>[sales_and_marketing].[Time].[Time].[Year]</expression></dataItem><dataItem aggregate="none" name="Quarter" rollupAggregate="none"><expression>[sales_and_marketing].[Time].[Time].[Quarter]</expression></dataItem><dataItem aggregate="none" name="Quarter - Category Code" rollupAggregate="none"><expression>[sales_and_marketing].[Time].[Time].[Quarter].[Quarter - Category Code]</expression></dataItem><dataItem name="Time" aggregate="none" rollupAggregate="none"><expression>[sales_and_marketing].[Time].[Time].[Time]-&gt;:[PC].[@MEMBER].[Time]</expression></dataItem></selection> 
        </query><query name="Report"><source><model/></source><selection><dataItem aggregate="total" name="Revenue"><expression>[sales_and_marketing].[Measures].[Revenue]</expression></dataItem><dataItem aggregate="none" name="Product type" rollupAggregate="none"><expression>[sales_and_marketing].[Products].[Products].[Product type]</expression></dataItem></selection><detailFilters><detailFilter><filterExpression>[sales_and_marketing].[Products].[Products].[Product line].[Product line - Category Code] in (?code?)</filterExpression></detailFilter><detailFilter use="optional"><filterExpression>[sales_and_marketing].[Time].[Time].[Quarter].[Quarter - Category Code] in (?Quarter?)</filterExpression></detailFilter></detailFilters></query><query name="Quarters"><source><model/></source><selection><dataItem aggregate="none" name="Quarter - Category Code"><expression>[sales_and_marketing].[Time].[Time].[Quarter].[Quarter - Category Code]</expression></dataItem><dataItem aggregate="none" name="Quarter" sort="ascending"><expression>[sales_and_marketing].[Time].[Time].[Quarter]</expression></dataItem></selection></query></queries><XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" output="no" value="false"/><XMLAttribute name="listSeparator" output="no" value=","/><XMLAttribute name="RS_modelModificationTime" output="no" value="2008-07-25T15:28:38.133Z"/></XMLAttributes><reportVariables><reportVariable name="renderGraph" type="boolean"> 
            <reportExpression>ParamValue('code') is not null</reportExpression> 
            <variableValues> 
                <variableValue value="1"/> 
            </variableValues> 
        </reportVariable></reportVariables><reportName>checkbox 2</reportName></report>

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>

Playing with MotioCI

A few posts back I gave a sneak peek of a new tool Motio was working on. Recently I was fortunate enough to get into the beta.

The installation, for the most part, is fairly straight forward. You download, decompress, modify a few config files to declare which version of Cognos you’re running, location of your JDK. The only major stumbling block I had was Motio requires some sort of authentication against Cognos. Since I was running Cognos anonymously on my laptop, it simply wouldn’t connect. To get around this, I set up OpenDJ and was able to progress.

Once MotioCI is installed and set up, it will create an instance. Each instance is a connection to a specific Cognos server. You can have as many instances as you have Cognos gateways. You can communicate between instances. So, for example, you can a report in Instance 1 to get specific results, and compare them to results in Instance 2. This is all part of the assertions, which I will get into later.

After you create an instance, you will be prompted to create a new project. Create the new project with a descriptive name and continue. The wizard will walk you through selecting which folders you want to test against which assertions. It comes with a suite of default assertions created by Motio and the Best Practices team. Once selected, it will generate test cases and run them.

Generate Test Cases

After the test cases run, you can see which reports have failures or warnings. You can see the results of the test cases, and the outputs of the reports themselves (if the test cases required the reports to run).
failing on assertions
The most interesting part of this tool is the Assertion Studio. This is where you can define the assertions.

Assertions allow you to test almost every aspect of any Cognos object. Do you have a corporate look and feel that every report must follow? Set up a template report and compare each and every report against that. Do you want to find every report that has a run time of more than 5 minutes? Do you want to automatically compare the output of a series of reports against specific SQL queries? Are you upgrading from 8.2 and need to find all instances of the old JS API? Do you want to test your dispatchers for certain settings and response times? The possibilities are endless.

When you design your own assertions you can specify whether the report needs to be executed or not. Executing the report allows you to check things like run time, or results match. Does the third row in the list match the first row of another report? Not executing allows you to use combinations of xpath and regex to parse the report (or model) xml. You might use that to find all reports that contain “formwarprequest” in HTML items.

There is a bit of a learning curve when it comes to MotioCI. It is definitely not something you’d give end users. It does seem to be an invaluable tool for administrators.

You can read more about it at the Motio Website.

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>

Recent Java exploits and Cognos

Several new Java exploits have recently been uncovered. So far the all of the exploits that IBM has tested against their JDK and JREs have been unsuccessful. As my source in the upper echelons of IBM has said, “Thus, IBM products shipping the IBM JDK are not vulnerable to this exploit.”

Products that ship the Oracle JRE may be vulnerable to the exploits, and care should be taken until all of the fixes are released. Remember, nothing is sure until the fix is in.

Please read: Java Vulnerability Blog, from Tivoli AVP

In general it would be best to stay subscribed to the IBM Product Security Incident Response Blog to make sure you have the latest information on any security concerns with IBM products.