Several years have passed since SAP, the world’s leading company in enterprise software domain, started development of the new client-side JavaScript framework known as SAPUI5 (initial internal codename is “Phoenix”). HTML5 and JavaScript were chosen as a basis for this new UI library and now it contains large number of controls and approaches, which can be very helpful for building exciting Web and Mobile applications.
Introduction to SAPUI5 (SAP OpenUI5)
Is SAPUI5 only one SAP specific framework, which can work with ODATA-services and inside SAP system landscape? Since recent time the answer is: no it isn’t. Now SAPUI5 is available under Open Source (Apache 2.0) license with a new name – OpenUI5, which is practically the same as the original one, but the difference is very small due to quite often source codes updates and, of course, some widgets are taken out from the open source version, like, for instance, charts controls.
Let’s dig into SAPUI5 (SAP OpenUI5) main features:
- Visual components. Right now there are two main branches: sap.ui controls and sap.m (on which the SAP Fiori application suites are built) controls, but using sap.m controls is recommended even for desktop applications.
- The possibility to create new controls.
- MVC methodology support.
- Views can be written in HTML, JavaScript, XML and JSON. But basically JavaScript-based views are recommended as the most dynamic and compact solution.
- Data models and data binding, the great possibility to keep view and model in sync and simplify view’s controller.
- Localization of applications.
- Mobile and Desktop browsers support.
Also it should be noted that SAPUI5 and SAP OpenUI5 came with support of jQuery (built on top of jQuery), popular front-end library which can help in Web application development especially with DOM manipulations. SAPUI5 is often compared with other frontend libraries like Angular.js, Backbone.js and Ember.js, but it has own widget library.
For the more detailed comparison of source codes you can check a collection of ToDo apps written with the help of different UI frameworks including SAPUI5.
SAPUI5 (SAP OpenUI5) in Details
Let’s have a brief overview of a simple SAPUI5 application to get the first impression of how this works in the real life. There are several main components in our sample application, let’s check them one by one:
#1 Index.html
The basis of the application is “index.html” – a single HTML file, which contains a container for the app, and initialization of the application script (code sample #1). Additionally we can include our own stylesheet files and JavaScript to this page like when we are working with usual HTML page. It is very important to write application root paths and component full names carefully.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<link href=”/static/css/main.css" media="all" rel="stylesheet" type="text/css" />
<title>App 0001</title>
<script
id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m, sap.ui.commons, sap.ui.table"
data-sap-ui-resourceroots='{
"sap.ui.demo.iwsm": “/static/”
}' >
</script>
<script>
new sap.ui.core.ComponentContainer({
name : "sap.ui.demo.app0001"
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Our “index.html” bootstraps the SAPUI5 libraries and serves main application’s component – app0001. And in our case that is all HTML code that we should write by ourselves. But let’s dive deeper.
#2 Component.js
In our main executable file “Component.js” (code sample #2) we are using component-based approach. Components might not present the full application, they can be smaller blocks of application’s functionality, in our case component will be placed at “content” container and it represents full application module.
jQuery.sap.declare("sap.ui.demo.app0001.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.app0001.Component", {
createContent : function() {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "sap.ui.demo.app0001.view.App",
type : "JS",
viewData : { component : this }
});
// set i18n model
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : "/static/js/i18n/messageBundle.properties"
});
oView.setModel(i18nModel, "i18n");
return oView;
}
});
Code Sample #2
Additionally component might have different app configurations and routing. SAPUI5 developers guide provides more information on how this part might be configured to cover all the needs of your application. Internationalization features are provided by i18n data binding and the sap.ui.model.resource.ResourceModel as a named model.
#3 Page01.controller.js
In common we will use the following technique: each view (which is written as a JavaScript view) has its own controller. View consists of different UI controls, controller consists of event handlers, AJAX and data manipulations. Such kind of approach allows us to develop more structured and well-formed applications. As an example, let’s take a look at one of the application controllers.
“Page01.controller.js”.
sap.ui.controller("sap.ui.demo.app0001.view.Detail", {
handleNavButtonPress : function (evt) {
this.nav.back("Master");
},
handleCancelAndExitPress : function (evt) {
//perform some actions
},
onDialogCloseButton: function (evt) {
//perform some actions
},
onInit: function (evt) {
var oParameters = {},
view = this.getView(),
that = this;
oParameters['report_id'] = this.byId("report_id").getText();
if (! this._dialog) {
this._dialog = sap.ui.xmlfragment("sap.ui.demo.app0001.fragments.BusyDialogLogout", this);
}
this._dialog.open();
jQuery.ajax("/actionprovider/close_wo/", {
dataType: "json",
data: oParameters,
type: "GET",
success: function(data){
if(data.errors.length == 0) {
var oModelDetails = new sap.ui.model.json.JSONModel();
oModelDetails.setData({ model: data.data });
view.setModel(oModelDetails);
} else {
//error occured
}
}
});
}
});
Code Sample #3
This application controller consists from several event handlers (“handleNavButtonPress”, “HandleCancelAndExitPress”, “onDialogCloseButton”, “onInit”). All actions except the first and last one are custom-coded and are not connected to SAPUI5 core functions. First event handles the situation when user presses navigation button at the top of the screen. Default event “onInit” is called once when the application starts, in this case we initialize application model (through AJAX) with new data coming from the web service. We are using RESTful web service with JSON payload as a data provider, but it is also possible to work with ODATA and XML.
#4 Page01.view.js
Usually JSViews has createContent method which helps to create all of the page content. Basically, simple views can use vertical/horizontal layout containers to prepare common markup of the page and additional controls like tables, lists and grids to display all of the page’s data. In our view we can see the basic example of how SAPUI5 data binding works: our controller has assigned model, which is a basic JSON object, containing different levels and nodes. In the view we can access data in this JSON model by addressing keys like “/employee/full_name/”, which is very helpful on large informational views. At the end of createContent method page UI control need to be passed as a return parameter.
If you need to manipulate CSS classes in your own stylesheet file you will need to assign new class name to each UI control which you may want to modify by adding them a classname as a string value: addStyleClass(“your-class-name”). Sometimes you may want to manipulate your controls in your view, in this case you need to make ID visible in the view namespace by adding it as a first parameter to UI element constructor: new sap.m.VBox(this.createId(“VBox”), { … });. Also there are several ‘repeatable’ controls in SAPUI5 like dropdowns and which should have a predefined “Template” element, where bindings are described. There is very large collection of UI controls on SAPUI5 developer guide, which could give a detailed explanation of each UI element including options and events/methods.
sap.ui.jsview("sap.ui.demo.app0001.view.Detail", {
getControllerName: function() {
return "sap.ui.demo. app0001.view.Detail";
},
createContent: function(oController) {
var oPage = new sap.m.Page({
title:"OPERATIONS LIST",
showNavButton:false,
navButtonText: "Countries",
navButtonPress:[oController.handleNavButtonPress,oController]
});
var userInfo = new sap.m.VBox("userInfoDetail", {
items: [
new sap.m.Label({text: "Employee"}),
new sap.m.Label({text: "{/employee/name}", design: "Bold"})
]
}).addStyleClass("user-info");
var userImage = new sap.m.Image("userImageDetail", {
src: "{/employee/thumbnail}",
height: "50px"
});
var pageHeader = new sap.m.HBox(this.createId("HeaderHBoxDetail"), {
items: [ userInfo, userImage]
});
var pageButtons = new sap.m.HBox({
items: [
new sap.m.Button({
text: "Cancel and Exit",
type: sap.m.ButtonType.Reject,
press : function(e) {
oController.handleCancelAndExitPress(e);
}
}),
new sap.m.Button({
text: "Contact Technician",
press : function(e) {
oController.handleContactPress(e);
}
}),
new sap.m.Button({
text: "Damage is Fixed",
type: sap.m.ButtonType.Accept,
press : function(e) {
oController.handleFixedPress(e);
}
}),
]
});
var verticalBox = new sap.m.VBox("VerticalBoxDetail", {
items: [pageHeader, pageButtons]
});
oPage.addContent(verticalBox);
return oPage;
}
});
Code Sample #4
Quite simple and clear, isn’t it?
Conclusion
As you can see SAPUI5 (SAP OpenUI5) provides an easy way for fast creating both lightweight and heavy web-applications, it has some particular qualities but in general this framework shouldn’t be complicated for those who already used other popular JavaScript frameworks like Backbone.js or Angular.js. As we can see recent months SAPUI5 deserves significant attention, more and more SAP-related projects are built with SAPUI5 (SAP OpenUI5) frameworks. SAP Community Network already has hundreds of discussion themes and threads and theirs quantity continue growing. It was a very large step for SAP to make SAPUI5 open source (OpenUI5), which can help popularize this framework faster.
In my own opinion SAPUI5 (SAP OpenUI5) is quite good well-documented and nice-structured framework which can help to build big mobile and desktop applications. Maybe it could be a little bit oversized for small applications, but ability to create your own controls and themes makes this very attractive for customers which have their own brand guidelines and want to obtain SAP-quality as a part of their own applications.