Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 


In this blog, we will see,

  • How to apply custom CSS Styles in SAP UI5 application?

  • How to work with multiple language scripts (i18n properties) ?

  • How to consume an OData service in SAP UI5 Application?

Detailed steps to create a SAP UI5 application can be found in following link:


SAP UI5 Application project Structure:


Apply custom CSS Styles in SAP UI5 application:

  • We can apply custom CSS styles in SAP-UI5 application

  • For this we need to maintain "Styles.css" under 'WebContent' folder as shown below:

  • Styles.css: for example lets create a custom style for button.

    • /* Button Style */
      background-color: red;
      font-style: italic;
      height: 2.850rem;
      border-style: solid;
      border-color: greenyellow;

  • To apply this style to control view, we need to following things:

    • Give reference of 'Styles.css' file in 'Component.js'

    • Use following to apply it to view controls

      • Syntax:    class="customCss_ForButton

      • for e.g.:    <Button text="{i18n>PgMst_BtnTxt1}" press="pressGetMaterial" type="Accept" class="customCss_ForButton"/>

  • Testing:

    • Before custom style

    • After Custom style



i18n Perperties in SAP UI5 application:

  • We can maintain multiple language scripts for Labels, Titles, Header texts, Messages etc in  SAP-UI5 application using i18n property concept.

  • Based on default browser language, respective script can get automatically selected in SAP-UI5 application.

  • Suppose, we want to have two language script in my SAP-UI5 application

    1. Hindi

    2. English

  • Then i18n property path will look like as below [WebContent -> i18n -> scriptFiles]:

    • Where:

    • Hindi Script


      • #Title for 'Master' page | Hindi script
        PgMst_Title =\u092B\u093F\u092F\u094B\u0930\u0940 \u092A\u0930\u0940\u0915\u094D\u0937\u0923 \u0938\u0902\u0916\u094D\u092F\u093E \u090F\u0915
        PgMst_BtnTxt1 =\u0938\u0948\u092E\u094D\u092A\u0932 \u0906\u0939\u094D\u0935\u093E\u0928
        PgMst_BtnTxt2 =\u0938\u0930\u094D\u0935\u093F\u0938 \u0906\u0939\u094D\u0935\u093E\u0928
        PgMst_BtnTxt3 =\u0905\u0917\u0932\u093E \u092A\u0947\u091C

        #Title for 'Details' page | Hindi script
        PgDtl_Title =\u0935\u093F\u0938\u094D\u0924\u0943\u0924 \u092A\u0943\u0937\u094D\u0920
        PgDtl_Lbl1 =\u0935\u093F\u0938\u094D\u0924\u093E\u0930 \u092A\u0943\u0937\u094D\u0920 \u092E\u0947\u0902 \u0906\u092A\u0915\u093E \u0938\u094D\u0935\u093E\u0917\u0924 \u0939\u0948

    • English Script

      •              : default script if no lang found

      •        : when app is been accessed in browser

      •  : when app is been accessed within Eclipse-PlatForm

      • same details is present in all three files

      • #Title for 'Master' page | English script
        PgMst_Title =Fiori Example-1
        PgMst_BtnTxt1 =ModelJson
        PgMst_BtnTxt2 =ODataSrv
        PgMst_BtnTxt3 =NextPage

        #Title for 'Details' page | English script
        PgDtl_Title =Detail Page
        PgDtl_Lbl1 =Welcome to Detail Page

  • In i18n property scripts we define variable and assign languages specific values to them

  • To access i18n properties, we need to load them in SAP-UI5 application

    • Load i18n properties references in 'Component.js' file

    • Look at 'get_i18nProperties: function()' which gets i18n file references

    • And in 'createContent : function()', its been accessed.

    • 'Component.js'

    • var gv_i18nBundle;"ZTEST_APP.Component");
      sap.ui.core.UIComponent.extend("ZTEST_APP.Component", {

      metadata : {
      stereotype : "component",
      "abstract" : true,
      version : "1.0",
      library : "ZTEST_APP", //required for CSS reference
      includes : [ "css/Styles.css" ], //CSS style reference
      dependencies: { //external dependencies
      libs : ["sap.m",
      "sap.ui.layout" ], //the libraries that component will be using
      library : "sap.ui.core", //what library belongs your component to

      createContent : function() {

      // get
      var lv_oBundle = this.get_i18nProperties();

      Note: i18nModel needs to be called before root view 'sap.ui.view'
      i.e. before view creation
      so that bundle can be accessed at onInit() of Master Page
      gv_i18nBundle ={url : lv_oBundle.oData.bundleUrl});

      // create root view
      var oView = sap.ui.view({
      id : "app",
      viewName : "ZTEST_APP.view.App",
      type : "JS",
      viewData : { component : this }

      // set
      oView.setModel(lv_oBundle, "i18n");

      // set device model
      var deviceModel = new sap.ui.model.json.JSONModel({
      isPhone :,
      listMode : ( ? "None" : "SingleSelectMaster",
      listItemType: ( ? "Active" : "Inactive"
      oView.setModel(deviceModel, "device");

      // done
      return oView;

      get_i18nProperties: function(){

      Set i18n model | for Use of Localized Texts in Applications
      On Eclipse PlateForm: lv_Locale = en-US
      If BrowserDefaultLang English: lv_Locale = en
      If BrowserDefaultLang Hindi: lv_Locale = hi

      // Get browser's language
      var lv_Locale = window.navigator.language;

      var lv_i18nPath;
      lv_i18nPath = "/i18n/i18n_" + lv_Locale + ".properties";

      //set default English script ""
      if(lv_Locale != "hi" || lv_Locale != "en" || lv_Locale != "en-US"){
      lv_i18nPath = "/i18n/";

      var lv_bundleUrl = $.sap.getModulePath("ZTEST_APP", lv_i18nPath);
      var lv_oBundle = new sap.ui.model.resource.ResourceModel({
      bundleUrl : lv_bundleUrl, //"./i18n/"
      return lv_oBundle;



  • The i18n defined variables will be accessed in views

    • To refer variable of i18n properties, following syntax is been used:

      • Syntax:            "{i18n>varName}"

      • For Example:  "{i18n>PgMst_Title}"

    • View 'Master.view.xml'

      • <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m" controllerName="ZTEST_APP.view.Master" xmlns:html="">
        <Page title="{i18n>PgMst_Title}">
        <Button text="{i18n>PgMst_BtnTxt1}" press="pressGetMaterial" type="Accept" class="customCss_ForButton"/>
        <Button text="{i18n>PgMst_BtnTxt2}" press="pressODataSrv" type="Emphasized" />
        <Button text="{i18n>PgMst_BtnTxt3}" press="pressNextPage" type="Emphasized" />
        <List id="idList1" mode="{device>/listMode}" items="{/listItems}">
        <StandardListItem title="{MATNR}" />

    • View 'Details.view.xml'

      • <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m" controllerName="ZTEST_APP.view.Details" xmlns:html="">
        <Page title="{i18n>PgDtl_Title}" showNavButton="true" navButtonPress="backPress">
        <Label text="{i18n>PgDtl_Lbl1}" design="Bold" />

  • Testing:

    • English-Script: When browser's default language is English 'en', then script '' is been referred in application

    • Hindi-Script: When browser's default language is Hindi 'en', then script '' is been referred in application


Consume OData service in SAP UI5 Application:

  • In SAP-Fiori, one OData Service is been created which consumes RFC of SAP-R3 (back end) system

  • Detailed steps to create a OData service, can be referred from below links:

  • OData Service url is as below, which returns Material details from RFC of SAP-R3, which we will consume in SAP UI5 application

    • /sap/opu/odata/sap/ZTEST_ODATA_SRV/MaterialListSet

  • To consume this OData Service in SAP UI5 application, in 'Master' Page, we create a button, and on click event of this button, we call OData-Service:

  • Button Name:            ODataSrv

  • Button Event Name:  pressODataSrv

  • View 'Master.view.xml':

    • Here we define button control and its properties

    • see code screen from above in i18n section

  • 'connectivity.js'

    • Here we define OData Service url

    • File path: 'WebContent > view -> utils -> connectivity.js'

    • Code:

    • //OData Service URL: when testing APP in Eclipse local environment
      var serviceUrl = "proxy/http/fiori:8000/sap/opu/odata/sap/ZTEST_ODATA_SRV/";

      //OData Service URL: when testing app in SAP FIORI LAUNCHPAD
      //var serviceUrl = "/sap/opu/odata/sap/ZTEST_ODATA_SRV/";

    • When we plan to deploy UI5 application in SAP-Fiori server, we need to comment url 'proxy/http/fiori:8000/sap/opu/odata/sap/ZTEST_ODATA_SRV/'

    • and un-comment url "/sap/opu/odata/sap/ZTEST_ODATA_SRV/"

    • because application when accessed from Fiori-Launchpad, it takes host and port details from Launchpad itself.

  • View 'Master.controller.js':

    • Controller page, weher event is handled to call OData Service.

    • 1st when page load, we call OData-Service with url path "/sap/opu/odata/sap/ZTEST_ODATA_SRV/" and set its model to page view

    • 2nd one button click event "pressODataSrv", consume OData-Service's specifc EntitySet url path for fecthing RFC details:

    • Url path: "/sap/opu/odata/sap/ZTEST_ODATA_SRV/MaterialListSet"

    • See functions:

      1. onInit : function()

      2. pressODataSrv: function()

    • Code:

      sap.ui.controller("ZTEST_APP.view.Master", {

      onInit : function() {

      //Load OData Service
      var oModel = new sap.ui.model.odata.ODataModel(serviceUrl, true);


      pressODataSrv: function(){

      //Get list control reference
      var list = this.getView().byId("idList1");

      //Frame Url with EntitySet
      var url = serviceUrl + "MaterialListSet";

      //Call OdataService, function(data) {

      //Read output
      var result = data.results;

      //set JSONoutput to a JSONModel
      var oModel = new sap.ui.model.json.JSONModel();
      listItems : result

      //Set output to ListControl

      }, function(err) {
      var errTxt = err.message + "\n" + err.request.requestUri;, sap.m.MessageBox.Icon.ERROR, "Service Error");

      pressNextPage: function(evt) {
      var context = evt.getSource().getBindingContext();"Details", context);

      pressGetMaterial : function(evt) {
      var sample = $.sap.getModulePath("ZTEST_APP", "/model/sampleData.json");
      var oModel = new sap.ui.model.json.JSONModel(sample);

      //Set JSONModeloutput to ListControl
      var list = this.getView().byId("idList1");


  • Testing:

    • Click on button "ODataSrv"

    • Debug Screen-1, here we can url input

    • Debug Screen-2, here we can see returned output

    • Post Call -> output items get filled up in List

  • Thus we have consumed OData Service in SAP UI5 Application.

Labels in this area