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

SAP UI5 Application project Structure:

Our SAP UI5 application’s project structure is as follows:

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);
},

});