Tuesday, March 25, 2014

IBM COGNOS 10 ( 10.1 / 10.2 / 8.4 / 8.3 ) – designing iPad / mobile user interface using simple java scripting on the report studio



2 parts to this:
1.       Why implement IBM COGNOS (8.3 /8.4 /10.1 / 10.2)report output design for an iPad or mobile device
2.      What is this example trying to achieve


Part 1:

Everyone is going mobile and IBM COGNOS (8.3 /8.4 /10.1 / 10.2) does have mobile module that one can buy. But in case you don’t have it, here is something you can try. Most companies have a standard device for their end users. Here I am considering an iPad as the standard for my IBM COGNOS (8.3 /8.4 /10.1 / 10.2) report outputs.

Better designs --- Redesigning your IBM COGNOS (8.3 /8.4 /10.1 / 10.2) report UI for the iPad /mobile users, we need to follow the KISS (keep it simple silly) approach. Some good icons, minimal data and effective report layout would change the overall look and feel all together. (If I had a choice I would hire a UI design team for the report layouts, colors and icons).



The safari browser at address will hide automatically and the IBM COGNOS (8.3 /8.4 /10.1 / 10.2) output viewer we can hide the tool bar by passing the following setting on the URL.

cv. toolbar=false and cv.header.false


(article http://pic.dhe.ibm.com/infocenter/cbi/v10r2m1/index.jsp?topic=%2Fcom.ibm.swg.ba.cognos.ug_cra.10.2.1.1.doc%2Ft_asg_hide_ui_element_cognos_viewer.html
User Interface Elements Using URL Commands in IBM COGNOS Viewer When Viewing Reports)




Take a look at the image, couple of icons (that I made from ms paint) to represent a landing page for the end user on IBM COGNOS (8.3 /8.4 /10.1 / 10.2). (if you had a UI design team, they would give HD and more meaningful icons). Each icons here links to a report output and hovering over the icons would give you the description(using mouse hover script on a HTML tag). One can also add text under these icons to name the reports better.




This second image shows the report output. Standard layout on the outer side of a block area and the inner area of the block is used to represent data. I have used 4 simple blocks to put out the data; one can use lists, charts and the amazing new IBM COGNOS 10.2.1 visualizations that are out there(Love the new graphs and colors that are now available with the IBM COGNOS 10.2.1). In my example I am limiting myself to basics as this approach should works on IBM COGNOS 8.3 / 8.4 / 10.1 / 10.2 versions.


Part 2:
What am I trying to achieve here using IBM COGNOS (8.3 /8.4 /10.1 / 10.2) report studio

A set of reports intended for a closed group of end users of IBM COGNOS (8.3 /8.4 /10.1 / 10.2). We have 16 reports, a new landing page for them and easy navigation between reports; a cool looking UI for the mobile users. especially for the management.

1.       Create a landing page report -- name it “home page”.
2.      Put a block at the center of the report page layout. The size of the block depends on the end users device. In my case, it is an iPad and the block size is 800 * 1245. (Go to apple developer website for more device specific layouts)
3.      16 icons, one icon each report that I want to link to. (report paths are static here  be )
4.      Create 16 reports with a standard template, 1 block with 800 * 1245 px size. A table inside this with 3 columns. The right most and left most columns for putting the icons and linking them with other reports. The center column with 70 % area should be useful to represent our data. Here I have put 4 small blocks and individual lists under each of them. I colored them in such a way that they look like a block / box / squares.
 
This entire idea can be made dynamic by using simple JSPs and a table in the database that can store the URL and icons for us.



Pre requisites
1. Icons to represent reports, navigation, landing page etc
2. A set of reports that you want to display.
3.  The reports to be displayed should have pre-determined prompts (hard coded like today / yesterday) or you can default the prompt values in the URL of the report pat.
4. Other simple way is the schedule the reports and link it to the outputs.
5. iPad / mobile device to test the output


Here is a list of java scripts that you would need on the report:

1..Script to save your link on the iPad home screen with an icon

 For other apple devices.

 https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

similarly, you can google around for andriod / windows devices as well.



Here are some screen shots:
1. Report studio look



2.Layout design
   Put in a block with the screen size or pixels of the device that you have to design for. In my case I have designed the IBM COGNOS (8.3 /8.4 /10.1 / 10.2) report output for ipad and the block size is 800 * 1245

3. Navigating button and report output



4. Adding the  IBM COGNOS (8.3 /8.4 /10.1 / 10.2) url to your home screen.



At the end, you should have an icon saved on to your iPad with the IBM COGNOS short cut link saved to your home screen with a user friendly GUI on reports.