Skip to Content

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

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

Fonts

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(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);


Container

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.


.container{
 -webkit-transform:scale(0.9);
 background:#0f6d39;
 color:#fff;
}


Wrapper

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


.wrap{
 -webkit-columns: 300px;
 -moz-columns: 300px;
 columns: 300px;
 -webkit-column-gap: 40px;
 -moz-column-gap: 40px;
 column-gap: 40px;
}



Box

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


.box{
 overflow:hidden;
 font-size:13px;
 padding:10px;
 display:block;
 float:left;
 margin:5px;
}


Title

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


.start{
 font-family: "Open Sans", arial;
 font-weight:300;
  float: left;
  width: 55%;
 font-size: 40px;
}
.tile{
  padding: 30px;
}


Colors

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.


.lightgreen{background:#99b433;}
.green{background:#00a300;}
.darkgreen{background:#1e7145;}
.magenta{background:#ff0097;}
.lightpurple{background:#9f00a7;}
.purple{background:#7e3878}
.darkpurple{background:#603cba}
.darken{background:#1d1d1d}
.teal{background:#00aba9}
.lightblue{background:#eff4ff;}
.blue{background:#2d89ef}
.darkblue{background:#2b5797}
.yellow{background:#ffc40d}
.orange{background:#e3a21a}
.darkorange{background:#da532c}
.red{background:#ee1111}
.darkred{background:#b91d47}


Arrows

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 {
 display:none;
}


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.

PAGE_1

PAGEBOOK_1.setSelectedPageIndex(1);

PAGE_2

PAGEBOOK_1.setSelectedPageIndex(0);

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 https://github.com/sgsshankar/SAP-Design-Studio-Metro-Layout

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Thatoyame Lolwane

    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.

    Regards,

    Thatoyame

    (0) 
    1. Shankar Narayanan SGS 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.

      Regards

      Shankar

      (0) 

Leave a Reply