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

[shankarsgs]

Metro UI is the design language spoken by the recent version of Microsoft, the Windows 8 series. Metro aims to have a unified design across multiple platforms of the Windows 8, Windows Phone 8, Windows Surface and other Touch enabled devices powered by Microsoft Windows 8 Operating system.

If you had seen Metro UI/worked with Metro UI and would like to bring in the same look and feel inside your SAP Design studio dashboard by the power of CSS, this step guide is for you. This is a step by step guide that describes how to create metro layout in SAP Design Studio dashboards.

Metro Layout Dashboard can be used to develop dashboards for Microsoft Surface/ Tablet / Touch enabled Desktops powered by Windows 8 to leverage the devices screen and also to get a Unified look and feel.

Figure 1: SAP Design Studio dashboard in metro layout

The final Application looks something like this with the Metro Tiles and Transition. You could add Dashboard and modify the colors as per the dashboards requirement.

Creating the Layout

1. Open SAP Design Studio from the Start Menu by clicking on the start menu and typing Design Studio.
2. Design Studio opens in Local mode where we can create the dashboard and later publish it to BI platforms
3. Click on the menu Application -> New and enter a name for your application and create an Analysis Application.

Figure 2: Creating a new application in SAP Design Studio

4. Drag and drop a Panel component from the list of available Container Components to your empty application.

Figure 3: Drag & drop panel component in SAP Design Studio

Figure 4: Blank panel in SAP Design Studio

Note
Panels are not meant to be responsive by default in Design studio since we use absolute layout. If you need your dashboard to be responsive, either use Grid box or define CSS Media queries

5. This Panel is going to be our base Panel. So give it the name BASEPANEL from the Properties tab in the right. Also set the CSS class to container in the Display property of the Panel from the properties tab.

Figure 5: Base panel properties in SAP Design Studio

6. Set the properties of the Layout as shown in the figure below

Figure 6: Layout properties

7. Add a Text inside the panel from the Basic components present in the Components tab. This text is the heading of the Dashboard. Navigate to the properties of the Panel and set the name of the Text as HEADING and set the CSS class as title as shown below

Figure 7: Heading of the SAP Design Studio Dashboard

8. Set the Layout properties as shown in the figure below

Figure 8: Layout properties

9. Next Add a Panel which will hold all the Dashboard elements for us. In the properties of the Panel, set the panel name to WRAP and set the CSS class as wrap and set the Layout properties as shown in the figure.

Figure 9: Panel that holds SAP Design Studio dashboard elements

10. Now add four Panels inside the WRAP panel. These panels are going to be our tiles with different colors. Name them as TILE_1, TILE_2, TILE_3 and TILE_4 and set the CSS class as follows:

Figure 10: Colors of the panels in the metro layout

Figure 11: Layout – Work in progress

11. Add a Page book from the Container components inside the WRAP Panel. Name the Page book as Page book contains pages of panels which can be used to separate the elements with pagination.

12. Right click on the HOLDER from the outline tab present in the left of the Design studio and click on create child and click on Page to create a new page inside the page book.

Figure 12: Creating new page in the pagebook

13. Three pages are added. Delete the extra third page if necessary or add more pages as you need.

14. Select PAGE_1 and add two panels inside it. These panels are also going to be our Metro tiles.

Figure 13: Metro layout

15. Similarly add two more panels in PAGE_2

16. Now set the following CSS styles to the Panel:

Figure 14: More tiles

17. Add two Buttons from Basic Components in the left, BUTTON_1 in PAGE_1 with CSS class as arrowright and BUTTON_2 in PAGE_2 with CSS class arrowleft. This buttons acts as arrows and aid in navigation of the pages.

18. Set the height and width of both the buttons as 10 from the Layout properties, and remove the text “Button” from the Display properties.

Figure 15: Button properties

Now the Layout is done. Next is adding the CSS to get the effect of Metro. In Part-2 of the Guide, we will be adding the CSS to get the look and feel of Metro UI.

You can download the complete Application file from this guide at https://github.com/sgsshankar/SAP-Design-Studio-Metro-Layout