Implementing CSS in SAPUI5 Application
Implementing CSS in SAPUI5 Application
This is my first document to SCN community. I hope this will help a lot of UI5 beginners. In this document I am going to focus on CSS implementation in our SAPUI5 application.
Suppose this is a simple example of a Button element.
<script>
var button = new sap.ui.commons.Button(“buttonId”,{
text: “Press Me!!!”,
helpId: “Press Me”,
press: function(){
alert(“Button has been pressed.”)
}
});
button.placeAt(“content”);
</script>
</head>
<body class=“sapUiBody” role=“application”>
<div id=“content”></div>
</body>
Method 1:-
- Give an ID to your UI element like in this example I have given “buttonId”.
- Now for implementing custom CSS to this button write a style tag as we do in CSS and basic HTML within <head> tag.
<style type=“text/css”>
#buttonId {
color: green,
font-family: Arial;
font-size: 14px;
background-color: pink;
width: 300px;
height: 70px;
}
</style>
With this simple code we have given custom CSS style to our button.
Method 2:-
- Define a custom style sheet like above for a class using dot(.) before name.
<style type=“text/css”>
.myButton {
width: 300px;
height: 70px;
}
</style>
- Use the function of sap.ui.core.Control that is addStyleClass(“myButton”). In this case for this button we will write button.addStyleClass(“myButton”);
Here is the code for refrence.
<style type=“text/css”>
.myButton {
width: 300px;
height: 70px;
}
</style>
<!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-ui–libs‘ if required –>
<script>
var button = new sap.ui.commons.Button(“buttonId”,{
text: “Press Me!!!”,
press: function(){
alert(“Button has been pressed.”)
}
});
button.addStyleClass(“myButton”);
button.placeAt(“content”);
</script>
</head>
<body class=“sapUiBody” role=“application”>
<div id=“content”></div>
</body>
Method 3:-
For this I have written a code for tooltip( sap.ui.commons.RichTooltip ) like this.
<script>
var oTextField = new sap.ui.commons.TextField({
valueState : sap.ui.core.ValueState.Error
}).placeAt(“content”);
var sHtml = “The rating specifies the trustworthiness of the account. You can choose between the following values:<br>”;
sHtml += “<ul>”;
sHtml += ‘<li><strong>A:</strong> Highly trustworthy</li>’;
sHtml += “<li><strong>B:</strong> In generel trustworthy but some weak moments</li>”;
var oRttTextField = new sap.ui.commons.RichTooltip({
text : sHtml
});
oTextField.setTooltip(oRttTextField);
</script>
</head>
<body class=“sapUiBody” role=“application”>
<div id=“content”></div>
</body>
Now for implementing CSS to this tooltip,These are these procedures I followed.
1. I created the application.
2. Then Right Click on tooltip -> Inspect Element.
3. Then developer’s tool will open in chrome like below.
4. Now here I see a CSS class which is setting text style to this tooltip.
5. I made some changes at that CSS class like this.
6. Now I can see the changes which I have made in that class to Tooltip element.
Note:- Don’t refresh browser otherwise that custom data will be lost as we are temporarily doing this in browser only.
7. Copy that chanes and put this in your CSS style like this.
.sapUiFTV {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color: blue;
}
Following this third method we can design our custom CSS for many elements. This overrides the default CSS provided by SAP libraries. This method takes some time for inspecting element to which you want to make changes and finding the exact location.
Always try to click on the element or field to which you want to make changes. For example i right clicked on tool-tip popup not on the Text-box. If i will do that on Text-Box then i will see styles related to text-box.
Sometimes it will take more time if you don’t have much more idea about CSS. Just take some basic idea regarding CSS from anywhere if you don’t have any idea about it, this is very easy.
Thank you.
Regards
Dhananjay
Helpful for a newbie like me. I made my first application's GUI intresting with custom CSS. great work. SCN is good place to learn. Thank you.
Hie nice blog.
Can you tell me how do we add two style classes for one control??
Thank you,
Best Regards,
Chetna
Hi Chetan,
What do you mean by this?? It is something like a button in which you hover and color changes from one to another?? If we will add two classes to the same element then later one will override the former one. Please explain your scenario. 😕
Hi Dhananjay,
Excellent Documentation. Very much helpful for SAP UI5 learner. 🙂
Thank you Swadhin for these kind words. 🙂
Is it possible to use CSS in a separated file? Like we do in regular web applications and in html we just call tinha file with all the css on it?
Yes, and that is exactly how it should be done too 😉 Putting it inline is a pretty bad example indeed...
Simply include a <link ref="stylesheet" type="text/css" href="/path/to/your/styles.css"></link> in your index.html file
Thank you Robin, it was very helpful.
hi Robin,
There are reasons for inline css to exist, don't try to say "it's a bad example" or "it's bad practice" - you end up guiding people in the wrong direction because you favor A over B for no good reason.
Somehow UI5 now is about "Components" (which are not components in real terms) and your css file should be included in the manifest.json basically, due module resolution..
Using the link ref could and would certainly cause issues when running on Fiori Client (mobile) and running over desktop (application being delivered from GW BSP) where URL's resolve quite differently.
Cheers,
Dan.
You are definitely right in saying that the CSS should be part of the modularization, so yes, I fully agree with you here 🙂
However, defining custom CSS in a HTML file is certainly bad practice, the most important reason being the extra bytes are loaded everytime (instead of being pulled from a cached CSS file)
Easier maintenance of your HTML file and separating content (HTML) from style (CSS) is another reason
It may be a personal preference, but it's one many agree on
well Robin,
what I meant was, avoid using the word "bad practice" because new developers would actually "fall" for this; you do not need to go far to see "inline css" being used in many circumstances and as I said before there are usages for inline css reason why it has not been removed or discontinued.
about "bytes" - well, you do forget that there's heaps of dom and style manipulations happening with $.css() in SAPUI5 and those are loaded dynamically by javascript and I can tell you, the amount of bytes are just the same because the js file is loaded once..
however, opening and closing the dom to apply dynamic styles (or dom tree manipulation) is really expensive so you end up with a heavy as application.. in fact, all SAPUI5 applications suffer this but no one really seems to care..
😉
Cheers,
Dan.
Hi Dhananjay,
Great work!!!! it reflects me how to debug the style.
Thanks,
sudarshan
Thanks for this document!
I am so happy about every input for SAPUI5-beginners 🙂
"Following this third method we can design our custom CSS for many elements. This overrides the default CSS provided by SAP libraries."
My question is that any change in .sapUiFTV will reflect in all objects who implement this class. How can I differentiate that some objects take this customizing and other remains as standard from SAP?