Learn Professional IT Courses Online in 35 Hours 
                     SAP UI5
www.rhsofttech.com
[email protected]
+91 9356913849
SAP UI5
SAP UI5 is the development tool from SAP toolkit, offering various features that the users can use to 
enhance their user experience to create apps with rich user interfaces for Web business applications. 
SAP provides various tools that the users can use to enhance their user experience to create apps with 
rich user interfaces for Web business applications. The most common enablement tools include −
•Theme Designer
•NWBC and Side Panel
•FPM Screens
•SAP UI5 Development Tools
Web-based apps that you create using SAP UI5 provides more consistent user experience and can be 
accessed on devices such as tablets, smartphones, and laptop. Using the NetWeaver gateway with UI5, you 
can define a clear separation between the user interface and business logic.
+91 9356913849
[email protected]
SAP UI5
SAP UI5  features −
•Extensibility concepts at the code and application level.
•Ability to create complex UI patterns and predefined layouts for typical use cases.
•Model-View-Controller (MVC) and data binding methods.
•Keyboard interaction support and accessibility features.
•SAP UI5 is based on open standards like JavaScript, CSS, and HTML5.
•Theming support based on CSS.
Advantages of using SAP UI in business −
•It helps in increasing productivity.
•Increase user adaption.
•Less manual errors.
•Reduce the cost of training.
•High performance of SAP system.
•Perfectly designed API and can be consumed easily.
+91 9356913849
[email protected]
SAP UI5
Advantages of using SAP UI in business −
It helps in increasing productivity.
Increase user adaption.
Less manual errors.
Reduce the cost of training.
High performance of SAP system.
Perfectly designed API and can be consumed easily.
SAP UI5 ─ Version
Following is the list of recent UI5 versions that have been introduced. Each UI5 provides new features and enhancements 
from the previous versions, platform support, usability enhancements, etc.
•SAP UI5 1.26
•SAP UI5 1.28
•SAP UI5 1.30
•SAP UI5 1.32
•SAP UI5 1.34
•SAP UI5 1.36
•SAP UI5 1.38 and many more like SAP UI5 1.6
+91 9356913849
[email protected]
SAP UI5
SAP UI5 vs Open UI5
SAP UI5 and Open UI5, both provide the UI development environment. However, they are different from each other in the 
following aspects −
SAP UI5 is part of SAP product suite and is not a separate license. It is integrated with different SAP products like −
•SAP NW 7.4 or higher
•SAP NetWeaver AS 7.3x
•SAP HANA Cloud and on premise solution
Open UI5 is an open source technology for application development and it was released with Apache 2.0.
•UI5 Browser Support
SAP UI5 supports all the main browsers from Microsoft, Google and Firefox with latest releases. However, features supported 
varies with the browser version and the vendor.
SAP UI5 is not a separate product and is available with Open UI5 is free open source platform for application 
SAP product suite development
•SAP UI5 is integrated withSAP HANA Open UI5 was introduced with Apache 2.0 license
•SAP HANA Cloud Platform OpenUI5 is Open Source, and is available on GitHub
•SAP NetWeaver higher releases
+91 9356913849
[email protected]
SAP UI5
 SAP UI5 architecture
At the top, is the presentation layer, where UI5 components are consumed by devices like mobile, tablets, and  
    laptops.
At the middle layer, is the application clients that includes SAP UI5 libraries for theming and control. UI5 
      control libraries include
Sap.viz
Sap.ui.commons (Controls like text fields and buttons)
Sap.ui.table (Input controls for table)
Sap.ui.ux3
Sap.m (Includes input control for mobile devices)
At the bottom, is the option server component. This includes SAP NetWeaver Application Server for ABAP/Java, SAP 
     backend, HANA XS engine for development or database.
+91 9356913849
[email protected]
SAP UI5
There are various JavaScript and CSS libraries that you can use in combination for the application development. SAPUI5 can 
use these libraries in combination and they are called SAPUI5 control libraries.
Common SAPUI5 control libraries −
Sap.ui.commons for control fields, buttons, etc.
Sap.m is the most common control library and is used for mobile devices
Sap.ui.table includes table control
Sap.ui.ux3
sap.m Library with controls specialized for mobile devices.
sap.makit SAPUI5 library contains the markit charts.
sap.ui.commons Common library for standard controls
sap.ui.ux3 SAPUI5 library with controls that implement the SAP User 
Experience(UX) Guidelines 3.0
sap.viz SAPUI5 library containing chart controls based on the VIZ 
charting library.
+91 9356913849
[email protected]
SAP UI5
SAP UI5 development kit for HTML5 provides you an environment for the development of web-based applications and it 
provides an application with one consistent user experience. Web apps that you develop with SAP UI5 are responsive across 
browsers and devices, and they can run on smartphones, tablets, and desktops.
The UI controls automatically adapt themselves to the capabilities of each device.
You can use SAP UI5 on the following platforms −
SAP HANA
SAP HANA Cloud Platform
SAP NetWeaver for SAP NetWeaver 7.4 or higher
User interface add-on for SAP NetWeaver for SAP NetWeaver Application Server 7.3x
MVC concept
Model-View-Controller (MVC) concept is used in SAP UI5 development to keep the application data separate from 
the user interactions. This allows you to develop the web applications and make changes to the applications 
independently.
Model-View-Controller plays a different role in UI development −
The Model is responsible for managing the application data in the database/backend.
The View is responsible for defining the user interface to users. When a user sends a requests from his device, the 
view is responsible for data view as per the request submitted.
The Controller is used to control the data and view events as per user interaction by updating the view and 
model. +91 9356913849
[email protected]
You can define Model-View-Controller concept in SAPUI5 with the following features − SAP UI5
Model
Model acts as a bridge between the view and the application data.
Model is used to get the request from the view and respond as per the user’s input.
View
View is responsible to manage information display to the users.
Views are based on Model.
Controller
Controller is responsible for taking the input given by devices and communicates to model/view and to trigger correct action.
Controllers are based on model.
sap.ui.core.mvc.XMLView
sap.ui.core.mvc.JSView
sap.ui.core.mvc.Controller
sap.ui.core.mvc.JSONView
JSON Model
JSON model is a client-side model and is used for small data sets.
JSON model supports two-way binding. Data binding concept is mentioned in the latter half of this tutorial.
XML Model
XML model can be used to bind controls to XML data.
XML is also a client side model and hence is used only for small data set
+91 9356913849
[email protected]
SAP UI5
SAP UI5-Controls
There are different types of UI controls that you can use while developing UI5 applications. These controls allow you to add 
a button, table, images, layout, combo box, and various other controls in UI5 application.
Common control types include −
Simple Controls
Complex Controls
UX3 Controls
Data Binding
DialogsIn SAP UI5, data binding concept is used to update the data automatically by binding the data with the controls that 
holds the application data. Using data binding, you can bind simple controls like text field, simple button to application data, 
and data is automatically updated when there is a new value.
Using two-way data binding, application data is updated when the value of bound control changes. The value can be 
changed via different methods, like user input, etc.
+91 9356913849
[email protected]
SAP UI5
Design Pattern 
Data pattern is a new term in SAP UI5 development when we talk about SAP development or SAP Fiori system. SAP is 
working hard to find new design patterns that support development in SAP system using UI5 SDK.
SAP has released different types of design patterns −
Master-Detail
This is a first step in application binding and is supported by SplitApp control of SAP UI5. This design pattern supports 
the list of content and allows lead selection and detailed view.
Master-Master Detail
This design pattern displays the detail of transaction in the detail section.
Example − You are placing an order online and you want to see a confirmation page that displays what you are buying 
and display the detail of the transaction with detailed view.
Full Screen
This design pattern is mostly recommended for displaying charts, pictorial data, and various types of graphs.
Multi-Flow
This design pattern is recommended when you are using a complex application flow and there is a need to make use of 
all design patterns to build a working application
+91 9356913849
[email protected]
SAP UI5
What are you waiting for:
Click Here To Book A Demo
Thank you
+91 9356913849
[email protected]