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
- SAP Managed Tags:
14 Comments
