Skip to Content

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
/wp-content/uploads/2013/04/image003_205694.png /wp-content/uploads/2013/04/image004_205695.png

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.

/wp-content/uploads/2013/04/image005_205696.png

Step 2: Click on Firebug icon located on the left hand side of Mozilla browser tool-bar to start

/wp-content/uploads/2013/04/image006_205697.png

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/wp-content/uploads/2013/04/image007_205698.png

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.

/wp-content/uploads/2013/04/image008_205699.png

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 /wp-content/uploads/2013/04/image009_205703.png 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.

/wp-content/uploads/2013/04/image010_205704.png

Step 2: /wp-content/uploads/2013/04/image011_205705.pngis the class which is responsible for the color of the text. Click on the value of color and change it as per your choice

/wp-content/uploads/2013/04/image012_205706.png

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

/wp-content/uploads/2013/04/image013_205707.png

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

/wp-content/uploads/2013/04/image014_205708.png

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 /wp-content/uploads/2013/04/image015_205709.png

/wp-content/uploads/2013/04/image016_205710.png

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/wp-content/uploads/2013/04/image017_205711.png

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:

/wp-content/uploads/2013/04/image018_205713.png

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

/wp-content/uploads/2013/04/image019_205714.png

I made it blue. Screen shot shown below:

/wp-content/uploads/2013/04/image020_205715.png

Step 3: Inspect un-selected tab text and change color.

/wp-content/uploads/2013/04/image021_205716.png

Changes shown below:

/wp-content/uploads/2013/04/image022_205717.png

You can add font family to make the font more attractive.

/wp-content/uploads/2013/04/image023_205718.png

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:

/wp-content/uploads/2013/04/image024_205719.png

This will change the table header look

/wp-content/uploads/2013/04/image025_205720.png

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:

/wp-content/uploads/2013/04/image026_205721.png

/wp-content/uploads/2013/04/image027_205722.png

You can change text alignment in the table cell:

/wp-content/uploads/2013/04/image028_205723.png

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.

To report this post you need to login first.

7 Comments

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

  1. John Patterson

    Hi Sukanya

    Thanks for sharing, I really like the format of the blog, very informative and very easy to follow.

    I did pick up your comment:

    Disadvantage: Newer version of SAP UI5 library will remove customized code.

    Why not create a custom theme?  the following shows how a custom theme can be located at a location which wont get overwritten.

    https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/ThemingFAQ.html

    If you have an ABAP stack with the User Interface Add-On installed you can find the Theme Editor at http://server:port/sap/public/bc/ui5_ui5/theme-editor/index.html.

    Hopefully this tool becomes publicly available, very easy to create custom themes, especially for SAPUI5 for Mobile which doesn’t support Firefox or Firebug.

    Cheers

    John P

    (0) 
    1. Stefan Lötterle

      Hi John,

      do you know when the Theme Editor with the User Interface Add-On will be published?

      I just wondered, because you already seem to know the url… 😉

      Regards

      Stefan

      (0) 
    2. sukanya mullick Post author

      Hi John,

      Thanks for your comment and thanks for sharing the link. I thought of writing another document on that. Now your comment helped me to concentrate on my other document of overriding events and methods of SAP UI5.

      Regards,

      Sukanya

      (0) 
  2. Ram k

    Hi sukanya mullick

    I tried to follow this blog. But I am unable to make the changes into the CSS file.It is not allowing me to Edit.Can you please correct me,

    I am supposed to develop a application which gives more look and feel.When I was browsing some info, I come across your nice blog and thought of using it to my requirement….

    Thanks…Ram

    (0) 

Leave a Reply