Skip to Content

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 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.:    <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
      • i18n_hi.properties
      • #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
      • 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
      • <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
        	xmlns="sap.m" controllerName="ZTEST_APP.view.Master" xmlns:html="http://www.w3.org/1999/xhtml">
        	<Page title="{i18n>PgMst_Title}">
        		<content>
        			<Bar>
        				<contentLeft>
        					<Button text="{i18n>PgMst_BtnTxt1}" press="pressGetMaterial" type="Accept" class="customCss_ForButton"/>
        				</contentLeft>
        				<contentMiddle>
        					<Button text="{i18n>PgMst_BtnTxt2}" press="pressODataSrv" type="Emphasized" />
        				</contentMiddle>
        				<contentRight>
        					<Button text="{i18n>PgMst_BtnTxt3}" press="pressNextPage" type="Emphasized" />
        				</contentRight>
        			</Bar>
        			<List id="idList1" mode="{device>/listMode}" items="{/listItems}">
        				<StandardListItem title="{MATNR}" />
        			</List>
        		</content>
        		<footer>
        			<Bar>
        			</Bar>
        		</footer>
        	</Page>
        </core:View>
        
        
    • 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="http://www.w3.org/1999/xhtml">
        	<Page title="{i18n>PgDtl_Title}" showNavButton="true" navButtonPress="backPress">
        		<content>
        			<Label text="{i18n>PgDtl_Lbl1}" design="Bold" />
        		</content>
        		<footer>
        			<Bar>
        			</Bar>
        		</footer>
        	</Page>
        </core:View>
  • 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:
  • 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 + "\n" + 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.
To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply