Layout Types in IBM Cognos Analytics Dashboard

I often get asked about the difference between “absolute” and “relative” layouts in the IBM Cognos Analytics dashboard application.

If you are not familiar with what I am referring to when I say layout type, this is the “layout positioning” option that you will see in the dashboard properties panel.

I have to admit, I find the terms used to describe these layouts a bit geeky and not very user friendly.

In this article, I will explain the difference between the absolute and relative layouts, some of their drawbacks and how to address them.

Relative layout

In a nutshell, a “relative layout” is relative to your window size. In this mode, the size and position of the widgets in the page will be adjusted to adapt to the size of the browser window while maintaining the aspect ratio of the dashboard.

To be clear, this is not the same as zooming your page to fit the window. As the window resizes, the page layout will adjust the size of the widget containers accordingly, and this will allow the widgets to adjust its content to fit the new real estate.

In theory, this sounds awesome, right? But it does have some drawbacks and limitations when used in practice.

As a result of dynamically adjusting the real estate allocated to each widget and re-rendering its content, some widgets will display more or less content depending on the type, or the settings of the widget. Other widgets will decide to throw a temper tantrum and cut its content off when the size is too small for its liking. And, those text boxes that you placed on top of that chart may shift and be out of context.

Here is an example:

Same dashboard on a larger screen vs. smaller screen

So what happened here ?

• On a smaller screen or window size, the charts ended up hiding certain aspects of the visualization, like the axes and labels. This may not be something I want as an author.
• Some of the numbers in the summaries started to cut off because the size of the widget is too small.
• I cannot get the 2 text labels below the charts to use the same font size. Since I must use the “auto” font size for the text to fit in the text box, the text size will always be different depending on the text length.
• The blue text box that is placed on top of one of the charts and beside the legend is completely misaligned on a smaller screen. This happened because the widget underneath rendered the content a bit differently.
• Also, notice the text in the blue text box is completely cut off. This is because the text font size is set to an actual size and not “auto”.

What is the solution?

Often, a dashboard author would like the dashboard to look exactly how it is authored. This will not be the case when using relative layouts. As I previously described, the same content will most likely look different on various screen sizes.

This is where the “absolute layout” comes in.

What is the absolute layout?

The “absolute” layout is really about maintaining the same look as it was authored, no matter what the device screen size is. Since the size of the widgets does not change with the window or screen size, the content will always look the same.

But where is the catch ?

The down side of this layout is that the page might not fit on all screens. If the screen is too small, the user will end up scrolling horizontally to view the content. If the screen is too big, there will be a lot of white space surrounding the page.

What can be done about this?

A zoom setting with the option to set the zoom level to fit the page width or the full page would really solve this problem. Unfortunately, this option is not available in the currently released product.

The good news is there’s an extension that was recently released on the IBM Accelerator Catalog that will add the missing zoom capability to the absolute layout in the dashboard.

For version 11.1.7, you can download the extension here.

For version 11.2.0, a update version of the extension is being worked on and will be available soon.

Zoom support extension

Download and install the zoom support extension from the IBM Accelerator Catalog.

Once installed, you will see the following two options in the dashboard properties panel:

• Default zoom value: a property that will control the default zoom to be applied when the dashboard is being viewed.
• Show options in consume mode: a property that will expose a toolbar option in consume mode to control the zoom level.

Showing the zoom options in the consume mode will add a menu with the zoom options to the toolbar. A user can adjust the zoom as they are viewing the dashboard.

Now let us use the same example we used before in the relative layout, but this time, we will use an absolute layout and we will set the zoom level to fit the page width

So how did we improve the dashboard ?

• The chart content is always consistent and it is exactly how I expected it to look.
• All the summaries are no longer throwing temper tantrums and they are no longer cutting off numbers.
• The blue text box on top of the chart maintained its position.
• I am able to fix the font size in the text boxes below the charts. Finally, I can get consistent font size in both text boxes.

Final thoughts

The relative layout is mostly used to scale the dashboard to fit the screen, but as I mentioned in this article, it has its drawbacks.

I expect the use of the relative layout to be replaced with the absolute layout now that we have a zoom support in place.