CSS animations are a lot of fun. One of my favourite CSS effects is the CSS Rollover effect, wherein there’s content on both the front and behind of a given container. Rollover tiles can be very useful, providing users with a bit of interactivity and keeping them engaged. A very common use-case for Rollover tiles is including some kind of imagery on the front, and related information on its back.

Advantages of using Rollover tiles:

  • Roll over tiles minimizes the space in the dashboard
  • It works on all devices because of its responsive design code
  • It works faster than the on-click switch
  • Different transitions can be made in Roll over tiles

We all agree that the primary aim of a dashboard is to provide insights and enable users.  This is especially true at the executive level, where they take decisions based on the information at his or her disposal. It is only natural that a dashboard user would like to view as much information as possible in a single view, without having to swipe or navigate through the interface. KPI tiles are a great way to provide a UX that displays vital metrics in a manner that doesn’t take up too much real estate.

With the KPI tiles in place, what more would the user want to see? Perhaps a trend chart depicting how that particular measure has varied over the last few months. Many of us would place this next to or below the tile.  Unfortunately, that takes up more space on the dashboard and diminishes the benefits of the KPI tiles presentation style. This is where the Rollover tile comes in handy. The Rollover tile is designed to literally “roll-over” on a hover/click event, which then displays the underlying chart. It then slides back into position when the focus is removed. As opposed to the standard out-of-the-box dynamic visibility functionality, this feature offers more visual appeal to the user. Needless to say, the rollover event can be customized to a large extent using CSS.

In this blog, I will explain the steps to implement Rollover tiles in SAP BusinessObjects Design Studio.

Step 1:

Open your application in SAP BusinessObjects Design Studio. Save the following CSS in a separate stylesheet and upload it to the Custom CSS property under Application properties:

 .ch-item {                     
 position: relative;         
 cursor: Pointer;            
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);

 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out;     
 -o-transition: all 0.6s ease-in-out;         
 -ms-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
 -webkit-transform-origin: 50% 100%;     
 -moz-transform-origin: 50% 100%;
 -o-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;          
 transform-origin: 50% 100%;

 .ch-item:hover .ch-thumb,.ch-item:focus .ch-thumb{    
 -webkit-transform: rotate3d(1,0,0,-180deg);       
 -moz-transform: rotate3d(1,0,0,-180deg);           
 -o-transform: rotate3d(1,0,0,-180deg);   
 -ms-transform: rotate3d(1,0,0,-180deg); 
 transform: rotate3d(1,0,0,-180deg);

Step 2: Insert a panel component and make the panel width and height as ‘auto’.

Panel in SAP BusinessObjects Design Studio

Step 3: Inside the panel component, insert a grid layout as a child component.

Step 4: Convert the grid layout into a Fiori-like tile by applying the CSS Class. To do this, enter the CSS class as “ch-thumb” to the Grid Layout Display property.

KPI Tiles in SAP BusinessObjects Design Studio

Step 5: Add the required chart behind the tile and add a data source to the chart.

Charts in SAP BusinessObjects Design Studio

Step 6: Now, run the application and hover over the KPI tile. The KPI tile will flip downwards and the chart will be displayed as shown below:

Rollover Tiles in SAP BusinessObjects Design Studio

The CSS code provided above for this type of roll over transition is called Downward flip. Click here to view the CSS code for more transition types.

This completes our discussion and review of Rollover transition for a KPI Tiles when hovering over it.  In my next blog, we will take a look at Rollover transition when you click on the KPI Tile. Watch this space for that discussion 🙂


Learn More

Subscribe to our Newsletter

5920 Windhaven Pkwy
Plano TX 75093.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192