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

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.

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