Hide and Show Report Objects

Proven Practice

Hide and Show Report ObjectsProduct(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 [email protected].

Cognos Confidential

Hide and Show Report Objects 3

Contents

1 INTRODUCTION...........................................................................4

1.1 PURPOSE........................................................................................................41.2 APPLICABILITY..................................................................................................41.3 EXCLUSIONS AND EXCEPTIONS............................................................................4

2 HOW DOES IT WORK...................................................................4

3 Creating the report......................................................................................5

Cognos Confidential

Hide and Show Report Objects 4

1 Introduction

1.1 PurposeThis document demonstrates how you can use javascript to hide or show objects within a Report Studio report.

1.2 ApplicabilityThe 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 ExceptionsThis 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

Hide and Show Report Objects 5

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

Hide and Show Report Objects 6

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

Hide and Show Report Objects 7

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

Hide and Show Report Objects 8

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

Hide and Show Report Objects 9

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

Hide and Show Report Objects 10

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

Hide and Show Report Objects 11

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

Hide and Show Report Objects 12

<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

Hide and Show Report Objects 13

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

Hide and Show Report Objects 14

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

Hide and Show Report Objects 15

Cognos Confidential