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

 

 

 

Leave a Reply

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