CSS in SAPUI5 Application



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:
  1. ·         External style sheet
  2. ·         Internal style sheet
  3. ·         Using Chrome tools
Watch the video for better understanding:


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!!
Previous
Next Post »