Posted by & filed under SAPUI5.

SAPUI5 Consultant

UI development toolkit from SAP which is used for HTML5 is called SAPUI5. It is used to create web based apps with rich user interfaces.

Web apps built with SAPUI5 offer a consistent user experience allowing responsiveness for browsers and devices. The apps built with this toolkit are run on the variety of devices including smartphones, tablets and desktops. The UI controls of the apps built with SAPUI5 automatically adapt to the native device capabilities. Some of the powerful development concepts offered by SAPUI5 include:

  • Built-in code and application level extensibility
  • Data binding and Model-View-Controller (MVC)
  • UI controls equipped with a number of features capable of handling complex UI patterns and layouts for diverse use cases.
  • Complete support for translation
  • Ease of access and support for keyboard interaction

SAPUI5 is also like most other HTML5 rendering library on the client side. The toolkit is equipped thoroughly with attributes and features following standards of Rich Internet Application. Based on JavaScript it offers a very lightweight and flexible programming model addressing both desktop mobile apps.

HTML5 became the new web standard for frontend across diverse web applications. SAP as the frontline enterprise app development company was actually lagging behind this standard while using older WebDynpro for developing its web apps which lacked feature-rich and user optimized UI. Identifying this SAP came up with this toolkit and custom HTML5 library called SAPUI5.

What is SAPUI5?

SAPUI5 can be designated in the following two manners.

  • SAPUI5 is web user interface toolkit from SAP which is also known as SAP UI Development Toolkit for HTML5.
  • SAPUI5 consists of the libraries that equip developers building highly feature rich and responsive desktop and mobile apps.

Advantages of SAPUI5

There are the number of advantages of this HTML5 development toolkit, most important of them is obviously the responsiveness to support all types of platforms including mobile, tablet and desktop. Here are other advantages of SAPUI5

  • Ease of integration with SAP ABAP app servers such as ECC, SCM, SRM, CRM, etc.
  • Ease of data access from the server as data can be fetched through JSON or XML.
  • A bevy of rich controls in the toolkit allows developers build responsive web sites easily.
  • The toolkit can be used together side by side with Open-Ajax and Standard JavaScript Libraries.
  • For customizing themes and the look and feel of the web app it offers support to CSS3
  • SAPUI5 is built on the jQuery library as its Alma matter.

SAPUI5 runtime

SAPUI5 runtime is the HTML5 rendering library on the client side which offers a bevy of rich controls and standards. After building SAPUI5 apps the runtime library allows previewing the app and code completion.

SAPUI5 app architecture

The SAPUI5 app development architecture is mainly classified into two distinct types, respectively as:

  • Design Time
  • Run Time

Design Time

  • Basically, apps with this development architecture are developed by using an Eclipse IDE along with ABAP Development Tools for Net-Weaver. You can also choose to develop SAPUI5 apps with Notepad or other IDE.
  • The IDE used will create app development environment.

Run Time

For retrieving the data from SAP System and then publishing the data for users and devices at large, SAPUI5 apps need a service in Netweaver Gateway through which Service URI can be accessed.

  • Netweaver Gateway is an interface between the SAP and the device which is license free.
  • This SAP gateway interface is implemented using Open Data Protocol or OData.

SAPUI5 and MVC Architecture

SAPUI5 is basically a client side UI technology built on JavaScript, CSS and HTML5. SAPUI5 apps run in browsers across diverse devices including mobile and desktop. Model View Controller (MVC) concept is a core element in SAPUI5 that allows separation of the representation of data from user interaction. Such separation allows building and bringing changes to the interface independent of actual user concerns. Here are some key advantages of this concept.

  • The model view guides the UI changes.
  • The model takes control of the app data.
  • The controller by responding to the events and user interaction adjusts the view and model.
  • The model view and controller both represent separate units that can be worked upon independently. This allows support to highly distributed development.
  • The model of the Model View Controller concept keeps the data and allows accessing the data and updating it as required.
  • The view aspect of the Model View Controller helps to define and re-defining the app UI.

SAPUI5 components

SAPUI5 components are nothing but reusable and independent parts of SAPUI5 apps. Following two different varieties of components can be found in SAPUI5 apps.

  • Non-UI components: The components that do not have any user interface and are used for backend data delivery are called Non-UI or faceless components.
  • UI components: The components that are seen on the app UI screen like the CTA button or a shell are called UI components.

Data Binding

SAPUI5 has equipped with data binding concept. Typically data binding refers to an association of data sources that allows reflection of the change in one data source in other data sources.

Data binding is used by UI sources for associating some controls to data sources having the application data. Thus with any change in the app data the controls are automatically updated without. Data binding allows frequent and easy updating of the apps.

Data models and views available in SAPUI5 

There are three predefined types of view available with SAPUI5. They are as followed.

  • JSON view
  • JavaScript view
  • HTML view

SAPUI5 follows MVC model which is crucial for this entire app development toolkit. The four predefined data models available with SAPUI5 include the following:

  • JSON Model: It is a client-side model that supports binding two ways.
  • XML Model: It is also a client-side model which is mainly used for small data sets.
  • Resource Model: This model is also client side model which is used mainly for keeping resource bundles, particularly texts.
  • ODATA Model: This is the only server side model among the four. It supports binding two ways.
Atul Gupta is a Director of SmartPhone Biz Apps Ltd, a UK based company that provides business solutions and services in enterprise mobility area.