Saturday, May 9, 2015

IBM Cognos and JavaScript to Show/Hide objects on the basis of drop down value.

This is the simple technique to access the value of the drop down and on the basis of that Show/Hide element in the Cognos Report

Steps:

Step 1.
In order to use JavaScript to modify or manipulate an element on a web page, you first need to reach or find the element you want to edit.

var fW = (typeof getFormWarpRequest == "function"         
                                        ?getFormWarpRequest():
                     document.forms["formWarpRequest"]);
            if ( !fW || fW == undefined) { fW = ( 
                formWarpRequest_THIS_ ?formWarpRequest_THIS_ : 

                    formWarpRequest_NS_ );}

Step 2.
Next step is to access the prompt ,on the basis of which we need to Show/Hide objects
On the properties panel under Miscellaneous->Name, give this prompt object a name such as  "Selection"


Add the static choices to this prompt .For my example i am taking two static choices
'BU'  and 'CL'


Step 3
Now, add two html item to the elements which you need to Show/Hide on the basis of "Selection" drop down.



Now edit the HTML item and assign the span id to each element like below 
<span id = "BU"></span id>
<span id = "Client"></span id>

Step 4 

Now add another HTML item and add the below code :


<script type="text/javascript">

var fW = (typeof getFormWarpRequest == "function"      
                                        ?getFormWarpRequest():
                     document.forms["formWarpRequest"]);
            if ( !fW || fW == undefined) { fW = (
                formWarpRequest_THIS_ ?formWarpRequest_THIS_ :
                    formWarpRequest_NS_ );}

var dropdown=fW._oLstChoicesSelection; -------this is my drop down-----
dropdown.remove(1); ----this is to remove first two values---
dropdown.remove(0);  ----this is to remove first two values---
dropdown.removeAttribute("hasLabel");  ----this is to remove first two values---
dropdown.options[0].selected = true;
var cl=dropdown.options.selectedIndex; -------this id to access the selected value of drop down-----

if (dropdown.options[cl].value=='BU')
{

document.getElementById('Client').style.display='none' -----this is to hide the Client when BU is selected---
document.getElementById('BU').style.display='block';

}

else
{
document.getElementById('Client').style.display='block'  ---this is to hide the BU when Client is selected--
document.getElementById('BU').style.display='none';

}

</script>