Creating a User Interface with SAPUI5

The UI development toolkit for HTML5 (SAPUI5) is a user interface technology for building and adapting rich user interfaces for modern web business applications. This toolkit consists of libraries and a framework.

Apps build with SAPUI5 are responsive across browsers and devices. They run on smartphones, tablets and desktops. The UI controls automatically adapt themselves to the capabilities of each device.

The SAPUI5 runtime is a client-side HTML5 rendering library with a rich set of standard and extension controls. It provides a lightweight programming model for desktop as well as mobile applications. Based on JavaScript, it supports Rich Internet Application (RIA)-like client side features, complies with OpenAjax, and can be used together with standard JavaScript libraries. SAPUI5 can consume data from a variety of sources like XML, JSON and OData.

The Model-View-Controller (MVC) is a software architecture design pattern and it is used to implement UI Technologies such as WebDynpro and SAPUI5.

It is used in SAPUI5 to separate the representation of information from the user interaction. This separation facilitates development and the changing of parts independently.

The figure illustrates the concept of the model view controller. Further details are explained in the following:

• Model

  The Model represents the data of the application like Enterprise Data and Business Rules. It contains also the functional logic of an application. This is the place where most of the processing takes place.

• View

  The View is the presentation layer. It is updated by the model and presents the data to the user. The view represents the output of the application to the user.

• Controller

  The Controller is used by the User to manipulate the data in the Model. It determines which model components to invoke depending on the user’s action. The Controller can also perform data formatting for the View

SAPUI5 supports a variety of model types. The figures shows them.

These are further explanations about the supported model types:

• JSON Model

  Client-side Model intended for small datasets which are completely available on the client.

• XML Model

  Client-side Model intended for small datasets which are completely available on the client. There is not mechanism for server-based paging or loading of deltas.

• Resource Model

  Client-side Model for handling data in resource models. It’s mainly used for localization.

• OData Model

  The OData Model is a server-side Model where the dataset is only available on the server. The client only knows of the currently visible rows and fields.

  The OData Model currently supports OData V2 and OData V4 with a limited feature scope.

To get started with SAPUI5, you can simply create an HTML page (even in Notepad, for example), or you can start using SAPUI5 tools directly in Eclipse.

The easiest way to work with SAPUI5 is to include a set of JavaScript libraries in your HTML page. Then you can use all the controls provided by these libraries to construct one or more control trees and include them in your HTML page. The framework also supports the JavaScript Object Notation (JSON) to initialize controls with a reduced typing effort.

SAPUI5 provides an additional control library called sap.m, which is optimized for mobile devices.

Using the SAPUI5 application tools in Eclipse, allows you to create sophisticated SAPUI5 application projects based on the Model View Controller concept. The tools provide additional features, such as SAPUI5 Snippets or JavaScript Templates. The tools also provide wizards to create SAPUI5 applications for desktop as well as for mobile devices.

The toolset supports most of the standard browsers.

After you have created UI5 objects, several options to deploy and run the SAPUI5 applications are available. All applications can be tested in Eclipse.

SAPUI5 is a client- side Web UI library, which means that it runs in a browser. Therefore, an SAPUI5 application is composed of an HTML page and, if required, many additional files.

The minimum steps required to create an SAPU15 object in an HTML page are as follows:

1. For loading the SAPU15, the bootstrap needs to be included (with a <script> tag). This can be enhanced with attributes.
2. In the code, the SAPU15 elements are created and modified.
3. Properties are added using JSON.
4. Add the UI controls.
5. Add the uiArea code.
6. Add the CSS class.

SUPUI5 technology can be used to start BPM processes. In general, a process can be started using a UI created with SAPUI5, or the SAPUI5 functionality uses the OData service.

It is possible to consume a WSDL by an Ajax call, but it is recommended that a rest service be used for calling the WSDL.

The BPM OData service enables simplified access to BPM task data with a custom user interface based on a modern Web technology like SAPUI5.

SAPUI5 supports several data sources, such as XML and OData. The UI controls of a view are connected to a data source with a data binding, so that the controls are updated automatically whenever the application data is changed. A model is provided by SAPUI5 for each supported data source. If OData is the data source, the model instance is called ODataModel. The ODataModel enables the binding of controls to data from OData services.

The constructor of the ODataModel has the service URL as a parameter to connect itself to the OData service. Requests to the service to fetch data are created automatically according to the data bindings defined in the UI controls.