Tile-based dashboards are always popular with users, and this is not without reason. These dashboards have the ability to give the user a high-level overview of the information that he needs to know, while maintaining a clean layout, free from information overload. If the user does require more granular information, we could provide drilldown capabilities, enabling the user to see more data, if he so chooses.

From the end user perspective, what could prove to be very vital to quickly consume information is the order in which these tiles are laid out. Following dashboarding best practices, tiles are generally ordered from top-left to bottom-right, in order of relatively decreasing importance. (This of course could vary depending upon user locale – for instance, some users in the Middle East might prefer the most important information on the right, considering that they read from right-to-left.)

This order is generally decided after many sessions of discussion with the product owners, with much deliberation. However, there are scenarios when one size doesn’t fit all, and a user may want to rearrange the tiles based on their preference. Giving them the end user the power to do this would definitely increase end user adoption as well. To that effect, SAP Lumira Designer would be the right tool to use.

Let’s get a bit technical now. Using the Grid Layout does not allow the developer to enable users to customize the layout of their application at runtime, without having to resort to duplication of components, which in turn would adversely affect performance. However, we can leverage CSS to achieve our end-goal – User Customizability for tiles on an application.

Instead of using the tried and tested method of using the native Grid Layout component, we can size the tiles with relative dimensions. Feel free to check out the link below for understanding how relative units work.

https://www.w3schools.com/cssref/css_units.asp

Just as the width and height are set to relative units instead of pixels, we can do the same for the position of the tiles, by setting the margins with relative units. Here’s an example of the CSS used to position a tile relative to the dashboard body.

.tile1
{
height:46vh !important;
width:23vw !important;
top:6vh !important;
left:2vw !important;
z-index:5 !important;
}


The CSS for the other tiles will need to be specified similarly. Please note that the width, height and margins can be customized to meet your requirements.

Here’s how such a dashboard looks like, with each of the tile dimensions specified in relative units.

Now comes the interesting part. Since the position of the each tile is determined by what CSS class is set, we can provide users the ability to rearrange the tiles by switching the CSS classes at runtime.

As you can see, the order of tiles has now been changed.

All that’s left now is to personalize the application, so that the layout is retained the next time the user accesses the dashboard.

If the user so chooses, he can always go back and reorder the tiles.

There, you can now allow users to customize your dashboard layout at runtime. This can be scaled across any number of tiles, and also for different dashboard layouts.

Got questions? Click here to get in touch.