Skip to Content
Author's profile photo Ingo Hilgefort

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).

/wp-content/uploads/2016/01/6_107_871896.jpg

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.

/wp-content/uploads/2016/01/6_108_871897.jpg

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)

/wp-content/uploads/2016/01/6_110_871937.jpg

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….

/wp-content/uploads/2016/01/6_124_871938.jpg

… and another layout for the mobile consumption.

/wp-content/uploads/2016/01/6_123_871939.jpg

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).

/wp-content/uploads/2016/01/6_126_871940.jpg

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

/wp-content/uploads/2016/01/6_127_871941.jpg

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.

/wp-content/uploads/2016/01/6_128_871942.jpg

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.

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Ingo,

      great idea! Thank you for developing this awesome component. I am sure it will be very useful for everyone.

      I have one question according to the component. Is it available in UI5 sap.m mode? Or just in the classic mode?

      Kind regards,

      Christopher

      Author's profile photo Ingo Hilgefort
      Ingo Hilgefort
      Blog Post Author

      Hello Christopher,

      all our components are available in both modes.

      regards

      Ingo Hilgefort, Visual BI

      Author's profile photo Former Member
      Former Member

      where is the  Responsive UI container

      I can not find it in the  application

      Author's profile photo Former Member
      Former Member

      Hi Ingo,

      that sounds great! We're struggling with this for a long time. I wonder what exactly the release date is. Can't wait to try it! 🙂

      Best regards!

      Daisy

      Author's profile photo Ingo Hilgefort
      Ingo Hilgefort
      Blog Post Author

      Hello Daisy,

      the updated extensions are being released this week.

      regards

      Ingo Hilgefort, Visual BI

      Author's profile photo Ingo Hilgefort
      Ingo Hilgefort
      Blog Post Author

      Hello Karol,

      not the component is not restricted to our components. it works with the standard components as well.

      And it does offer a lot more flexibility than what was posted some time ago as an open source component from your side.

      regards

      Ingo Hilgefort, Visual BI

      Author's profile photo Former Member
      Former Member

      Hello Ingo,

      thanks for your Blog-Post! I'm new at using SAP Business Objects Design Studio (1.6) and I was wondering how I can use the described component ("Responsive UI container"). Do I have to download these separately or is it somehow directly available in the Design Studio?

      Best Regards,

      Martin