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.
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.
- Create a new folder css and fileinside the folder
- Configure in manifest.json
- Execute the application beforeapplying CSS
- Apply the custom css in our style.cssfile
- 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 .
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
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.
Step by Step Tutorials on SAPUI5
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- How to send e-mail in SAPUI5 Hybrid App?
- How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2
- Expression Binding Overview in SAPUI5
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 – List Control Using Formatters
- SAPUI5 – How to Apply CSS in UI5 Apps?
- SAPUI5 – Hybrid App Tutorial