Report Studio - Show/Hide

    This is from a project I worked on quite some time ago for a Developmental Programs Cognos project. Now with conditional blocks it can be other ways but this will demonstrate control over objects by code.
    With conditional blocks display control is made easier but in situation where you want to have more control or just understand showing and hiding Cognos items in a report in more detail a simple Javascript can be used. The code can be modified easily enough for any situation.

    1. Place the table    
         Starting with a blank report, we can use a basic table of three columns and three rows.

    2. Place the permanent objects.
         In the second row, place a chart in each table cell for a total of three charts.

    3. Place the list reports.
         In the third row add three list reports, one in each table cell. We'll call them ListReport1, ListReport2 and ListReport3.

    4. Add HTML tags around list reports
          In the first table cell, add an HTML item above ListReport1 and type in <div id="List1" style="display:none;">. Add an HTML item below the list report and type in </div>.
         In the second table cell, add an HTML item above ListReport2 and type in <div id="List2" style="display:none;">. Add an HTML item below the list report and type in </div>.
        And in the third table cell, add an HTML item above ListReport3 and type in <div id="List3" style="display:none;">. Add an HTML item below the list report and type in </div>.

You can save the report and run it now and it should show all three charts and no list reports. Items in the div tags are hidden.

    5. Add radio controls
         In the top row, middle table cell add an HTML item and insert the following Javascript or a modified version to suit what you need.

<Input type - radio Name=''r1" Value ="Show" onclick="javascript:Hide('List1','List2','List3')" checked><b>Hide Data</b>

<Input type - radio Name=''r1" Value ="Show" onclick="javascript:Show('List1','List2','List3')" checked><b>Show Data</b>

<script type="text/javascript">

function Hide(a,b,c) {
document.getElementById(a).style.display="none";
document.getElementById(b).style.display="none";
document.getElementById(c).style.display="none";
}

function Show(a,b,c) {
document.getElementById(a).style.display="block";
document.getElementById(b).style.display="block";
document.getElementById(c).style.display="block";
}

</script>

All that was done was some basic HTML and Javascripting to show and hide HTML DIV sections in order to allow a clean interface showing only charts when the report is run but the user can then view the data in the list reports as well if wanted.