SAPUI5

SAPUI5 is a framework for developing front end applications i.e is custom apps. Ui5 app can consume odata services for sending and receiving data from back-end. Fiori apps are internally developed using UI5 and odata.

What is SAPUI5 ?

SAPUI5 is a HTML5 client-side library which strictly follows Rich Internet Application standards. It is a lightweight programming model for developing desktop as well as mobile applications which is based on javascript.

SAP was previously using WebDynpro for building SAP web Appliations which is very poor in user interface so SAP identified this and introduced its custom HTML5 library called SAPUI5.

Advantages of SAPUI5 :

  • UI5 applications are accessible from any device that is from desktop,laptop,mobile and tab.
  • UI5 applications are stateless applications because almost all the functionalities is executed in client machine that is browser except database operations.
  • UI5 applications are faster when compare to an Abap application because server is not overloaded hear during execution.
  • These apps are technically known as browser based apps which support almost more than 150 screen elements for screen designing.
  • These apps supports 3 types of odata services for database interaction.
  • ODATA ABAP SERVICE
  • ODATA HANA SERVICE
  • ODATA EXTERNAL SERVICE

How to create a custom application of SAPUI5 using Eclipse?

Hear iam going to explain you a simple and very easy procedure for creating UI5 application using eclipse. For creating SAPUI5 application you just need eclipse to be installed into your system and after installing eclipse in to your system you have to create new project and then take SAPUI5 for application creation below iam shareing some screen so that you can understand easily.

Sapui5

Step 1

Sapui5

Step 2

Sapui5

Step 3 : Provide name project hear

Sapui

Step 4 : Select finish button to create the project of your SAPUI5

ui5

Step 5

Every SAPUI5 application comes with one default index.html page along with one view and controller. In index.html page we can write the screen element code in general. In case of MVC we will follow the screen the logic that we will write screen element related code in view and in controller we will implement the event handler and also the front end validations and in model we will write the data base operations.

MVC ARCHITECTURE IN SAPUI5 :

UI5 follows the MVC Architecture for implementation of application. According to MVC architecture business logic is separated from presentation logic so we can achieve re-usability.

Model: Model contains “data base operations”(business logic). Model can be

  • Odata Abap service – interacting with ECC/CRM/SRM.
  • Odata Hana service – interacting with SAP HANA system.
  • Odata External service – interacting with non SAP system.

VIEW: View represents screen with screen elements like table/shell/radio/application header etc.

Controller: It acts as a mediator between Model and View for sending and receiving data by consuming odata service form back-end.

  • Controller contains implementation under Event Handler.
  • Controller contains Front End Validations.
  • Controller can handle dynamic functionalities of a view (edit,visible etc).

Data Binding in SAPUI5:

SAPUI5 uses data binding to synchronizes the data between two data sources any change in one source will reflect in other one. Data binding is to populate a record of a particular field.

The different types of  binding techniques are No Data binding, One –way Data binding and Two – way Data binding.