SAP Fiori – Consume OData Service, CSS, i18n properties in UI5 Application

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.:    <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:
  • 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 + "\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.