Standard service - a fixed amount of work that is performed at a fixed price.  Post Service

  

Thursday, 06 June 2019 21:29

SAPUI5 – How to Apply CSS in UI5 Apps?

Written by  https://sapyard.com/sapui5-how-to-apply-css-in-ui5-apps/
Rate this item
(0 votes)

We have talked enough about the basics of SAPUI5. Routing and Navigation, Binding, Expressions,

target="_blank" rel="noreferrer noopener" aria-label="Add, Delete, Save buttons (opens in a new tab)" href="https://sapyard.com/add-delete-save-multiple-records-in-sapui5-part-3-save/" target="_blank">Add, Delete, Save buttons, Factory Functions, Master list Apps and many more. Today we would talk about the aesthetic look of the app. After all, a robust app should also look sleek and trendy. ?

When you want to beautify your app, you would need to befriend CSS. CSS – Cascading Styling Sheet is used for changing the look and feel of the UI display as per our custom taste.

CSS is used in SAPUI5 application, in order to incorporate the property which is not available in SAPUI5 frame work. Invoking CSS classes to our project can help us change our controls font, color, width, height, etc.

Scenario:

We are going to display a list which prints the name of the animal in black by default. After applying CSS we would see how the color of the field is being changed.

Also Read:How to Consume Custom OData in SAPUI5 Application

Steps:

  1. Create a new folder css and fileinside the folder
  2. Configure in manifest.json
  3. Execute the application beforeapplying CSS
  4. Apply the custom css in our style.cssfile
  5. Execute the application afterapplying CSS

Step – 1: Create a new folder css and file style.css inside the folder as shown below:

Step – 2: Configure in manifest.json

In our manifest.json we have configured the above created css file under resources area within SAPUI5 section as shown below:

Note: This screen displays in descriptor editor of manifest.json, after doing above step click save and you will see the code will be automatically generated in code editor as below:

Also Read:My First Program in ABAP on HANA

Step – 3: Execute the application before applying CSS.

Output before applying CSS:

Let us now look into the steps to change the CSS file and get the color code we need.

Select the name “tiger” in the above screen and right click->inspect.

In the dev tool inside Elements tab we can see the class for the label as:

On the right side you can see the property of the class, the default color of the text is black color with code:

Now click on the color box :

Click the color which you want to choose, I have chosen blue color as you see below the color code for blue color display.

Now copy the entire class .

Also Read:Check How I Created My First SAP OData Service

Step – 4 : Apply the custom css in ourstyles.css file

Paste the entire code which we have copied in the above step inside style.css file as below:

Since I am going to change only the color of the label I have removed rest of the property from the class that we copied in above step. Save it

Step – 5: Execute the application afterapplying CSS

Output:

From the above image you can observe the label color changed from black to blue as highlighted.

Play around with CSS. Keep experimenting. Surprise your customers with some pretty professional apps in SAPUI5. After all you are not just a backend developer any more. You are now a creator of delightful, pretty and responsive Apps. ?

You may import this CSS Project in WebIDE or Eclipse and check how we did it.

If you want to have real time discussions and resolutions, do join our SAP Technical Telegram Group where we have more than 4990+ active SAP consultants from 6 Continents.

Please Note: You need to install Telegram App on your mobile first and then you can join the group using the above link.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Step by Step Tutorials on SAPUI5

Read 358 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.