Tip or Technique

Collapsible Hierarchies using Scripting

Product(s): IBM Cognos 8 Area of Interest: Report Design

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 cscogpp@ca.ibm.com .

IBM Cognos Proprietary Information

Contents
1 1.1 1.2 1.3 1.4 2 INTRODUCTION ............................................................................................ 4 PURPOSE .............................................................................................................. 4 APPLICABILITY ....................................................................................................... 4 UNDOCUMENTED AND UNSUPPORTED CAPABILITIES USED .................................................. 4 CAVEATS .............................................................................................................. 4 ADDING THE HTML MANUALLY .................................................................... 4

IBM Cognos Proprietary Information

1
1.1

Introduction
Purpose This document describes an approach that can be used to provide expandable and collapsible headers and footers using JavaScript. 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. 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. 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.

1.2

1.3

1.4

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.

IBM Cognos Proprietary Information

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.

IBM Cognos Proprietary Information

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

IBM Cognos Proprietary Information

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

IBM Cognos Proprietary Information

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.

IBM Cognos Proprietary Information

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.
<script> // These settings you can change to modify the report processing // Set to unit of measure for padding // Set to indent padding step size. Setting to 20 These have to match the

var UOM="px"; var INDENT_SIZE=20;

means the padding steps are 20,40,60,80. 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));} }

IBM Cognos Proprietary Information

10

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"; } } }

IBM Cognos Proprietary Information

11

// 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.

IBM Cognos Proprietary Information

12

14. Place the following code into the previously added HTML item.
<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.

16. Place the following code into the previously added HTML item.
</span>

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

IBM Cognos Proprietary Information

13

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

19. Place the following code into the previously added HTML item.
<img onload='StartHidden(this)' src='../pat/images/blank.gif'/>

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.

IBM Cognos Proprietary Information

14

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

IBM Cognos Proprietary Information

15

IBM Cognos Proprietary Information