Making your dashboard Responsive – in a simple way

A very common question from customers working on dashboard project is the question on how they can use SAP BusinessObjects Design Studio on the one side but ensure that the resulting dashboard automatically adjusts to all the different devices that the users are going to use to consume the dashboard.

In other words, customers want to avoid a situation where they have to design two different kind of dashboards – one for a browser / desktop based consumption and a second version for a mobile consumption and for some customers this could potentially even mean a third version as the mobile part is being split into a smartphone and a tablet view.

SAP BusinessObjects Design Studio does provide the option to configure the components in regards to the height and width and does provide the option that components can automatically adjust, but SAP BusinessObjects Design Studio does not provide the option to really adjust the overall dashboard based on screen size and screen orientation out of the box.

As part of our next release (just a few days away) we are trying to solve that problem by providing a Responsive UI container. So lets take a look at what the Responsive UI container can provide.

First of all the Responsive UI container does provide the option to define a number of panels as part of the overall Responsive UI container, which allows the user – if needed – to split the container into multiple child container. In such a scenario the content inside each of the child container becomes responsive.

Lets take an example of us placing 4 KPI Tiles (just sample data) onto our canvas and we use a Responsive UI container without any child container (as shown below).

In the situation where now the overall screen / window size for the dashboard gets adjusted, the elements are automatically re-placed and the dashboard is adjusting to the screen size / screen orientation.

In case we do make use of the option to split the overall container into two child container and we place the KPI tiles into those, then the adjustment would be slightly different as the elements inside the child container will act in a “responsive” way but the container towards each other will not adjust (see below)

As the person designing the dashboard you have the control over how many child container there are and which components are being assigned to which part of the Responsive UI container. In addition you have the option to define profiles, which do give you the option to assign specific designs and layout to specific type of devices and screen resolutions.

Lets say we would like to have a layout as shown below for the desktop….

… and another layout for the mobile consumption.

In such a scenario we would first define the two layouts in SAP BusinessObjects Design Studio and simply assign the components to the different areas of the REsponsive UI container (see below for the Desktop Example).

In the next step we would then define the second profile which would be the same components, but a different layout (see below).

and in the last step we would then setup different assignments of those profiles we created to a range of screen resolutions and type of devices.

Here we can setup as many rules as we require and per rule we can define which of the profiles should be used – in our example we have 2 profiles – and we can configure which type of Device – Mobile / Desktop – and which range of screen resolution we would like to assign to the selected profile.

In that way we could have a single rule covering everything or we could setup specific profiles and rules for the different device sizes, such as iphone 5, iphone 6, iphone 6 plus, ipad Mini, iPad, iPad Pro.