One of my readers sent me an interesting problem. They need a checkbox prompt in which the top option is “All” and checking on any other option would automatically uncheck the “All” choice. Similarly, checking “All” should uncheck the other choices. Taking it to the conclusion, when checking or unchecking all of the options, the “All” should be checked.
Since they are still on 10.1, I have not used the Prompt API, meaning this should work on all versions since 8.4. To begin, the prompt itself.
In this case, the prompt is based on the Retailers hierarchy in the Sales and Marketing cube. Other times you might want to add a static value.
The JavaScript itself is not that difficult. The JS will loop through the prompt each time an option is clicked. If the first option is clicked, it will check it and uncheck the other options. If any other option is click it will loop through the prompt, counting the number of checked options and act accordingly. If 0 or all of the options are checked, it will check the first option, otherwise it will simply uncheck it.
When working with Checkbox prompts in JavaScript, the thing to remember is that, for whatever reason, the checkboxes that we see are actually images. To show the prompt as checked, the input needs to have the class “dijitCheckBoxChecked”.
Now the JS:
<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;
};
}
addEvent(element, event, func);
}
// Cognos form and namespace identifier. Don't touch.
var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);
if ( !fW || fW == undefined) {
fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );
}
var preFix = "";
if (fW.elements["cv.id"]) { preFix = fW.elements["cv.id"].value; }
var nameSpace = "oCV" + preFix;
function attacher(elm,prompt,clicked){
var func = function() {
//if all is selected, zero out everything else.
if(clicked==0) {prompt[0].selected=true;prompt[0].checked=true;prompt[0].parentNode.className="dijitInline dijitCheckBox dijitCheckBoxChecked";for(var i=1;i<prompt.length;++i){prompt[i].selected=false;prompt[i].checked=false;prompt[i].parentNode.className="dijitInline dijitCheckBox"}}
//if individual, count number of selected
if(clicked>0) {var c=0;
for(var i=1;i<prompt.length;++i){
if(prompt[i].checked){++c}
}
//if the count of checked is 0, then set the all to checked
if(c==0) {setter=false;prompt[0].selected=true;prompt[0].checked=true;prompt[0].parentNode.className="dijitInline dijitCheckBox dijitCheckBoxChecked"}
//if the count of checked is equal to the length of the prompt, then set the all to checked and uncheck everything else
else if(c==prompt.length-1) {setter=false;prompt[0].selected=true;prompt[0].checked=true;prompt[0].parentNode.className="dijitInline dijitCheckBox dijitCheckBoxChecked"; for(var i=1;i<prompt.length;++i){prompt[i].selected=false;prompt[i].checked=false;prompt[i].parentNode.className="dijitInline dijitCheckBox"}}
//if the count is one and less than the length of the prompt then just set all to unchecked;
else if(c>0&&c<prompt.length-1){prompt[0].checked=false;prompt[0].selected=false;prompt[0].parentNode.className="dijitInline dijitCheckBox"}
}
canSubmitPrompt();
}
addEvent(elm,'click',func)
}
var prompt=fW._oLstChoicesCountries;
for (var i=0;i<prompt.length;++i){
attacher(prompt[i],prompt,i);
}
</script>
EDIT: An eagle-eyed reader noticed that the appearance of the checks are actually slightly different than they are when first rendered. The solution was to put a parentNode after prompt[i] when calling the className. Thanks Sue!
Checkbox Prompt - All option (1849 downloads)
Paul, you are a king.
Very actually now for me. Thanks.
Hi CognosPaul,
Thanks for your speedy response. This is exactly what I want to achieve. However, I am very new to JavaScript. I am assuming the script should be placed in an HTML item located in the Report Footer and the prompt name is reference in the script (in your example the name is “Countries”.
Thank you,
Sonny
The script can be placed anywhere after the prompt – so the footer should work well. You are correct about the prompt name. You’ll be able to reuse this function multiple times by calling it with the different prompt names.
shouldnt i get an ALL option at the top of the checkbox
I have it. you need to add a Static Choice
Hello,
I need to write something that selects all of the values in a checkbox prompt by default and works in both Internet Explorer and Firefox. I know of an old way to do this, http://www-01.ibm.com/support/docview.wss?uid=swg21339608, but it doesn’t seem to work properly in Firefox for my version 10.2.1.
A coworker reminded me that I need to use the new API but I need a little help.
If you have any input it would be warmly welcomed,
Potter
Hi Potter!
The setValues(JSON) function will set the values of the specified prompt with a properly formatted JSON array. the getValues() retrieves the selected values of a specified prompt, with the correct JSON format. getValues() also supports a flag that will have it retrieve all values, not just the selected.
Using my standard library, this is how I’d do it:
<script> var paulScripts ={} , oCR = cognos.Report.getReport("_THIS_"); paulScripts.getControl = function(promptName) { return oCR.prompt.getControlByName(promptName); }; paulScripts.getControl('Region').setValues(paulScripts.getControl('Region').getValues(true)); </script>Hello Paul,
I am trying to make this Java Script work in Cognos 10.2. However i am getting an error Expected ‘;’ . Please advise.
I placed the Javascript right next to my check box prompt which has a Static Choice of ALL and named the check box prompt as Countries. However it is erroring out and the above functionality is not working. Please let me know the next steps at your earliest convenience.
Hi Connor,
That’s a syntax error. Open IE Developer, click on the script tab, and refresh the report. You should be able to click on the error and it will go directly to the problematic line. My guess is there is an errant single quote somewhere.
Thanks a lot Paul. I got it. It works now.
Greetings Paul,
I showed “Checking and Unchecking All Options” in a checkbox prompt to my Business Users and they were very pleased with it. They asked me if i could make the add a Select all hyperlink and a Deselect all hyperlink at the bottom of my check box prompt and by clicking on the Select all hyperlink should check all the check boxes except the static choice ‘ALL’ check box and similarly by selecting Deselect all hyperlink everything else should get unchecked except the ‘ALL’ static choice button. In other words Deselect all should select only one check box i.e. ‘ALL’. They said this way if they want to uncheck the last two or three checkboxes they can simply do a Select all and then uncheck the last 3 items manually, instead of selecting everything from the top except the last 3.
I agreed to this and added two additional html items along with yours inorder to achieve the Select all and Deselect all hyperlink. The code is mentioned below.
1. For Select all hyperlink
function Checkall()
{
var fW = (typeof getFormWarpRequest == “function” ? getFormWarpRequest() : document.forms[“formWarpRequest”]);
prompt[0].checked=false;prompt[0].className=”dijitInline dijitCheckBox”
for(var i=1;i<prompt.length;++i){prompt[i].selected=true;prompt[i].checked=true;prompt[i].className="dijitInline dijitCheckBox"}
canSubmitPrompt();
}
Seelect all
2. For Deselect all hyperlink.
function Uncheckall()
{
var fW = (typeof getFormWarpRequest == “function” ? getFormWarpRequest() : document.forms[“formWarpRequest”]);
for(var i=0;i<prompt.length;++i){prompt[i].selected=false;prompt[i].checked=false;prompt[i].className="dijitInline dijitCheckBox"}
prompt[0].checked=true;prompt[0].className="dijitInline dijitCheckBox"
}
Deeselect all
This code works perfectly fine when there is only one check box prompt in the report. However if there are multiple check box prompts the Select all and Deselect all functionality works only on the last prompt but not on the other prompts.
I guess this is because i am not able associate it with the specific prompt. I tried to capture that Select all and Deselect all click events and associate it with their respective prompts but it’s erroring out. Can you please help me make this script work for multiple prompts on the same report. It shall be greatly appreciated.
Thanks in advance.
Connor.
There was a typo in my previous comment “make the”. Please ignore it.
“I showed “Checking and Unchecking All Options” in a checkbox prompt to my Business Users and they were very pleased with it.They asked me if i could add a Select all hyperlink and a Deselect all hyperlink at the bottom of my check box prompt and by clicking on the Select all hyperlink should check all the check boxes except the static choice ‘ALL’ check box and similarly by selecting Deselect all hyperlink everything else should get unchecked except the ‘ALL’ static choice button.”
Paul,
I associated the prompt name in the function itself and it works. Thanks again for all your help.
function PmpRegionsCheckall()
{
var fW = (typeof getFormWarpRequest == “function” ? getFormWarpRequest() : document.forms[“formWarpRequest”]);
var prompt=fW._oLstChoicesPmpRegions;
prompt[0].checked=false;prompt[0].className=”dijitInline dijitCheckBox”;
for(var i=1;i<prompt.length;++i){prompt[i].selected=true;prompt[i].checked=true;prompt[i].className="dijitInline dijitCheckBox"}
canSubmitPrompt();
}
Select all
Regards
KARNA
Logic for Select all and Deselect all hyperlink.
1. Select all: On click of the Select all hyperlink everything will get selected except the All Static choice.
function PmpRegionsCheckall()
{
var fW = (typeof getFormWarpRequest == “function” ? getFormWarpRequest() : document.forms[“formWarpRequest”]);
var prompt=fW._oLstChoicesPmpRegions;
prompt[0].checked=false;prompt[0].className=”dijitInline dijitCheckBox”;
for(var i=1;i<prompt.length;++i){prompt[i].selected=true;prompt[i].checked=true;prompt[i].className="dijitInline dijitCheckBox"}
canSubmitPrompt();
}
Select all
Similarly for
2. Deselect all: Clicking on the Deselect all hyperlink will uncheck all the options except the Static Choice ALL option.
function PmpRegionsUncheckall()
{
var fW = (typeof getFormWarpRequest == “function” ? getFormWarpRequest() : document.forms[“formWarpRequest”]);
var prompt=fW._oLstChoicesPmpRegions;
for(var i=0;i<prompt.length;++i){prompt[i].selected=false;prompt[i].checked=false;prompt[i].className="dijitInline dijitCheckBox"}
prompt[0].checked=true;prompt[0].className="dijitInline dijitCheckBox";
}
Deselect all
Thanks
Connor
CognosPaul
Once again you supply a very elegant solution to a problem I am having. Thank you very much!
On a slightly anal side, I noticed that the checkbox icons/images actually look slightly different after checking/unchecking than they did when the page first rendered. So I looked at the report source a bit more and saw that it is actually the class of the parent that we want to change, rather than the element directly. So I changed your code slightly to add .parentNode when setting the class so
prompt[0].className=”dijitInline dijitCheckBox dijitCheckBoxChecked”
becomes
prompt[0].parentNode.className=”dijitInline dijitCheckBox dijitCheckBoxChecked”
etc.
Minor detail I know and it doesn’t change anything other than the images keep looking as they did when the page first loads. No criticism intended just FYI and thank you for all your tidbits!
Thanks Sue! It’s actually great that you found that. I’ve fixed the post and gave you credit.
Cheers,
Paul
Hi CognosPaul,
Thanks for this script. I tried to incorporate this on my prompt but I got an error dialog box saying ‘One or more of the required values is missing. Required values are needed to produce the report.’. Kindly help me fix this error.
Thanks!
It sounds like you have some required prompts and something set to autosubmit. There was a bug in an earlier version that created that popup, you might want to check that you have all of the fix packs installed.