text: Introduction
  Purpose of Document
  This document describes an approach that can be used to implement jQuery with IBM Cognos Report Studio so as to provide more dynamic and interactive reports to the end user. This also describes how one can leverage the powerful open-source JavaScript library jQuery to add dynamic user interface elements to your reports.
  Applicability
  This document was tested with IBM Cognos BI versions 10.1.1 and 10.2 on all supported platforms and may also apply to subsequent releases.
  Overview
  Currently we can use HTML Item objects in Report Studio to embed JavaScript code into reports. In order to use JavaScript in a report, Report Authors need to have JavaScript development experience or at least be JavaScript aware. This can cause report development to be complex, costly to develop and hard to maintain or update. By using jQuery, some of those issues can be lessened, making dynamic report development easier to use and understand.
  What is jQuery?
  jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling and animating. Its cross-browser compatibility, powerful features and ease of use have made it a popular JavaScript framework for the Web. There are two ideal solutions for embedding the jQuery library in a web page,
  - Use the Google-hosted Content Delivery Network (CDN) to include a version of jQuery.
  - Download your own version of jQuery from jQuery.com and host it on your own server or local file system.
  jQuery plug-ins can be used in IBM Cognos Viewer so that Report Authors no longer need to be JavaScript developers. The code can be agile, loosely coupled to IBM Cognos Report Studio objects and easily modified if the Report Studio objects change.
  For more information on jQuery, see.
  Using jQuery functionality in IBM Cognos Report Studio
  In this section we will create a report in IBM Cognos Report Studio that will use jQuery objects to enhance the default IBM Cognos report. For this example, the GO Sales (query) package and the Google-hosted version of jQuery will be used.
  - Create a new blank report.
  - Drag a Block report object from the Toolbox to the report page area.
  - Drag a Table from the Toolbox into the block with 2 columns and 1 row.
  - Place a Block report object into both table cells.
  - Drag a List object into the block in Column 1 and a Column Chart object into the block in Column 2. Your report should look like the one in Figure 1.
  Figure 1: Report with the List and Chart prior to data items added
  - In the Source tab, expand the Sales (query) namespace, and from the Products query subject drag Product line and Product type into the list.
  - Expand the Sales query subject and drag Quantity onto the list to the right of Product type.
  - Selecting the chart, change the Query property to use Query1. From the Data Items tab drag Product line onto the chart Categories and Quantity into the Default measure drop zones. Your report now should look like the one in Figure 2.
  Figure 2: Report with data items added for the List and Chart
  In order to have jQuery act on our List object, we need to have some classes implemented so that it can be referenced in the jQuery code. In order to provide classes on the items we are using, we need to put an HTML Item before and after the List and Chart objects.
  - From the Toolbox drag an HTML Item before the List object and a second HTML Item after the List object as shown in Figure 3 below. This step may be easier to do using the Page Structure view.
  Figure 3: Report with the HTML Items before and after the List object
  - Add the following lines of code to HTML Item before the List object.
  <div class="ShowHideClicker">Click here to show/hide the List Report</div> <div class="ShowHideList">
  - In the second HTML Item at the bottom of the List, add the following code to close the
  <div>tag that was started in the first HTML Item.
  </div>
  - Repeat steps 9 – 11 for the Chart object, changing the
  <div>classes from 'ShowHideClicker' to 'ShowHideClick' and 'ShowHideList' to 'ShowHideChart'. The report should look similar to the one shown below in Figure 4.
  <div class="ShowHideClick">Click here to show/hide the Chart Report</div> <div class="ShowHideChart">
  Figure 4: Report with the HTML items before and after both the List and the Chart
  Now we need to insert two HTML Items at the very beginning of the overall report and add some jQuery code to hide and show the List and Chart objects when the report runs. This is useful for when there are number of report objects contained within a single report and the user wants to look at only those report objects that are of interest.
  - From the Toolbox drag two HTML Item objects to the very beginning of the report.
  - Add the following jQuery code to the first of these HTML Items. This code will show and hide the List report.
  <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> <script type="text/javascript"> var j = jQuery.noConflict(); j(document).ready(function() { j('.ShowHideList').hide(); j('.ShowHideClicker').click(function() { j(this).next().toggle(); }); }); </script>
  - Click on second HTML Item and add the following lines of jQuery code to show and hide the Chart report.
  <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> <script type="text/javascript"> var j = jQuery.noConflict(); j(document).ready(function() { j('.ShowHideChart').hide(); j('.ShowHideClick').click(function() { j(this).next().toggle(); }); }); </script>
  Your report should now appear similar to the one depicted in Figure 5.
  Figure 5: Completed report with the List and Chart objects and all the HTML Items in place
  - Run the report. The result is seen below in Figure 6. The List and Chart reports are not initially visible until the user clicks on the Click here to show/hide List Report or Click here to show/hide the Chart Report text items at the top of the report.
  Figure 6: Initial report output with List and Chart report objects hidden
  - Click on the text item Click here to see the List Report and notice that the List report is now visible (Figure 7).
  Figure 7: Report output with List object exposed
  - Clicking on the text item Click here to see the Chart Report will expose the Chart report (Figure 8).
  Figure 8: Report output with Chart object exposed
  Using the jQuery animate() function
  We can also add animation effects in a report. The jQuery animate() function is very powerful API to manipulate HTML elements and add animation functionality. The use of the animate() function is very simple and the is as follows,
  
  To do some basic animation on our sample report,
  - Add a Page Header to the report by going to the menu bar as selecting Structure > Headers & Footers > Page Header and Footer... and ensuring the checkbox beside Header is enabled as shown in Figure 9. Click OK.
  Figure 9: Page Header & Footer properties with Header object selected
  - From the Toolbox drag a Text Item object into the Header. In the dialog box type the text Cognos Report and click OK.
  - Add three HTML Items into the Header area. One of the HTML items needs to be before the Text Item in the Header and the other two HTML Items go after the Text Item. This is depicted in Figure 10.
  Figure 10: Report with HTML items before and after Header Text Item
  - Enter the following code in the HTML Item before the Text Item.
  <div class="FirstHeader">
  - In the first HTML Item that follows the Text Item, add the following code to close the
  <div>tag that was opened in an earlier HTML Item.
  </div>
  - In the second HTML Item that follows the Text Item, adding following the jQuery code for the animate() function. The code will animate the text Cognos Report that was placed in the Header by increasing the font as the text moves out from the margin.
  <script type="text/javascript" src=""></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.FirstHeader').animate( { opacity:0.4, marginLeft:'50px', fontSize:'50px' },1500); }); </script>
  - Run the report. As shown in Figure 11, the text Cognos Report should animate and grow from the left margin.
  Figure 11: Image of report output with modified report title.