Hide and Show Report Objects

Proven Practice
Hide and Show Report Objects

Product(s): Cognos 8.2 Report Studio
Area of Interest: Reporting
Hide and Show Report Objects 2
Copyright
Your use of this document is subject to the Terms of Use governing
the Cognos software products and related services which you have
licensed or purchased from Cognos. The information contained in
this document is proprietary information of Cognos Incorporated
and/or its licensors and is protected under copyright and other
applicable laws. You may use the information and methodologies
described in this document 'as is' or you may modify them, however
Cognos will not be responsible for any deficiencies or errors that
result from modifications which you make. Copyright 2007 (c)
Cognos Incorporated. All Rights Reserved.
You can print selected pages, a section, or the whole book. Cognos
grants you a non-exclusive, non-transferable license to use, copy,
and reproduce the copyright materials, in printed or electronic
format, solely for the purpose of providing internal training on,
operating, and maintaining the Cognos software.
This document is maintained by the Best Practices, Product and
Technology team. You can send comments, suggestions, and
additions to BestPractices-ProductandTechnology@cognos.com.
Cognos Confidential
Contents
1 INTRODUCTION.................................................................................. 4
1.1 PURPOSE.............................................................................................. .................4
1.2 APPLICABILITY................................................................................................. .........4
1.3 EXCLUSIONS AND EXCEPTIONS..................................................................................... ...4
2 HOW DOES IT WORK..........................................................................4
3 CREATING THE REPORT......................................................................5
Cognos Confidential
1 Introduction
1.1 Purpose
This document demonstrates how you can use javascript to hide or
show objects within a Report Studio report.
1.2 Applicability
The steps provided in this document were validated using Cognos
8.2 build 43.129 using the Go Sales and Retailers package.
1.3 Exclusions and Exceptions

This technique requires the use of undocumented and unsupported
capabilities in Cognos 8. There may be a risk associated with this
technique in that support for these capabilities may change or be
dropped entirely in some future release.
If you are using report objects which don’t use the same query, they
are all executed as if the report objects are all being displayed on
the screen. The reason is that setting the box type to none (as is
done in this example) doesn’t prevent the query from running, it
simply prevents the object from being displayed.
If you have a report which has multiple queries which are used in
the various report objects you wish to display, then consider using
Conditional Layouts to control which ones to use based off of a
response from a prompt. This way the only queries that should
execute are the ones that the report being displayed requires.
2 How does it work

The main portion of the Javascript (dataview.js) controls the box
type for the objects in the report. In the example, 3 report object
are used, a Crosstab, a Bar Chart and a Pie Chart. Any object which
has a box type property which can be controlled can be used.
The code handles the changing the box type property for all the
objects to none and then depending on which radio button is
selected in the report it displays the appropriate report object.
The second piece of code (control.js) which in the example below is

inserted into the first row of the table creates the radio buttons
which the user can use to select which report object to display.
Cognos Confidential
The last of the HTML items create the opening and closing tags for
each of the report objects. These tags identify each of the report
objects (matching what is used in the other two HTML items, and
sets the default display type. By default in the report below only
the Bar Chart is displayed and all other report objects have the
display type set to none in the HTML items, which will keep them
from being displayed when the report first runs.
3 Creating the report

1) Open Report Studio against the Go Sales and Retailers package.
When prompted create a new Blank report.
2) Next Insert a table object into the blank report and set it to 1
column and 2 rows.
Cognos Confidential
3) Insert a Crosstab object into the second row of the table, and
insert into the crosstab Orders.Order year in the columns,
Order.Order method in the rows and Orders.Quantity for the
measures.
4) Next insert a bar chart in the same table row just to the right of
the Crosstab.
Cognos Confidential
5) Select the chart and change the Query in the properties pane to
be Query1.
6) Next repeat the same steps above only this time insert a pie
chart to the right of the bar chart. The end result should look like
the diagram below.
Cognos Confidential
7) Select the ‘Data Items’ tab for the Insertable Objects and drag
and drop Quantity into the Measures section. Then place Order
method into the series and Order year into the Category sections
respectively.
8) Repeat the steps above adding the data items to the pie chart.
Cognos Confidential
9) The report should now look like the one below.
10) The report that has been created when run will display all three
report object at the same time.
11) The next step is to add the Javascript elements which will allow
the user to control which view they wish to see. Click on the page
of the report and then select the ‘Create Header’ button from the
menu.
Cognos Confidential
12) Insert an HTML item into the header of the report, then paste
the Javascript, from the file included in the zip file (dataview.js), into
the HTML item.
<script type="text/javascript">
//
*******************************************************************************
***********
/* Code below added to the .js file in order to provide a hide and show for div
declarations.
- Added 9 September 2007 from code found on the net and modifed for use with
Cognos Report Studio.
*/
//
*******************************************************************************
***********
// <script language="JavaScript"> **** Only use script tags if putting the

script directly in
//the head of the page / report here you place the ids of every element you
want.
var ids=new Array('c_xtab','c_bar','c_pie');
function switchid(id){
hideallids();
showdiv(id);
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){

hidediv(ids[i]);
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
else { // IE 4
document.all.id.style.display = 'none';
Cognos Confidential
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
else { // IE 4
document.all.id.style.display = 'block';
</script>
13) Next insert another HTML object into the first row of the table,
the Javascript that will be inserted here is the selection controls for
which view to display.
14) In this HTML item add the 4 lines of code from the Javascript
file included in the zip file (control.js) to the HTML item.
<Input type = radio Name = r1 Value = “Cross Tab”

onclick=”javascript:11witched(‘c_xtab’);”><b>Show Crosstab</b>
<Input type = radio Name = r1 Value = “Bar Chart”

onclick=”javascript:11witched(‘c_bar’);”><b>Show Bar Chart</b>
<Input type = radio Name = r1 Value = “Pie Chart”

onclick=”javascript:11witched(‘c_pie’);”><b>Show Pie Chart</b>
Cognos Confidential
<br /><br />
The last step is to insert the opening and closing tags around each
of the report object for which the previously inserted Javascript will
control. For this a <div> tag is used which an HTML tag that
defines a division or section in a document.
15) The first object is the Crosstab, so drag an HTML item to the left
of the Crosstab in the second row of the table.
16) In this HTML item add the following text:
<div id='c_xtab' style="display:none;">

This identifies the cross tab as c_xtab and sets the display type to
none which will hide the object by default.
17) Next add another HTML item to the right of the Crosstab object
ensuring that it is placed to the left of the Bar Chart.
Cognos Confidential
18) In this HTML item add the following text:
</div><div id='c_bar' >

This text closes the opening <div> tag which precedes the Crosstab
and creates a new opening <div> tag for the Bar chart. Also by not
setting the display type to none, makes it the only object that will
be displayed when the report first runs. Notice that the names of
the div tags match what exist in the HTML objects both in the
header of the report and also in the first row of the table.
19) Insert another HTML item in between the Bar and Pie charts.
20) In this HTML item add the following text to close the <div> tag
for the Bar Chart and open a new <div> tag for the Pie Chart:
</div><div id='c_pie' style="display:none;">
Cognos Confidential
21) Lastly insert a final HTML tag to the right of the Pie Chart, and
insert the following text to close off the last remaining <div> tag for
the Pie Chart:
</div>
22) When run you will only see the Bar Chart, and upon selecting
the Crosstab and Pie Chart Radio buttons the respective objects will
be displayed accordingly.
Cognos Confidential
Cognos Confidential

Hide and Show Report Objects

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hide and Show Report Objects

Uploaded by

Copyright:

Available Formats

Proven Practice

Hide and Show Report Objects

1.3 Exclusions and Exceptions

2 How does it work

The second piece of code (control.js) which in the example below is

3 Creating the report

9) The report should now look like the one below.

// <script language="JavaScript"> **** Only use script tags if putting the

var ids=new Array('c_xtab','c_bar','c_pie');

//loop through the array and hide each element by id

for (var i=0;i<ids.length;i++){

//safe function to hide an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6

//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6

<Input type = radio Name = r1 Value = “Cross Tab”

<Input type = radio Name = r1 Value = “Bar Chart”

<Input type = radio Name = r1 Value = “Pie Chart”

<br /><br />

16) In this HTML item add the following text:

<div id='c_xtab' style="display:none;">

18) In this HTML item add the following text:

</div><div id='c_bar' >

</div><div id='c_pie' style="display:none;">

You might also like