Tuesday, January 3, 2012

Show or Hide any Element in the Report using Javascript

Business Case:
Users want to have a list or a chart hidden in the page, which can be optionally shown/hidden.

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

Example:
I built a dashboard for a client who wanted summary level information displayed in the page with the detailed data below it, but wanted the users to be able to see detailed data only when needed.

Implementation:
This is a very simple task that requires only a few steps. You will need 4 HTML items for this:
  • The first HTML item is to create a link on the page that says "Click Here to Show/Hide Item". Place this HTML item wherever you want the link
  • Pick the element you want to show/hide and place 2 HTML items around it, one before and one after. In this example, the element I chose to hide is a value prompt.
  • Place a fourth HTML item at the end of the page after all the elements. This will contain the main script.
  • Your report layout should look like this:
  • Insert this code within the first HTML item:
    <a href="JavaScript:ShowHide()">Click here to Show/Hide Item</a>
  • The second HTML item will have the following code:
  • <span id = "value_prompt">
  • Place the following code in the third HTML item:
  • </span>
  • The <span> tag is used to create a handle for the value prompt and assign an ID to it called "value_prompt". The main script will use this handle to change the display status of the item.
  • The last HTML item will have the main script as below:
  • <script language="javascript">
    function ShowHide(){
    var el = document.getElementById("value_prompt");
    if ( el.style.display != 'none' ) {
    el.style.display = 'none';
    }
    else {
    el.style.display = '';
                         }
    }

    function startHidden(){
    var el = document.getElementById("details");
    el.style.display = 'none';
    }
    </script>
  • Note that in the code we are using the ID of the span to call the item.
  • That's it.. now when you run the report, the output will look like this:
  • Clicking the link will hide the value prompt. Clicking it again will show the prompt.
  • To hide the elements when loading the page, add the following line after the startHidden() function:
window.onload=startHiden();
You can use this technique for toggling any element in your report. You can even use it to toggle multiple elements or an entire table. Give it a try and post your comments below. As always, I will be happy to help with any issues you have.

33 comments:

  1. Great Work!!!
    What would you do if there is more than one prompt?
    Thanks

    ReplyDelete
  2. You can put a span tag around each prompt with a different "id" and control them individually.

    ReplyDelete
  3. Hi,
    I am working in Cognos 10.1.1 The above code is not working in that. Could you please provide the javascript for c10.1.1?

    Thanks in advance,
    J

    ReplyDelete
  4. Hi J,

    This script is not dependent on any of Cognos's built in object names. So it shouldn't matter what version of Cognos you are using. Are you getting any javascript errors? Try running the report in Firefox and check the "Error Console". This should show you the errors.

    Sriram.

    ReplyDelete
  5. Is there something in this script that will default to hidden? I want something to be hidden and on-click unhidden..

    Thanks
    Dan

    ReplyDelete
  6. Dan,
    You can add an onload block and call the hide function to start hidden.

    Sriram.

    ReplyDelete
    Replies
    1. How do i go about doing this? Example would be great.

      Delete
    2. Hi,

      I will post the code for onload() block shortly.

      Thanks,
      Sriram.

      Delete
    3. Hi Sriram,

      I am looking for a very similar functionality. Can you please post the onload() block, to hide the object one the page load.

      Thanks a lot for the details you have provided.
      Venu

      Delete
    4. Hi, please share the onload addition here, Thank you

      Delete
    5. I have added the onload piece to the post.
      Thanks,
      Sriram.

      Delete
    6. Thanks for the prompt reply; I added below, it did not hide list on default..

      function startHidden(){
      var el = document.getElementById("details");
      el.style.display = 'none';

      }
      window.onload=startHidden();

      Delete
    7. Did anyone else get this to work? No matter what I did, or where I put window.onload=startHidden() the item still showed. Anyone have a solution, very handy if I could get it to start with the object hidden.

      Delete
    8. You just need to replace "details" with "value_prompt" within the function and it works just fine.

      Thanks Sriram!

      Delete
    9. Hi,

      This seems to work fine in report studio/viewer; but when I call it from the multi-page dashboard utility -> the code does not work. Is there a conflict here?

      Delete
    10. I did below but still not working, still could not set Hidden as defult, any help?
      function startHidden(){
      var el = document.getElementById("value_prompt");
      el.style.display = 'none';

      }
      window.onload=startHidden();

      Delete
    11. I found the reason guys! So use window.onload=startHidden instead, remove "()" and it will work.

      Delete
  7. Sriram,
    Thank you!... This is great!

    Dan

    ReplyDelete
  8. Hi Sriram,

    Thanks for the post.. it was a great help..
    one thing more.. can you give example how to create popup windows for prompts?

    ReplyDelete
    Replies
    1. thx this great work..

      Delete
  9. If I want to have same functionality for Cognos list report, to show the nested list based on list value . how could i do that??? please suggest me

    ReplyDelete
    Replies
    1. You should create a master detail relationship and place the "span" tag around the detail list.

      Delete
    2. Sriram, I tried that but it works only for the first line of the master list : the link show/hide appears on every line of the master list, but when clicking the link of any line, it always shows/hides the detail list of the first line.
      Thanks in advance !

      Delete
  10. Hi Sriram
    I am trying to toggle multiple crosstabs with the above method by using different span id but always its working for the first one.Any suggestions.

    ReplyDelete
  11. The field validation on this page is not allowing me to paste it,but I have followed the same as u suggested by taking four HTML items and pasted the same code in there and placed as suggest.This if I create with another span id eg value_prompt1 and place the HTML items as done for the first element but predominant the functionality works only for the first element to be shown/hidden.

    ReplyDelete
  12. Hi pls find the code I m using to show/hide all the 3 crosstabs in my report but as said while I add the most latest one only that seems to be working any help will be much appreciated.


    ReplyDelete
  13. Thanks for the post. Just to say there is a typo in your added window.onload=startHiden(); line. Hidden as 2 d's - window.onload=startHidden();

    :)

    ReplyDelete
  14. Hi, I can't get the window.onload=startHidden(); working :/ this is the end of last HTML:

    function startHidden(){
    var el = document.getElementById("details");
    el.style.display = 'none';
    }
    window.onload=startHidden();
    </scr...

    it doesn't start as hidden...what am I doing wrong?

    Thanks :)

    ReplyDelete
  15. Hi Sriranm, I am using Cognos 10.2.1 , No Matter what i try , I am unable to Hide the Default Action to Hide the List by using all the Expressions below:
    window.onload=startHidden();
    window.onload=startHidden
    window.onload=startHiden();
    window.onload=startHiden

    This is Right after function starthidden()

    ReplyDelete
  16. Hi Sriranm, I am using Cognos 10.2.1 , No Matter what i try , I am unable to Hide the Default Action to Hide the List by using all the Expressions below:
    window.onload=startHidden();
    window.onload=startHidden
    window.onload=startHiden();
    window.onload=startHiden

    This is Right after function starthidden()

    ReplyDelete
  17. Hi everyone

    Got window.onload=StartHidden(); to work !!

    Change the last HTML item code from

    var el = document.getElementById("details");

    to

    var el = document.getElementById("value_prompt");

    ReplyDelete
  18. On the addition of window.onload=startHidden(); or window.onload=startHidden; neither worked until I added ("value_prompt"); as it is here: window.onload=startHidden("value_prompt");
    Which I assume relates to what you hiding or showing.

    ReplyDelete