How to make Cognos reports responsive using Twitter Bootstrap

Being part of a BI group, we always encounter requests from business groups that the reports need to be responsive. Cognos out of the box doesn’t support responsiveness. I am talking strictly report studio reports and not Cognos Mobile. Neither do I know anything about Cognos Mobile nor am I a seasoned Cognos developer. It’s just some tool I used for a bit and didn’t like much. Now that we got that last bit out of the way, here is how you can achieve true responsiveness on all your Cognos reports using Twitter Bootstrap and some very basic jQuery.

In Cognos reports you can only access the body of a HTML document. To “induce” responsiveness you need to add some content to the head of the HTML document. Follow the steps below …

 

Step 1 – Add jQuery

In a HTML item paste the following …

<script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>

Step 2 – Modify the HTML head tag

Add another HTML item and add the following lines …

<script>
var tb = jQuery.noConflict();
tb(‘head’).append(‘<meta charset=\”utf-8\”>’);
tb(‘head’).append(‘<meta http-equiv=\”X-UA-Compatible\” content=\”IE=edge\”>’);
tb(‘head’).append(‘<meta name=\”viewport\” content=\”width=device-width, initial-scale=1\”>’);
tb(‘head’).append(‘<meta name=\”description\” content=\” \”>’);
tb(‘head’).append(‘<link rel=\”stylesheet\” href=\”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\” integrity=\”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7\” crossorigin=\”anonymous\”>’);

tb(‘head’).append(‘<link rel=\”stylesheet\” href=\”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css\” integrity=\”sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r\” crossorigin=\”anonymous\”>’);
</script>

Step 3 – Add Twitter Bootstrap 

In another HTML item paste the following …

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” integrity=”sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=”anonymous”></script>

Step 4 – The Creative Step

Look at some Twitter Bootstrap samples and create a grid system using HTML items. If you’re not sure about this step, I recommend you take a quick tutorial on Twitter Bootstrap.

 

Screenshots … 

Design View - Report Studio
Design View – Report Studio

 

cognos-responsive-view
Mobile view
desktop-view
Desktop View

 

 

 

5 Replies to “How to make Cognos reports responsive using Twitter Bootstrap”

  1. Hello, Thank you for the post that is very interesting.
    But I tried to use this in report studio, it did not work. Do you have a solution for this problem please?

  2. Hi Kalyan,

    I am looking to implement this responsive feature in one of my cognos 10.2.2 report. First 3 steps are pretty straight forward but did not get what you are saying about step 4, the creative step. in my case the report is already developed so not sure if that is the creative step you are talking about. can you please guide.

    thank you,
    Udaya.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.