Roelof Albers
Read all my blogs
For a while now, SAP supports the webtechnology SAPUI5, SAP’s variant on HTML5. When working with SAPUI5, all help is welcome, so let me share some of my personal notes.This post contains some handy code snippets and resources that I have been saving up for my own reference.
Browser support for SAPUI5
Not all browsers are currently supported. Want to know exactly which one you can use?
XML Views & Fragments
I personally prefer XML Views above Javascript Views, as they are easier to build and the readability is much better.
This is an example of a XML View we have used.
<core:View xmlns:core=“sap.ui.core” xmlns:mvc=“sap.ui.core.mvc”
xmlns=“sap.m” controllerName=“view.showregistration.SessionRegistrations”
xmlns:html=“http://www.w3.org/1999/xhtml”>
<Page title=“{i18n>registrationsTitle}”>
<customHeader>
<Bar>
<contentLeft>
<Button id=“back” icon=“sap-icon://nav-back”press=“handleNavButtonPress”
visible=“false”></Button>
</contentLeft>
<contentMiddle>
<Label text=“{i18n>registrations}” />
</contentMiddle>
<contentRight>
</contentRight>
</Bar>
</customHeader>
<subHeader>
<Bar id=“searchBar”>
<contentLeft>
<Select id=“filterSelect” class=“selectasbutton” change=“handleFilterChange”
icon=“sap-icon://filter” type=“IconOnly” autoAdjustWidth=“true”>
<core:Item key=“All” text=“{i18n>all}”/>
<core:Item key=“DidNotShow” text=“{i18n>didNotShow}” />
<core:Item key=“Show” text=“{i18n>show}”/>
</Select>
</contentLeft>
<contentMiddle>
<SearchField id=“searchField” search=“handleSearch”
liveChange=“handleSearch” width=“100%”></SearchField>
</contentMiddle>
<contentRight>
<Button icon=“sap-icon://refresh” press=“handleRefresh” />
</contentRight>
</Bar>
</subHeader>
<content><core:Fragment fragmentName=“view.fragments.Registrations”
type=“XML” />
</content>
<footer>
<Bar>
<contentRight>
<Button text=“{i18n>saveShow}” icon=“sap-icon://accept” press=“saveShows” />
<Button text=“{i18n>saveNoShow}” icon=“sap-icon://decline” press=“saveNoShows” />
</contentRight>
</Bar>
</footer>
</Page>
</core:View>
Within our XML View we use a Fragment. A fragment is no more then a reusable view.
<core:Fragment fragmentName=“view.fragments.Registrations” type=“XML” />
Check out these resources for more information:
http://scn.sap.com/community/developer-center/front-end/blog/2013/12/18/fast-sapui5-develop-tool(Tool to generate XML Views!)
http://scn.sap.com/docs/DOC-49095(Introduction to XML Views)
http://help.sap.com/saphelp_uiaddon10/helpdata/en/2c/677b574ea2486a8d5f5414d15e21c5/content.htm(XML Fragments)
Using Local storage
With the use of local storage your SAPUI5 application can run even without an internet connection.
In our example we are saving our data as JSON string into the local storage of the browser. We have created 2 functions to achieve this.
The first function is to save the data to the local storage that we have read from the server.
saveToLocalStorage: function (key, data) {
var dataJSON = JSON.stringify(data);
localStorage.setItem(key, dataJSON);
var bus = sap.ui.getCore().getEventBus();
bus.publish(“data”, “dataSaved”); //raise data saved event
}
Second the function to read the data from the local storage when there is no internet connection.
getValuesFromLocalStorage: function(key){
var valuesJSON = localStorage.getItem(key);
if(valuesJSON != null) {
returnJSON.parse(valuesJSON);
} else {
return null;
}
}
A third function was build to determine if we are online or offline.
appIsOnline: function()
{
$.ajaxSetup({ cache: false, headers: { “Accept-Language”:accept } });
$.ajax({url: myURL,
type: “GET”,
timeout:3000,
statusCode: {
200: function (response) {
var bus = sap.ui.getCore().getEventBus();
bus.publish(“connectivity”, “online”);
//read data from server
},
400: function (response) {
var bus = sap.ui.getCore().getEventBus();
bus.publish(“connectivity”, “offline”);
},
0: function (response) {
var bus = sap.ui.getCore().getEventBus();
bus.publish(“connectivity”, “offline”);
}
}
});
}
More information:
http://scn.sap.com/docs/DOC-45756(Good offline example)
Internationalization and localization (i18n)
In our project we have created a new folder for our translations.
Add the following line to your index.html to tell the framework that this folder contains resources we need.
sap.ui.localResources(“i18n”);
In your initialization method, create a Resource Model and let the framework know.
// set i18n model
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : “i18n/messageBundle.properties”,
bundleLocale: locale
});
sap.ui.getCore().setModel(i18nModel, “i18n”);
SAPUI5 provides 2 options to use the texts in your views (i.e. using the JavaScript module jQuery.sap.resources or using Data Binding). In this case we have used Data Binding.
For example in our XML View:
<Listid=“list” noDataText=“{i18n>noDataText}”>
Where noDataText is defined in our messageBundle.properties like this:
noDataText=No entries found
Want more info about internationalization in SAPUI5. Check out:
Receive our weekly blog by email?
Subscribe here:
