Skip to Content
Author's profile photo Former Member

Working With XML Views:Using Local styles & stylesheets


When thinking of custom applications in SAPUI5, the first thing strikes in mind is which kind of UI view that we are going to implement. Particularly in cases where there is tremendous CSS changes involves, people directly goes to Javascript views. The simple reason is adding CSS in JS views are easy for a beginner compare to XML views.


This blog intended to give an insight of using CSS styles in XML views.


1. Using external Style sheets in XML view
2. Using Local Style class in XML Views

Pre-requisite: Basic Knowledge in SAPUI5 using XML Views.


Scenario 1: Using external Style sheets in XML view-This is a case where tremendous Custom CSS needs to be added to the application.


Step1: Create a SAPUI5 application, choosing XML as view type. The result will have a XML view and controller as below

XML view1.PNG

Step2: Create a folder for CSS, under it create a .css file

xmlv view 2.PNG

Step 3: Go to index.html and include the external style sheet, created in step 2 as in below picture

xml view3.PNG

Step 4: Add styles classes to your .css file (created in step 2) and save it.

.header {

       display: block;

              width: 340px;

              padding: 15px;

              margin: 15px auto;


              box-shadow: 2px 3px 3px 0 rgba(63,31,0,.5);

              border-radius: 10px;

              text-align: center;

              text-decoration: none;


.link {

              display: block;

              width: 150px;

              padding: 15px;

              margin: 15px auto;

              background: white;

              box-shadow: 0 0 5px 0 rgba(63,31,0,.5);

              border-radius: 10px;

              text-align: center;

              text-decoration: none;

              -webkit-transition: .2s;

              transition: .2s;


.link:hover {

              -webkit-transform: rotate(-10deg) scale(2);

              transform: rotate(-10deg) scale(2);


.pquote {

                     float: left;

                     width: 100px;

                     background: #ddf;

                     font-weight: bold;

                     padding: 13px;

                     margin: 0 13px 13px 0;

                     border-radius: 5px;



Step 5: Add UI elements in view, include the above classes

<core:View xmlns:core=“sap.ui.core” xmlns:mvc=“sap.ui.core.mvc” xmlns=“sap.m”

              controllerName=“xml_cust_cs.HOME” xmlns:html=>


       <Page title=“SAPUI5 Tutorial”>


              <Label class=“header” text=“Working with XML Views:Using External Stylesheets” />



         <Text width=“100px”

         text=“SAPUI5 XML Overview”






         text=“The XML view type is defined in an XML file. The file name either ends with .view.xml or as an XML string. The                 file name and the folder structure together specify the name of the view that equals the SAPUI5 module name                   within the require/declare concept.”>






        text=“Click to know more”







Step 6: Save the Changes and test the application


xml view 4.PNG

xml view 5.PNG

Scenario 2: Using Local Style class in XML Views- Case where simple & minimal CSS involved

When there is a need to style only a particular UI element, with local style class, the below one give you the result

<Page title=“SAPUI5 Tutorial”>



                 .myText {






<Label  class=“myText”  text=“Working with XML Views:Using Local CSS Class” />



xml view 6.PNG

Feedbacks and suggestions are welcome! 🙂


Meganadhan S

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Very nice Post,really helpful and contains lot of information.



      Author's profile photo Vamsi Krishna Avvaru
      Vamsi Krishna Avvaru

      Excellent Blog for beginners on SAP UI5.