Conditionally Hide the Cognos Header Bar Like a Flyout Menu

The technique to hide the Cognos Header bar from within a Report Studio report has been well documented.  But just to recap:

  • Add an HTML item to the report, setting the HTML text to the following:
    <style>
    #headerBack
    {
    display: none;
    }
    .mainHeader1
    {
    display: none;
    }
    .mainViewerHeader3
    {
    display: none;
    }
    </style>
This will completely hide the header bar, but it will also prevent you from returning to Cognos Connection, saving the report, running the report in a different format, etc..  Instead of completely getting rid of the header bar, what if you could click a button to allow it to pop out like a fly-out menu?  It’s actually pretty easy:
  1. Add the HTML item shown above.  This way the menu bar will be hidden by default when the report first opens.
  2. At the very top of the report (usually in the page header) add a block.  Leave the block’s width at the default 100%.
  3. Change the new block’s horizontal alignment to centered.  This will be the position of the flyout button.
  4. Within the block, add a second HTML Item. Set it’s HTML to:
    <table style=”background-color: silver; collapse-border: collapse;” cellpadding=0 cellspacing=0>
    <tr>
    <td><a Title=”Show/Hide the Cognos toolbar”; style=”cursor:pointer; font-size: ‘6px’; color: ‘#222222’;”; onClick=”javascript:toggleCognosHeader(this);”>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp” + “\/” + &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></td>
    </tr>
    </table>
    <script>
    function toggleCognosHeader(anchor)
    {
    if (anchor.innerText == ‘                    \\/                    ‘)
    {
    changeCss(‘.mainViewerHeader3’, ‘display’, ‘inline’);
    changeCss(‘.mainHeader1’, ‘display’, ‘inline’);
    document.getElementById(‘headerBack’).style.display=’inline’;
    anchor.innerText = ‘                    /\\                    ‘ ;
    }
    else
    {
    changeCss(‘.mainViewerHeader3’, ‘display’, ‘none’);
    changeCss(‘.mainHeader1’, ‘display’, ‘none’);
    document.getElementById(‘headerBack’).style.display=’none’;
    anchor.innerText = ‘                    \\/                    ‘ ;
    }
    }//Custom JavaScript Functions by Shawn Olson
    //Copyright 2004
    //http://www.shawnolson.net
    //If you copy any functions from this page into your scripts, you must provide credit to Shawn Olson & [shawnolson.net…]
    //*******************************************function changeCss(theClass,element,value)
    {
    //documentation for this script at [shawnolson.net…]
    var cssRules;
    if (document.all)
    {
    cssRules = ‘rules’;
    }
    else if (document.getElementById)
    {
    cssRules = ‘cssRules’;
    }
    for (var S = 0; S < document.styleSheets.length; S++)
    {
    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++)
    {
    if (document.styleSheets[S][cssRules][R].selectorText == theClass)
    {
    document.styleSheets[S][cssRules][R].style[element] = value;
    }
    }
    }
    }
    </script>
    That’s it!  Run the report and you’ll see a small silver bar at the top with an arrow pointing down.  Click on the bar and voila!  The Cognos header bar appears and the arrow points up.  Click it again and the Cognos header bar is gone.
    You could improve on this by creating a pair of images for the bar (one pointing up and one pointing down) and changing the above code to swap images instead of text.
    Let me know how this works out for you.
Advertisements

Cognos Report Studio Prompts as a JavaScript Popup

Cognos Report Studio prompt pages are okay for showing a list of prompts before the report is generated, and for long-running reports they are certainly the way to go.  However a lot of the reports that I have developed over the years needed to feel more interactive.  So instead (or often in addition) to prompts on a prompt page, I add them strategically on the HTML report itself, so the user can change the filters quickly.  This has worked well, until recently when I needed to use up all of the screen’s real estate for an interactive dashboard.  So I couldn’t put them on the report page, and the report users didn’t want the one to three second delay of returning to a prompt page.  They needed to see the prompts instantly.

A little bit of HTML and JavaScript, and I was able to hide the prompts completely, until the user clicked a button.  Immediately the prompts would pop-up in the middle of the screen.  One nice thing about this technique is that even when the prompts were hidden, I could still use JavaScript to interact with them if necessary (see Changing a Value Prompt in Report Studio using JavaScript).
Here are the steps:
  1. At the bottom of the page body, add the following HTML item:
    <div id=”divPrompts” style=”display:none; position:absolute; left:100; top:50; height=100; width=500; background-color=ffffff;”>

    You’ll want to tweak the size, position, and color to match your particular needs

  2. Add a table to your report after the HTML item and place your prompts inside the table.  Use the table to format the borders of the pop-up and the layout of the prompts.
  3. After the table, add an HTML item to close the <div> tag:
    </div>
    Anything between the <div> tab and the </div> tag will be hidden when the report page is first displayed
  4. Somewhere at the top of the report (or wherever you choose to place the button to display the prompts), add the following HTML item:
    <a style=”cursor:pointer”; onClick=’javascript:togglePrompts();’>
  5. After the html item containing the anchor tag, add a text item or an image that will act as your button.  For example, you could just add the text “Display Prompts”.
  6. After your text or image, add the following HTML item to close the anchor tag and hold the JavaScript function that hides/shows the prompts:
    </a><script>
    function togglePrompts()
    {
    var divPrompts = document.getElementById(“divPrompts”);
    if (divPrompts.style.display==”inline”)
    {
    divPrompts.style.display = “none”;
    }
    else
    {
    divPrompts.style.display  = “inline”;
    }}
    </script>

Of course, this technique doesn’t have to be limited to prompts.  It can be used to pop up any report element you want.

***** Edit 07/18/2012 *****
By popular demand… here’s the XML for a sample version of the report. Copy it to your clipboard, then open the report from the clipboard in Report Studio. The sample uses no data objects, so you can change it to point to any package you have published on your Cognos server.

Toggle Prompts Example