Purpose of Document
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.
What is jQuery?
- 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.
For more information on jQuery, see http://jquery.com/.
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.
- 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.
- Click on second HTML Item and add the following lines of jQuery code to show and hide the Chart report.
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,
.animate( properties, [ duration ], [ easing ], [ callback ] )
- properties: A map of CSS properties that the animation will move toward.
- duration: A string or number determining how long the animation will run.
- easing: A string indicating which easing function to use for the transition.
- callback: A function to call once the animation is complete
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.
- 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.
- 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.
- 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