Sunday, January 1, 2012

Validate Value Prompt using Javascript

Validate Value Prompt using Javascript Business Case:
Value prompts are widely used in Report Studio Reports. Users want to validate the prompt values by limiting the number of values selected at  a time.

Environment: IBM Cognos 8.4.1, Internet Explorer/Mozilla Firefox, Javascript.

Example:
Users should be able to select only up to a maximum of 3 values. When the fourth value is selected, an alert message should be displayed. 

Solution:
This requirement can be achieved by using javascript. When the user selects an option, the script will count the number of options selected and display an alert text when the number of selected values exceeds the user defined limit.

The prompt will look like this when user selects 3 values:
When the user selects a fourth option, the "Finish" button will disappear and an alert message will be displayed, like this:
When one of the options is unselected, the "Finish" button will reappear and the alert message will be hidden.

Implementation:
  • Create the prompt page and place an alert text as above.
  • Place three HTML items: first before the alert text, second after the alert text and the third at the end of the page after all elements, as shown below:

  •  Place the following code in the first HTML item:
<span id ="alert_msg">
  •  Place the following code in the second HTML item:
</span>
  •  Place the following code in the third HTML item:
<script>
//Create a handle for the alert message
var alert_msg = document.getElementById("alert_msg");

//Create a handle for Finish button by getting a list of elements on the page with "button" tag
var buttons = document.getElementsByTagName("button");

//Get a list of elements on the page with "select" tag
var value_prompt = document.getElementsByTagName("select");
value_prompt[0].onchange = validateSelection;

//Hide alert message when page loads
alert_msg.style.display='none';

function validateSelection()
{
   var selectionCount = 0;
   for (i = 0; i < value_prompt[0].options.length; i++)
   {
      if (value_prompt[0].options[i].selected)
      {
        selectionCount = selectionCount + 1;
      }
   }
  
   if(selectionCount > 3)
   {
     buttons[1].style.display='none';
     alert_msg.style.display='';
   }
   else
   {
     buttons[1].style.display='';
     alert_msg.style.display='none';
   }
}
</script>
That should do the trick.  Now when the user runs the report, they should see an alert when selecting more than 3 options.

Test it out and post your comments. You can also contact me through email at cognosonsteroids@hotmail.com

2 comments:

  1. Is it possible if you can attach an XML as well?
    Thanks

    ReplyDelete
  2. Hi,

    can you please explain clearly. this code is not working in 8.2.

    what is the prompt name and alert text name we need to change in our report for this code.

    can any one explain.

    ReplyDelete