IBM Business Analytics Proven Practices: Dynamic reporting in Cognos using jQuery

Product(s): IBM Cognos Report Studio; Area of Interest: Reporting

This document shows how an author can leverage the jquery libraries to enhance IBM Cognos report design.

Share:

Sonal Bhatt, Software Engineer, IBM

Sonal Bhatt is a part of IBM Cognos BI Fix Pack Team of India Software Labs based in Pune, India. She has completed Bachelor of Engineering in Computer Science. Sonal is working on feature and functional testing of different Cognos BI products having 4+ years of experience.



27 March 2013

Also available in Portuguese

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

  1. Create a new blank report.
  2. Drag a Block report object from the Toolbox to the report page area.
  3. Drag a Table from the Toolbox into the block with 2 columns and 1 row.
  4. Place a Block report object into both table cells.
  5. 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
    Figure 1: Report with the List and Chart prior to data items added
  6. In the Source tab, expand the Sales (query) namespace, and from the Products query subject drag Product line and Product type into the list.
  7. Expand the Sales query subject and drag Quantity onto the list to the right of Product type.
  8. 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
    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.
  9. 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
    Figure 3: Report with the HTML Items before and after the List object
  10. 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">
  11. 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>
  12. 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
    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.
  13. From the Toolbox drag two HTML Item objects to the very beginning of the report.
  14. 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="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js"></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>
  15. 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="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js"></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
    Figure 5: Completed report with the List and Chart objects and all the HTML Items in place
  16. 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
    Figure 6: Initial report output with List and Chart report objects hidden
  17. 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
    Figure 7: Report output with List object exposed
  18. 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
    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,

  1. 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
    Figure 9: Page Header & Footer properties with Header object selected
  2. From the Toolbox drag a Text Item object into the Header. In the dialog box type the text Cognos Report and click OK.
  3. 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
    Figure 10: Report with HTML items before and after Header Text Item
  4. Enter the following code in the HTML Item before the Text Item.
    <div class="FirstHeader">
  5. 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>
  6. 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="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function()
    {
      jQuery('.FirstHeader').animate(
      {
        opacity:0.4,
        marginLeft:'50px',
        fontSize:'50px'
      },1500);
    });
    </script>
  7. 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
    Figure 11: Image of report output with modified report title

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Big data and analytics on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Big data and analytics
ArticleID=862405
ArticleTitle=IBM Business Analytics Proven Practices: Dynamic reporting in Cognos using jQuery
publish-date=03272013