Maximizing Rollbase Dashboard Space

We will look at a very little known feature of Rollbase that can help maximizing Rollbase dashboard space. How can one create a 2 column Rollbase page layout and organize sections to sit beside each other. Note that this is available for generic page types only which is helpful when you are building a dashboard. Rollbase sections allow for up to 4 columns, but this is not available for section that house components like Views, Charts, etc that take up the entire section. Screen real-estate these days is so large that a single component spanning entire page does not make much sense. Hence a page with 2 columns is a better option to show such components adjacent to each other. By virtue of being responsive, they render well when the real-estate is less.

Alternate Page Layout

Check how a single column page layout looks on a wide-screen device.

Single Column Page Layout

Not much information available. How about we add a view of active bugs and an additional Twitter feed component?

Select ‘Design this Page’ from page options menu. Change columns property on the page properties popup to 2. This enables the 2 column Rollbase page layout and opens up a slot to the right of all sections on the page.

2 Column Rollbase Page Layout Property

You can add sections to the page or mark existing sections to be right aligned to push them to 2nd column. Note that you will not be able to drag a section to the right column. It will have to be done via a property.

To make a section fall into the 2nd column, change ‘Alignment’ property in the properties drop-down for a section and set it to ‘Right’.Section Alignment Property

‘Span’ value for the ‘Alignment’ property makes a section span across both columns which is useful when you have a grid or component with larger data that would look all cramped if rendered in a single column.

Responsive vs Fluid Dashboards

You have the option of rendering the section in a responsive manner as opposed to the fluid design that was available before.

It works this way:

  • On Medium and large screen width (>993px) we render as 2 columns
  • On smaller screens (<=993px) render as 1 column.

This translates to:

  • On desktop: render as 2 columns
  • On typical tablets like iPad
    • in landscape mode dashboards still show as 2 column
    • while in portrait they show as 1 column.
  • On Smart phone they show as 1 column.

Render mode for 2 column layoutThe responsive mode is on by default but for now, if customers want to go back to the html table style rendering (fluid rendering – for dashboards to be compatible with the way it rendered in classic ui), they can set the property from page designer for generic pages. This property (‘Render Mode’) is available only if the no. of columns are 2.

Maximizing Rollbase Dashboard Space

Maximizing Rollbase Dashboard Space
Maximizing Rollbase Dashboard Space

Conclusion

We have seen how you can achieve a 2 column Rollbase page layout and bring in more content on to your dashboards and maximize usage of real-estate. This feature when bundled with multi-column sections and their responsive layouts allows you to create fluid and data-rich dashboards and pages.

Comments are closed.