We have talked enough about the basics of SAPUI5. Routing and Navigation, Binding, Expressions, 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.
Steps:
- Create a new folder css and file inside the folder
- Configure in manifest.json
- Execute the application before applying CSS
- Apply the custom css in our style.css file
- Execute the application after applying 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:
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 our styles.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 after applying 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.
