Hello folks,
In this blog, I will try to explain how CSS works in SAPUI5
application. As you must know, CSS is used for presentation purposes, i.e how the elements should be rendered on the
screen. Using CSS, one can control the color of Text, the style of fonts,
spacing, background images, and on and on.
Taking about applying CSS in SAPUI5 application, well it can
be done in the following ways:
- · External style sheet
- · Internal style sheet
- · Using Chrome tools
Watch the video for better understanding:
External Style Sheet
External Style Sheet
This is the best way to style elements, here a separate .css
file is maintained for style purpose. The entire look an application can be
changed, just by changing a single file. Normally it is named as style.css. We need to provide the path to
the .css file, most of the time, it is provide in the index.html file, since
the latest release, sap insist on using manifest.json file where the reference
to the external .css file can be given. I will show you both the ways.
Reference in the index.html file
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta http-equiv='Content-Type'
content='text/html;charset=UTF-8'/>
<link rel="stylesheet" type="text/css" href="util/style.css"/>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.viz"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="sync"
data-sap-ui-resourceroots='{
"com.vikalp.dealermgmt":"./"
}'
data-sap-ui-preload=''>
</script>...
Reference in the manifest.json file
"resources": {
"css": [
{
"uri":
"css/style.css"
}
]
}
This is how, style.css looks
body{
background-color:transparent !important;
background-image:url(../util/images/bgImage.jpg) !important;
background-size: cover;
}
.dealerButton{
justify-content: flex-end
}
Internal Style Sheet
Internal Style Sheet is mainly used, for a particular element. Internal style is
defined within the <style>, within the <head> in an html page, i.e
in the index.html page.
Suppose, there is a
scenario to style a particular button then this method is best suited.
<
style type ="text/css">
#buttonId {
color: Blue, font-family: Arial;
font-size: 10px;
background-color: Orange;
width: 400px;
height: 100px;
}
</
style
Using
Chrome Tools
This is the third way of adding style, to a particular section
of the screen. I will show how this is done.
I have made a sample application, in this I want to change the
color of the text “Age Brackets” to blue. To do this, I opened the chrome Dev
tools, and selected the element Age brackets
Select the corresponding CSS code, just by selecting the inspect Element
Now, in the bluish portion of the code seen above, change the
fill field to blue, which is previously black(#333333)
Now, copy this piece of css code and paste in a .css file.
.sapUiABC {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color: blue;
}
Using this method, we are able to provide style to the
appropriate element, since we can directly right click the element and inspect
element and change the CSS properties, thereby overriding the default CSS
provided by SAP libraries. There is a new feature from sap, i.e UI5 inspector
which is truly awesome and will help the cause. Maybe in my next blog would
cover that topic too. Till then see you!!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon