Skip to Content
Author's profile photo Shankar Narayanan SGS

Create Metro Layout in SAP Design Studio Dashboards: Step by step guide – Part 2

This post is about styling and defining the CSS for the metro look and feel of the Dashboards by adding CSS to the elements that was defined before and adding other functionality to it. This is a continuation of Create Metro Layout in SAP Design Studio Dashboards: Step by step guide – Part 1

For those who are new to CSS, you can check out this document Crazy CSS Fun with SAP Design Studio to know about how to use CSS.

Styling the dashboard

  1. Open a new file style.css using your favorite editor.
  2. Now apply the below CSS into the file and save the file inside the Analysis application folder.
  3. The complete CSS file is also attached along with this documentation.


All the fonts in the dashboard are defined as “Open Sans” by using font-awesome of bootstrap. Place the following code inside the style.css. This font rendering requires internet.

@import url(;
@import url(,300);


The container has the background green we need and set the font color as white. It is also used to add elements. Place the following styles.



The wrapper is used to hold the sliding elements and is identified by the wrap class. The pagebook is added inside the Wrapper. Use the following CSS for the wrap

 -webkit-columns: 300px;
 -moz-columns: 300px;
 columns: 300px;
 -webkit-column-gap: 40px;
 -moz-column-gap: 40px;
 column-gap: 40px;


Box gives the box looks for all the tiles and also snaps the tile sizes for each of the box with relevant fonts and font size. Apply the following CSS to the box



Title defines the fonts, size for the Dashboard title. It resembles the Windows Metro tile title. Apply the following settings to the start class.

 font-family: "Open Sans", arial;
  float: left;
  width: 55%;
 font-size: 40px;
  padding: 30px;


Metro UI looks colorful. So define the colors in separate class which can then be assigned to different tiles.  The basic metro colors are defined.



Metro Arrows help in switching the pages. Please the following CSS for arrows.

.arrowright {
background: #2C2C2C;
font-size: 12px;
position: relative;
width: 1em;
height: 1em;
margin-left: -0.7em;
.arrowright::before {
bottom: -0.666em;
left: 0.8em;
position: absolute;
border-left: 1.2em solid #2C2C2C;
border-top: 1.2em solid rgba(44, 44, 44, 0);
border-bottom: 1.2em solid rgba(44, 44, 44, 0);
content: "";
.arrowleft {
background: #2C2C2C;
font-size: 12px;
position: relative;
width: 1em;
height: 1em;
margin-right: -0.7em;
.arrowleft::before {
bottom: -0.66666666em;
right: 0.8em;
position: absolute;
border-right: 1.2em solid #2C2C2C;
border-top: 1.2em solid rgba(44, 44, 44, 0);
border-bottom: 1.2em solid rgba(44, 44, 44, 0);
content: "";

Removing Paginator from Pagebook

The paginator does not look suitable for the dashboard style. So remove the paginator by applying the following style to it to remove the paginator.

#zen_PAGEBOOK_1_tf1-paginator {

Removing the button style

The default design studio button style hinders our arrow style. This can be removed by overriding the default button CSS with our own CSS.

.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd {
    border-color: none !important;
    background: none !important;
    box-shadow: none !important;
    border:none !important;
.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd {
    background-color: none !important;
.sapUiBtnS.sapUiBtnNorm {
    border: none !important;
.sapUiBtnS {
    outline:none !important;
.sapUiBtnFixedWidth {
    overflow: visible !important;

After adding all the styles, modifying the layout a little and mapping the Data the dashboard now looks something like this.

SAP Design Studio metro layout dashboard

Adding the Button Functionality

The arrow button helps to navigate to the pages in the pagebook, select the button in PAGE_1 and PAGE_2 and enter the following line in the On Click of Event property.





Animating the Pagebook

The metro transaction effect can be achieved by setting the Display property for the Pagebook. Select the pagebook and set the Transition effect as Slide In and Transition Direction as Horizontal. In order to swipe in Touch device, set Enable Swiping to true.

Now you would get a complete Dashboard with Metro layout. You can download the complete Design Studio Application from

Assigned Tags

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

      Hi  Shankar Narayanan.

      I have followed Step 1 which looks fine, however I am seeing no results after completing Step 2. Not sure where I am going wrong. I basically took downloaded all your files into my Analysis Application folder.

      What other settings would I need to do? By the way, I am using Noetpad ++ as my CSS editor.

      Your help will be appreciated.



      Author's profile photo Shankar Narayanan SGS
      Shankar Narayanan SGS
      Blog Post Author

      Hi Thatoyame,

      Once you place the application files in the respective directory, Are you able to see that application inside Design studio? If you are not able to see or if you want to customize and use it on your own application, you can download and use the CSS files that is in my github and use that in your own application.