The coolest SAP UI is on SDN, it is SAP UI5 (Beta). JQuery library based SAP UI5 is supposed to make the user free from SAP GUI usage. This document explains how to change SAP UI5 look and feel and make the UI standardized across the organization.
Every Organization standardizes look and feel of their internal and external web application. Some cases look and feel of web application carries the brand name of the company. In this document we will know how to change SAP UI5 look and feel as per the organization web template standard.
PREREQUISITE:
Download SAP UI5 Beta from SDN Link. Unzip downloaded content and Place demokit-static folder in web server. I hosted SAP UI5 on PHP server to create this how to document.
This document shows how to change the look and feel using Mozilla Firebug plugin. So we need to have Mozilla and also need Firebug plugin installed.
Who can understand this document?
We will change CSS of SAP UI5. Basic knowledge of HTML and CSS helps the developer understand this document.
What we are going to achieve?
| SAP UI5 Standard Look and Feel | SAP UI5 Custom Look and feel |
|---|---|
 |  |
Above table shows the screen shot of SAP UI5 standard look on the left hand side and on right hand side it shows custom look and feel of SAP UI5. All we did is changed standard CSS around SAP UI5.
Advantage: Changing standard CSS still keeps the functionality same as is. In case of forced added CSS on UI elements can breaks some code where event is attached to the CSS.
Disadvantage: Newer version of SAP UI5 library will remove customized code. ( Solution will be provided in another white paper)
Make over starts here:
Step 1: Open demokit-static on Mozilla.
Step 2: Click on Firebug icon located on the left hand side of Mozilla browser tool-bar to start
Step 3: Firebug debugger opens up at the buttom of the page. Mostly we will do changes at right hand of the debugger in this exercise
Changing header - #1:
Let’s start with the easiest exercise. To make the start easy we are going to change the header text color of SAP UI5 initial page.
This is the standard look of SAP UI5. If we know the name of the CSS it is easy to modify and change the color.
Firebug helps to find out the CSS within two clicks. In this document we will be using firebug inspection button 
to find out the CSS attached to the UI element.
Step 1: Click on inspection button and click on the header text. Firebug debugger will look like the screen shot below. Right hand side you see the HTML tag and on left hand side you see attached class to the tag.
Step 2: 
is the class which is responsible for the color of the text. Click on the value of color and change it as per your choice
Note: I have decided to get a blue and black theme. So as per the example I have provided #6698FF.
Final Look after the exercise shown below
Try to change the font size and font family before you move on to next exercise.
Adding code to the CSS file:
Once you are happy with the look and feel of the page you need to make the changes permanent.
Step 1: Click on the name of the css file to know the path of the CSS file you need to do the changes
This will open up the CSS file on the left hand side with the changes you made. Click on library.css to know relevant CSS path 
Tick marked file is the target CSS file we need to change in server.
Step 2: Select all changes from firebug debugger and paste it on the CSS file and save
Quick changes some more UI Look and feel:
Navigation tab:
In this exercise we are going to change the look and feel of the Navigation tab:
Standard look of navigation tab shown below:
Step 1: Inspect selected tab. In this example we are using TESTSUITE as a selected tab
Step 2: Change the value of color as shown below
I made it blue. Screen shot shown below:
Step 3: Inspect un-selected tab text and change color.
Changes shown below:
You can add font family to make the font more attractive.
Note : Do not forget to change CSS file to make the changes permanent.
Table Object:
Open http://localhost/demokit-static/#test-resources/sap/ui/table/Table.html this will show you the table of SAP UI5.
Inspect column header of the table and change the CSS as shown below:
This will change the table header look
changes you can try on page
Now you know the how to change standard look and feel of SAP UI5 without compromising UI functionality.
Some more changes on table shown below:
You can change text alignment in the table cell:
Summary of the story
Customer is King. To make the king happy make the end users happy. SAP UI5 gives the flexibility to work on light UI. UI look and feel attracts end users to use the functionality.
During web application development developers forget to assess end users and requirement providers forget about the end user’s skill set. In web development it is very important to know which type of user is going to use the application.
Lazy User: Users who like to work with mouse
Slow user: They use both mouse and key board
Busy user: They like hot keys.
SAP UI5 has all these supports. During requirement gathering and development time usage of this functionality makes the user happy work on the Application.
- SAP Managed Tags:
7 Comments
