Overview:

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 Fiori – Custom App Implementation
  • Create a Fiori app using Eclipse

 

SAP UI5 Application project Structure:

  • Our SAP UI5 application’s project structure is as follows:
  • Note: here exampleProject is same as of above blog reference “Create a Fiori app using Eclipse“

 

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 */ .customCss_ForButton{ 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.:   
  • 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
      • i18n_hi.properties
      • #Title for 'Master' page | Hindi script PgMst_Title =u092Bu093Fu092Fu094Bu0930u0940 u092Au0930u0940u0915u094Du0937u0923 u0938u0902u0916u094Du092Fu093E u090Fu0915 PgMst_BtnTxt1 =u0938u0948u092Eu094Du092Au0932 u0906u0939u094Du0935u093Eu0928 PgMst_BtnTxt2 =u0938u0930u094Du0935u093Fu0938 u0906u0939u094Du0935u093Eu0928 PgMst_BtnTxt3 =u0905u0917u0932u093E u092Au0947u091C #Title for 'Details' page | Hindi script PgDtl_Title =u0935u093Fu0938u094Du0924u0943u0924 u092Au0943u0937u094Du0920 PgDtl_Lbl1 =u0935u093Fu0938u094Du0924u093Eu0930 u092Au0943u0937u094Du0920 u092Eu0947u0902 u0906u092Au0915u093E u0938u094Du0935u093Eu0917u0924 u0939u0948
    • English Script
      • i18n.properties              : default script if no lang found
      • i18n_en.properties        : when app is been accessed in browser
      • i18n_en-US.properties  : 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; jQuery.sap.declare("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.commons", "sap.ui.ux3", "sap.ui.table", "sap.ui.layout" ], //the libraries that component will be using library : "sap.ui.core", //what library belongs your component to }, }, createContent : function() { // get i18n.properties 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 = jQuery.sap.resources({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 i18n.properties oView.setModel(lv_oBundle, "i18n"); // set device model var deviceModel = new sap.ui.model.json.JSONModel({ isPhone : jQuery.device.is.phone, listMode : (jQuery.device.is.phone) ? "None" : "SingleSelectMaster", listItemType: (jQuery.device.is.phone) ? "Active" : "Inactive" }); deviceModel.setDefaultBindingMode("OneWay"); oView.setModel(deviceModel, "device"); // done return oView; }, get_i18nProperties: function(){ /* Set i18n model | for Use of Localized Texts in Applications Language: 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; if(lv_Locale){ lv_i18nPath = "/i18n/i18n_" + lv_Locale + ".properties"; } //set default English script "i18n.properties" if(lv_Locale != "hi" || lv_Locale != "en" || lv_Locale != "en-US"){ lv_i18nPath = "/i18n/i18n.properties"; } var lv_bundleUrl = $.sap.getModulePath("ZTEST_APP", lv_i18nPath); var lv_oBundle = new sap.ui.model.resource.ResourceModel({ bundleUrl : lv_bundleUrl, //"./i18n/i18n_en.properties" }); 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‘ 
      •
    • View ‘Details.view.xml‘ 
      •
  • Testing:
    • English-Script: When browser’s default language is English ‘en’, then script ‘i18n_en.properties’ is been referred in application
    • Hindi-Script: When browser’s default language is Hindi ‘en’, then script ‘i18n_hi.properties’ 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:
    • Create OData Service
    • Register OData Service
  • 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:
    • jQuery.sap.require("ZTEST_APP.view.utils.connectivity"); jQuery.sap.require("sap.m.MessageBox"); sap.ui.controller("ZTEST_APP.view.Master", { onInit : function() { //Load OData Service var oModel = new sap.ui.model.odata.ODataModel(serviceUrl, true); sap.ui.getCore().setModel(oModel); }, pressODataSrv: function(){ //Get list control reference var list = this.getView().byId("idList1"); //Frame Url with EntitySet var url = serviceUrl + "MaterialListSet"; //Call OdataService OData.read(url, function(data) { //Read output var result = data.results; //set JSONoutput to a JSONModel var oModel = new sap.ui.model.json.JSONModel(); oModel.setData({ listItems : result }); //Set output to ListControl list.setModel(oModel); }, function(err) { var errTxt = err.message + "  " + err.request.requestUri; sap.m.MessageBox.show(errTxt, sap.m.MessageBox.Icon.ERROR, "Service Error"); }); }, pressNextPage: function(evt) { var context = evt.getSource().getBindingContext(); this.nav.to("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"); list.setModel(oModel); }, });
  • 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.

New NetWeaver Information at SAP.com

Very Helpfull

User Rating: Be the first one !