Collapsible Hierarchies using Scripting

Transcription

1 Tip or Technique Collapsible Hierarchies using Scripting Product(s): Cognos 8.2, Cognos 8.3 Area of Interest: Report Design

2 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

3 3 Contents 1 INTRODUCTION PURPOSE APPLICABILITY...4 UNDOCUMENTED AND UNSUPPORTED CAPABILITIES USED CAVEATS ADDING THE HTML MANUALLY... 4

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: Cognos 8.2 build using the Go Sales and Retailers package. Cognos 8.3 build using the Go Sales(query) package. 1.3 Undocumented and Unsupported Capabilities Used 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. 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. 2. Group on Product line and Product type.

5 5 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 6. Add 20 px of padding to the left side and select OK to commit the change.

7 7 7. Click on Product name field, then on the left hand side properties pane, select ellipses for the Padding property. 8. Add 40 px of padding to the left side and select OK to commit the change.

8 8 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. 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 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));

9 9 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"; // Now, we determine if the row should be hidden or shown.

10 10 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 Cognos 8.3 install. If 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.

11 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. 18. Within the toolbox tab, select the HTML item and drag it into the List Page Footer.

12 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. 21. Enter 200 as the value and press the Enter key to commit the changes.

13 Run the report.