Hide and Show Report Objects
Hide and Show Report Objects
Hide and Show Report Objects
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.............................................................................................. .................4
1.2 APPLICABILITY................................................................................................. .........4
1.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 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.
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.
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.
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.
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
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.
*/
//
*******************************************************************************
***********
//the head of the page / report here you place the ids of every element you
want.
function switchid(id){
hideallids();
showdiv(id);
function hideallids(){
function hidediv(id) {
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) {
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.
Cognos Confidential
Hide and Show Report Objects 12
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.
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
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:
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