Hello all

Even with all of the available resources, I found myself not understanding how to put together a Pentaho CTools dashboard that would display properly across different devices. I read so many pages about CTools, Bootstrap and CSS but could not wrap my arms around exactly how to put it together. Finally, and with a gentle push from the WebDetails folks, I sat down and worked it out until I understood what I was doing. I want to share what I learned in the hope that others can gain from this.

In hindsight, of course, it's rather straightforward... but then again, isn't everything like that?

My goal is to have a bunch of panels (eight) of content that will display
  • Four panels per row in a large desktop browser
  • Three panels per row in a medium desktop browser (or iPad in landscape orientation)
  • Two panels per row in a tablet (iPad in portrait orientation)
  • One panel per row in a cell phone

Here's the basic steps: Create a Row, then a Column underneath, then an Html under that. For each panel of content you want, create an additional Column-Html combination under that row. For example, here is mine:
Name:  ScreenLayout.jpg
Views: 425
Size:  7.9 KB

Every column should have the same settings for the number of Bootstrap columns (remember, each row can have no more than 12), like this:
Name:  ScreenColumnProperties.jpg
Views: 425
Size:  11.1 KB
This is where I got stuck - setting the number of columns for each of the Devices. The smallest device (extra-small) needs to have a column width of 12, so that there is only one column displayed per row. On the other hand, the largest device (large) can have a lower width so that multiple columns are displayed on each row.

Another useful tip is to dynamically show or hide content based on what device is being used. For example, you may not want to display the big corporate logo on phones, but it's ok on a tablet. For this you can set the CSS class for that content to one of these:
  • visible-lg
  • visible-md
  • visible-sm
  • visible-xs

Put this dynamic content into a Row-Column-Html and set the Html's CSS to one or more of these four values. It will only be displayed for the specified display size. The WhatBrowser row in my demo contains this code.

I'm including a zip file with the dashboard template built as I've described. Hope this helps folks.

- rlmMobileTemplate.zip