IBM Cognos Report Studio - Collapsible Hierarchies Using Scripting

(1)

Tip or Technique

Collapsible Hierarchies using

Scripting

Product(s): IBM Cognos 8

Area of Interest: Report Design

(2)

IBM Cognos Proprietary Information Copyright

Copyright © 2008 Cognos ULC (formerly Cognos Incorporated). Cognos ULC is an IBM Company. While every attempt has been made to ensure that the information in this document is accurate and complete, some typographical errors or technical inaccuracies may exist. Cognos does not accept

responsibility for any kind of loss resulting from the use of information contained in this document. This document shows the publication date. The information contained in this document is subject to change without notice. Any improvements or changes to the information contained in this document will be documented in subsequent editions. This document contains

proprietary information of Cognos. All rights are reserved. No part of this document may be copied, photocopied, reproduced, stored in a retrieval system, transmitted in any form or by any means, or translated into another language without the prior written consent of Cognos. Cognos and the Cognos logo are trademarks of Cognos ULC (formerly Cognos Incorporated) in the United States and/or other countries. IBM and the IBM logo are

trademarks of International Business Machines Corporation in the United States, or other countries, or both. All other names are trademarks or registered trademarks of their respective companies. Information about Cognos products can be found at www.cognos.com

This document is maintained by the Best Practices, Product and Technology team. You can send comments, suggestions, and additions to

(3)

IBM Cognos Proprietary Information

Contents

1 INTRODUCTION ... 4

1.1 PURPOSE... 4

1.2 APPLICABILITY... 4

1.3 UNDOCUMENTED AND UNSUPPORTED CAPABILITIES USED... 4

1.4 CAVEATS... 4

(4)

1 Introduction

1.1 Purpose

This document describes an approach that can be used to provide expandable and collapsible headers and footers using JavaScript.

1.2 Applicability

The steps provided in this document were validated using:

• IBM Cognos 8.2 build 43.249 using the Go Sales and Retailers package.

• IBM Cognos 8.3 build 81.20 using the Go Sales(query) package. • IBM Cognos 8.4 build 26.1 using the Go Sales(query) package. 1.3 Undocumented and Unsupported Capabilities Used

This technique requires the use of undocumented and unsupported capabilities in IBM 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.

1.4 Caveats

This technique should only be considered for reports with reduced result sets. Any implementation of this technique should be thoroughly performance tested prior to an end user roll out.

2 Adding the HTML Manually

In order to accomplish this functionality several HTML items will need to be added to the report and grouping levels. To do this:

1. Using the GO Sales and Retailers sample package create the following report.

(5)

2. Group on Product line and Product type.

3. Create a Header for Product line and Product type.

4. Cut the detail information for Product line and Product type.

5. Click on Product type grouping, then on the left hand side properties pane, select ellipses for the Padding property.

(6)

6. Add 20 px of padding to the left side and select OK to commit the change.

(7)

7. Click on Product name field, then on the left hand side properties pane, select ellipses for the Padding property.

(8)

8. Add 40 px of padding to the left side and select OK to commit the change.

The padding increments are used in the JavaScript inserted later, so if the padding is changed here the subsequent JavaScript will need to change as well.

(9)

9. Unlock the report cells by clicking the lock on the toolbar. This will allow for the items to wrapped in the required HTML tags.

10. Within the toolbox tab, select the HTML item and drag it into the List Page Header.

11. Place the following code into the previously added HTML item.

// These settings you can change to modify the report processing

var UOM="px"; // Set to unit of measure for padding

var INDENT_SIZE=20; // Set to indent padding step size. Setting to 20 means the padding steps are 20,40,60,80. These have to match the padding applied to the report objects

var UOM_SIZE = UOM.length;

function stripTrailing(string,num) {

if ( string == "") {return parseInt(0);} else {return parseInt(string.substring(0,string.length-num));}

}

(10)

IBM Cognos Proprietary Information function ExpandCollapse( el )

{

// Grab the ROW that was clicked and the TABLE that contains it

var tr = el.parentElement.parentElement;

var tbl = tr.parentElement.parentElement;

// Set the alternating display values for hiding/showing the row

var sDisplay = ( el.src.indexOf( "minus" ) == -1 ) ? "" : "none";

var sDisplayReverse = ( el.src.indexOf( "minus" ) == -1 ) ? "none" : "";

//Switch the icon for the clicked row

el.src = "../pat/images/PropertyGroup_" + ( el.src.indexOf( "minus" ) == -1 ? "minus" : "plus" ) + ".gif";

// Starting with the row below the clicked row, start checking each row

for ( var i = tr.rowIndex + 1; i < tbl.rows.length; i++ )

{

// Set the Current row indicator nad the left padding value

var trCurrent = tbl.rows( i );

var trCurrentLeft = trCurrent.cells(0).style.paddingLeft;

// if the current row contains an IMG in it, it's a clickable level and we either have to stop processing,

// or reset the icons to a + as it's being collapsed

if ( trCurrent.cells( 0 ).firstChild && trCurrent.cells( 0 ).getElementsByTagName( "IMG" ).length )

{

// If the current row is at the same level or above in the tree, then stop processing,

// else reset all the signs below it, essentially collapsing all branches underneath the one that is beig collapsed.

if ( stripTrailing(trCurrentLeft , UOM_SIZE) <= stripTrailing(tr.cells(0).style.paddingLeft , UOM_SIZE) ) { break; } else { if (el.src.indexOf( "minus" ) == -1 ) { trCurrent.cells(0).getElementsByTagName("IMG").item(0).src = "../pat/images/PropertyGroup_plus.gif"; } } }

(11)

IBM Cognos Proprietary Information // Now, we determine if the row should be hidden or shown.

if ( eval(stripTrailing(tr.cells(0).style.paddingLeft, UOM_SIZE) + INDENT_SIZE) < stripTrailing(trCurrentLeft, UOM_SIZE) &&

el.src.indexOf( "minus" ) > 0 ) { trCurrent.style.display = sDisplayReverse; } else { trCurrent.style.display = sDisplay; } } } function StartHidden(el) { var tbl=el.parentElement.parentElement.parentElement.parentElement;

for (var i = 0; i < tbl.rows.length; i++)

{

var trCurrent = tbl.rows(i);

if (trCurrent.cells(0).style.paddingLeft.indexOf(UOM) > -1) { trCurrent.style.display = "none"; } } } </script>

12. The script above references icon names which no longer exist under the IBM Cognos 8.3 install. If IBM Cognos 8.3 is being used, copy the supplied PropertyGroup_minus.gif and the PropertyGroup_plus.gif into the ..\webcontent\pat\images directory.

13. Within the toolbox tab, select the HTML item and drag it in front of the Product line grouping.

(12)

<img onclick='ExpandCollapse(this)'

src='../pat/images/PropertyGroup_plus.gif' style='cursor:hand; vertical-align:middle; margin-right:2px'/><span

onclick='ExpandCollapse(this.previousSibling)' style='cursor:hand'>

15. Within the toolbox tab, select the HTML item and drag it in behind the Product line grouping.

</span>

17. Repeat steps 12 to 15 for the Product type grouping. When completed the report should represent the following.

(13)

18. Within the toolbox tab, select the HTML item and drag it into the List Page Footer.

20. In order to see all the rows in the display, the rows per page property will need to be set to a number larger than the number of detail records.

Select the List object and locate the Rows per page property in the left hand property pane.

(14)

21. Enter 200 as the value and press the Enter key to commit the changes.

22. Run the report.

(15)