Our Blog

Searching through a checkbox in Cognos 10.2

Last month I published a blog post on How to Make Cycle Plots in Cognos 10. This post, I would like to show you searching through a checkbox in Cognos 10.2.

There are times when end users make difficult demands. Case in point, a client needs a prompt based on a field containing nearly a thousand values. He doesn’t want a select and search, as that would require a page refresh. A checkbox prompt meets his needs almost perfectly, except for the delicate scrolling to find specific values. So I was asked to find a way to search through it.

A checkbox prompt in Cognos is a series of nested divs. The label and input are both held inside the same div.

1. checkbox Structure

This makes hiding an option simple. First test the inner text of the label, then hide the parent node. Getting to that is requires a fair amount of JavaScript.

First, the code!

<br /><br />function checkSearch(name){<br /><br />var<br /><br />elmOptions = document.getElementById(name).firstChild.lastChild.firstChild.firstChild.lastChild.firstChild.firstChild<br /><br />, elmSelectLinks = elmOptions.parentNode.nextSibling<br /><br />, textBox = document.createElement('input')<br /><br />, clear = document.createElement('input')<br /><br />, myLinks = elmSelectLinks.cloneNode()<br /><br />, mySel = document.createTextNode('Select all matching')<br /><br />, mySpacer = document.createTextNode(' ')<br /><br />, myDeSel = document.createTextNode('Deselect all matching')<br /><br />, mySelSpan = document.createElement('span')<br /><br />, myDeSelSpan = document.createElement('span')<br /><br />, underlineMe = function(){this.style.textDecoration='underline'}<br /><br />, deUnderlineMe = function(){this.style.textDecoration='none'}<br /><br />, checkAllVisible = function () {<br /><br />var labels = elmOptions.getElementsByTagName('label').length;<br /><br />for(var i = 0;i<labels;++i){<br /><br />if(!elmOptions.getElementsByTagName('label')[i].parentNode.style.display&&!elmOptions.getElementsByTagName('label')[i].parentNode.firstChild.firstChild.checked) elmOptions.getElementsByTagName('label')[i].parentNode.firstChild.firstChild.click()<br /><br />}<br /><br />}<br /><br />, uncheckAllVisible = function () {<br /><br />var labels = elmOptions.getElementsByTagName('label').length;<br /><br />for(var i = 0;i<labels;++i){<br /><br />if(!elmOptions.getElementsByTagName('label')[i].parentNode.style.display&&elmOptions.getElementsByTagName('label')[i].parentNode.firstChild.firstChild.checked) elmOptions.getElementsByTagName('label')[i].parentNode.firstChild.firstChild.click()<br /><br />}<br /><br />}<br /><br />, searchTimer = (function (){<br /><br />var timer;<br /><br />return function(v){<br /><br />clearTimeout(timer);<br /><br />timer = window.setTimeout(<br /><br />function(){<br /><br />var labels = elmOptions.getElementsByTagName('label').length<br /><br />, regexp=new RegExp(v,'i');<br /><br />if(!v) {clearAll();return false};<br /><br />elmSelectLinks.style.display='none';<br /><br />myLinks.style.display='';<br /><br />for(var i = 0;i<labels;++i){<br /><br />if(!regexp.test(elmOptions.getElementsByTagName('label')[i].innerText))  {elmOptions.getElementsByTagName('label')[i].parentNode.style.display='none'} else {elmOptions.getElementsByTagName('label')[i].parentNode.style.display=''}<br /><br />}<br /><br />}<br /><br />,300);<br /><br />return true<br /><br />};<br /><br />})()<br /><br />;<br /><br /> <br /><br />if(elmSelectLinks.style.display!='none'&&(elmSelectLinks.firstChild.innerText.length>0||elmSelectLinks.lastChild.innerText.length>0)){<br /><br />var clearAll = function() {textBox.value='';<br /><br />var labels = elmOptions.getElementsByTagName('label').length;<br /><br />myLinks.style.display='none';<br /><br />elmSelectLinks.style.display='';<br /><br />for(var i = 0;i<labels;++i){<br /><br />elmOptions.getElementsByTagName('label')[i].parentNode.style.display='';<br /><br />}<br /><br />}<br /><br />mySelSpan.className='clsLink pl';<br /><br />myDeSelSpan.className='clsLink pl';<br /><br />mySelSpan.style.cursor='pointer';<br /><br />myDeSelSpan.style.cursor='pointer';<br /><br />mySelSpan.onmouseover=underlineMe;<br /><br />myDeSelSpan.onmouseover=underlineMe;<br /><br />mySelSpan.onmouseout=deUnderlineMe;<br /><br />myDeSelSpan.onmouseout=deUnderlineMe;<br /><br />mySelSpan.onclick=checkAllVisible;<br /><br />myDeSelSpan.onclick=uncheckAllVisible;<br /><br />mySelSpan.appendChild(mySel);<br /><br />myDeSelSpan.appendChild(myDeSel);<br /><br /> <br /><br />myLinks.style.display='none';<br /><br />myLinks.appendChild(mySelSpan);<br /><br />myLinks.appendChild(mySpacer);<br /><br />myLinks.appendChild(myDeSelSpan);<br /><br />elmSelectLinks.parentNode.insertBefore(myLinks,elmSelectLinks);}<br /><br />else {<br /><br />var clearAll = function() {textBox.value='';<br /><br />var labels = elmOptions.getElementsByTagName('label').length;<br /><br />for(var i = 0;i<labels;++i){<br /><br />elmOptions.getElementsByTagName('label')[i].parentNode.style.display='';<br /><br />}<br /><br />}<br /><br />}<br /><br /> <br /><br /> <br /><br />textBox.type='text';<br /><br />textBox.onkeyup= function(){searchTimer(this.value)};<br /><br /> <br /><br />clear.value='X';<br /><br />clear.type='button';<br /><br />clear.onclick=clearAll;<br /><br /> <br /><br />elmOptions.parentNode.insertBefore(textBox,elmOptions);<br /><br />elmOptions.parentNode.insertBefore(clear,elmOptions);<br /><br /> <br /><br />}<br /><br />

The client I’m working with is using Cognos 10.1, so I wasn’t able to use the Prompt API. If I was, finding the elmOptions would be far simpler:

elmOptions = document.getElementById(' PRMT_SV_'+paulScripts.getControl(name)._id_)

As it stands, the way I’m doing it here is to wrap the prompt with HTML Items: <div id=”PromptName”> and </div>

The JavaScript will find the container holding the list of options, and insert a text input before it. That input will have a timer on keyup. Every time a user enters a key, it will reset the timer. After 300 ms of no activity, it will kick off the search.

 searchTimer = (function (){&lt;br /&gt;&lt;br /&gt;var timer;&lt;br /&gt;&lt;br /&gt;return function(v){&lt;br /&gt;&lt;br /&gt;clearTimeout(timer);&lt;br /&gt;&lt;br /&gt;timer = window.setTimeout(&lt;br /&gt;&lt;br /&gt;function(){&lt;br /&gt;&lt;br /&gt;var labels = elmOptions.getElementsByTagName('label').length&lt;br /&gt;&lt;br /&gt;, regexp=new RegExp(v,'i');&lt;br /&gt;&lt;br /&gt;if(!v) {clearAll();return false};&lt;br /&gt;&lt;br /&gt;elmSelectLinks.style.display='none';&lt;br /&gt;&lt;br /&gt;myLinks.style.display='';&lt;br /&gt;&lt;br /&gt;for(var i = 0;i&amp;lt;labels;++i){&lt;br /&gt;&lt;br /&gt;if(!regexp.test(elmOptions.getElementsByTagName('label')[i].innerText))  {elmOptions.getElementsByTagName('label')[i].parentNode.style.display='none'} else {elmOptions.getElementsByTagName('label')[i].parentNode.style.display=''}&lt;br /&gt;&lt;br /&gt;}&lt;br /&gt;&lt;br /&gt;}&lt;br /&gt;&lt;br /&gt;,300);&lt;br /&gt;&lt;br /&gt;return true&lt;br /&gt;&lt;br /&gt;};&lt;br /&gt;&lt;br /&gt;})()&lt;br /&gt;&lt;br /&gt;

The search loops through all of the labels, testing each one with the regex search from the input. For each label, it will hide or show the parent div depending on if it passes the regex test. There is one small bug here that I’m leaving unfixed. Since this is doing a regex search, it will use regex special characters. Doing a search for [a will result in an error, as that is an incomplete regex. The solution would be to either fail gracefully or to force it to search it the value as a string.

Once the search is complete, the select and deselect links will be hidden. Instead, “De/Select all matching” links are created. Clicking on that will select (or deselect) all of the currently visible options in the prompt.  If, for whatever reason, you’ve chosen to hide the Select links, these also won’t appear.

Kicking off the JavaScript is a simple matter of using:

checkSearch(‘Products’);

And viola:

2. searching for setless trail

The report was built on Cognos 10.2.1, but the XML was downgraded so it should be possible to open it with previous versions. Have any questions about this? Email us at info@performanceg2.com or fill out the comment box below.

Check Search.xml

This entry was posted in Technical Concepts and Ideas, Tips and tricks and tagged , , , , . Bookmark the permalink.

Comments are closed.

PerformanceG2 Menu