SAPUI5 Demo PDF

SAP Web UI Development Tool based on HTML5
 SAP AG 2001, Smart Forms - the Form Printing Solution,

Claudia Binder / Jens Stumpe 1
PRE-REQUISITIES FOR
SAP UI5 AND GATEWAY COURSE:

----------------------------------------------------------
CORE ABAP FUNDAMENTALS:
INTERNAL TABLES, WORKAREA,
TABLES, TABLE TYPES, STRUCTURES
DATABASE OPERATIONS
RFC/BAPI
BASIC PROGRAMMING TECHNIQUES

Claudia Binder / Jens Stumpe 2 Vizu.chowdary@gmail.com
Technical skills required for
sap ui5 app development
 SAP ABAP (Mandatory)
 Function module
 BOR (business object repository)
 NETWEAVER GATEWAY (services)

 ODATA
 HTML5
 CSS
 JAVASCRIPT / JQUERY
 JSON / XML
 SAP UI5 (HTML5 + CSS + JQUERY)
 Sap ui5 is a frame work

INTRODUCTION TO sap ui5
 EVOLUTION OF SAP on USER INTERFACE
 INTRODUCTION OF WEB APPLICATIONS
 INTRODUCTION TO SAP UI5
 WHAT IS SAP FIORI? WHERE SAPUI5 & SAP FIORI

WHAT IS DIFFERENCE BETWEEN
WEBPAGE AND WEB APPLICATION?
WEBPAGE:
WILL NOT INCLUDE USER INTERACTION.
(LIKE STATIC).
E.G. HTML, CSS
WEB APPLICATION:
USER NEEDS TO PERFORM SOME ACTIONS
(MORE LIKE DYNAMIC)
E.G. JAVA SCRIPT, JQUERY.
SAPUI5.

EVOLUTION OF SAP USER INTERFACE
WHAT IS USER INTERFACE?
 It is a platform, where end-user can interact.
 End-user can perform his operations.
 End-users might be Customer, Service Representative, Sales

Representative.
 Do perform their needs (or) to get the services in an organization /

application, that would be a channel by which he can interact.

FIRST USER INTERFACE USED BY SAP
SAP GUI
SAP GUI
Started with R/2 in the year of 70's
Browser has not yet came because, (evolution of browser in 1990’s)
 no java support
 no internet concept
 WAS was no available
sap has came up with its own interface which is SAP GUI.
LIMITATIONS
 end user has to be trained with the transaction with what we do.
GUI is not user friendly.


In 1990s' browser evolution came in to picture. later on sap moved to ITS
DIAG: Dynamic Information Action Gateway. (protocol for communication)
SAP
GUI GUI sends Request
to server
Responds
E.g SE11
R/3
ITS SERVER is mediator which
converts HTTP to DIAG.
Browser
Uses APPLICATION
HTTP ITS SERVER is not part of DIAG
HTTP SERVER
Protocol Application Server
Basis has to install it to become

a part of application server
ITS uses HTMLB libraries. From backend uses RFC’s

Disadvantages: Customization was complex. Limited access to SAP transactions
In early, 1990’s SAP exposed or displayed the standard SAP applications on to the
Internet with the help of ITS – Internet Transaction Server.
This Its is having two plugs by

1. ICM – Internet Communication Manager.
2. ICF – Internet Communication Framework.
With the help of these two plugs only, all the SAP Applications were displayed in the
Internet.
Since ITS is not an SAP product SAP developed a new server by name WAS with
ICM & ICF plugs.

WAS:
Web Application Server with ABAP Stack, Java Stack, ICM, ICF plugs to display SAP
applications on the Internet. (STILL SAP USING). With out java, we cannot have WAS.
SAP WEB APPLICATION SERVER
JAVA STACK ABAP STACK
Now the biggest challenge for SAP is to be independent and convert.
Note:
It is up to Basis Consultant
Can install Java
Can install ABAP
Can install both
BSP: Business Server Pages
 It is a new language developed by SAP to create custom SAP Applications with very good look & feel,
user friendliness, which can be displayed on the Internet.
 The disadvantage of BSP is, it requires lengthy coding for developing a simple BSP application.
 It also uses HTML Language.
 Follows MVC design pattern.
 Coding is bit similar to ITS.
ICM
ICF ABAP RUNTIME
BROWSER
BSP
BSP APPLICATIONS
Converter
WD ABAP APP.
WD
Converter
NO WD JAVA APP
SICF

WEBDYNPRO:
 A standard Programming model for developing web based application (internet based
application).
 It follows M V C Programming Pattern.
 Enforce clear separation between UI Logic & Business logic.
 It is released from ECC 6.0 version
 It is Delivered in two languages
1) Web Dynpro Abap

2) Web Dynpro JAVA

SAP WUI (WEB UI):
 SAP WUI = BSP + WEBDYNPRO

 SAP CRM WUI -> SAP WUI (same demonstrated in SAP CRM).
SAP WUI =
(Compact application can be used by end user - sales representative, service representative)
When ever we want to do some extension, we have use BSP_WD_CMPWB to develop it.
===================================================================
And the next is SAP FIORI (FIORI is full of configurations)
 SAP WUI is similar to SAP FIORI (is user interface)
 SAP BSP / WDJ / WDA is similar to SAP UI5 (is programming framework – uses MVC
pattern)

SAP GUI for windows (web GUI, JAVA GUI) was announced
C/S Architecture was applied on it firstly and it became the feature GUI of SAP

SAP UI TOOL HISTORY
Portal Style of GUI

was presented and
all data was more
shown Prominently
If we want to
customize this
screen, we need to
do developments in
WEBDYNPRO
WEB TYPE of UI started
SAP UI TOOL HISTORY
Responsive
screen for
mobile devices
and PC’s are
available by
HTML 5
You Can have information right away with out environment limitation

SAP UI TOOL HISTORY

SAP UI TOOL
If customers/clients/Endusers requires Web based Client side Eventing:
Then SAP UI5 Technology can be used: Technical point of view
Front End Screens : SAP UI5

Mediator : SAP NetWeaver GateWay Odata Channel
Back End : SAP ABAP/4 in SAP ECC/CRM/SRM/SCM/PLM/BI
===================================================================
If customers/clients/Endusers requires Web based Server side Eventing:
Then Webdynpro ABAP Technology can be used: Technical point of view
Front End Screens : SAP WebDynpro ABAP

Back End : SAP ABAP/4 in SAP ECC/CRM/SRM/SCM/PLM/BI
===================================================================
Note: UI5 Events are triggered at Client Side.
Webdynpro ABAP Events are triggered at Server Side
Note: UI5 Screen elements are light weight controls.
Webdynpro ABAP screen elements are heavy weight controls.
SAP UI TOOL HISTORY

What is UI concept
UI - User Interface
A user interface, also called a "UI" or simply an "interface,"
is the means in which a person controls a software application
or hardware device. A good user interface provides a "user-friendly"
experience, allowing the user to interact with the software or hardware
in a natural and intuitive way.
User interface design (UID) or user interface engineering is the design

of websites, computers, appliances, machines, mobile communication devices,
and software applications with the focus on the user's experience and
interaction.
fundamentals for this are: HTML, CSS and Java Script, Jquery, Bootstrap

SAP UI5 Concept
SAP UI5 supports application developers in creating fast and easy User Interface
Applications based on HTML5 and JavaScript.
SAP UI5 is a framework and a series of libraries that front-end developers can use to build
genuine HTML5-based applications. It is a JavaScript UI library (Jquery) consisting of a
feature-rich core and a really large number of UI controls which are organized in a
handful of libraries.
SAP UI5 can consume services from the ABAP backend via the gateway. It’s pretty easy
to enable the BOL, or BAPI’s via gate (or via generic BSP’s, custom REST services, PI….)
and consume them on your SAP UI5 frontend.
Many other Open Source Libraries are used in UI5 and come bundled with it, e.g. LESS the
famous CSS processor, or datajs, the ODATA library
SAP UI5 is an interesting and modern framework that relies on standards and open source
like Jquery, HTML5, Java Script, CSS and others. It is expandable as a base frame and was
developed to better support modern browsers like GOOGLE CHROME, IE 9 onwards,
MOZILLA FIREFOX etc.,
The SAPUI5 applications operate on large a wide range of equipment (smartphone,

tablet, desktop) and multiple server platforms
SAP UI5 & NETWEAVER GATEWAY
SAP UI5
SAP UI5 IS A LIBRARY OF USER INTERFACES CONTROLS
FOR HTML5, JAVASCRIPT, AND CSS AND A DEVELOPMENT
ENVIRONMENT IN ECLIPSE.
NETWEAVER GATEWAY
NETWEAVER GATEWAY IS AN ABAP LAYER ON TOP OF SAP
THAT ENABLES A SERVICE-BASED ACCESS TO SAP
SYSTEMS. IT USED THE ODATA PROTOCOL THAT IS
DESIGNED FOR USER CENTRIC CONSUMERS

SAP NETWEAVER GATEWAY
 We have CRM, SRM … ERP’s which exposes data through SAP NETWEAVER GATEWAY.
 Odata is a protocol which is used to translate unstructured data in to required structured data.
 On another side RFM or BORE structure, it has import parameter which is unstructured like a, b, c, d, e, f and
export parameters z, y, x, r. we use soup protocol (web services) we need to expose all the data (required data
display is not possible).
 In SOAP web service we need to provide all parameters.

SAP NETWEAVER GATEWAY
 When you expose the data, When a consumer is there, he can use / in form of
JSON (Jscript), or ATOM, or XML etc., (options which consumer has), by which
it leverages us to use it for the web based applications, mobile devices, cloud
based applications, MS-office, enterprise software, social media etc,
 When it comes to SOAP protocol, consumer has to consume it in a soap
protocol.
RESTFUL WEBSERVICES (ODATA – PROTOCOL) V/s SOAP WEBSERVICE
Advantages of restful web service's:

1. Structuring Required Data (Dis advantage for SOAP)
2. Consumer can use his own API (Dis advantage for SOAP)
3. Add Logon Authorization
Disadvantages of restful web service’s:

1. Security (SOAP also has authorization)
2. We see this in NETWEAVER GATEWAY session.
Introduction: overview of environment
Explanation in next page……….

This Is What We See Every Day Till We Complete Our SAP WEB UI SESSION
DEVELOPMENT WILL BE TAKEN IN AN ECILLIPSE. ECILIPSE IS AN IDE, WHICH WE WILL BE USING AND CAN DEVELOP SAP
UI5. AND WE CAN DEVELOP GATEWAY SERVICE BUILDER.
THERE ARE 2 OPTIONS
1. WE CAN USE IT IN WAS (IN SAP GUI). WE CAN DEFINE NETWEAVER GATE WAYSERVICES.
2. WE CAN DO SAME IN ECILIPSE. ECILIPSE UI IS DEVELOPER FRIENDLY TO DEVELOP GATEWAY SERVICES BUILDERS.
WE CAN USE BOTH SAP GUI AND ECILIPSE TO BUILD NETWEAVER GATEWAY SERVICES.
ODATA SERVICES TO EXPOSURE OUR DATA TO OUTSIDE WORLD.
COMPONENTS CALLED RESOURCE ACCESS AND RUNTIME STORAGE FOR SAP UI5. YOU CAN HAVE EXPLICIT UI5 RUNTIME
MEANS TO WHAT EVER THE APPLICATIONS THAT WE DEVELOP FOR UI5 WE CAN HAVE AN EXPLICIT SERVER LIKE TOMCAT,
APACHE, JBOSS. CAN MAKE PART OF SAP NETWEAVER WAS RUNTIME. WE WILL BE DEALING WITH BOTH APACHE TOMCAT
AND WE DEPLOY IT AND COMMUNICATE WITH SAP BACK END. THE ANOTHER WAY WHAT WE WILL DO IS, WE BUILD UP THE
APPLICATION USING ECILIPSE AND WE WILL DEPLOY IT IN SAP WAS. BOTH THE WAYS WE WILL BE DEVELOPING THE SAP
UI5 AND NETWEAVER GATE WAY. THERE ARE MULTIPLE WAYS OF DEVELOPING BASED ON THE USAGES. WE CAN DECIDE
ACCORDINGLY WHETHER WE CAN GO FOR ECILIPSE OR SAP GUI FOR THE DEVELOPMENT PURPOSE.
AS OF NOW SAP HAS NOT CAME UP WITH ANY DEFAULTED OR STANDARD DATA SERVICES. IF THERE IS ANY APPLICATION
WHICH WE WANT TO MAKE IT ON DESKTOP, MOBILE APPLICATION, THEN WE HAVE TO GO FOR SAP UI5. AND TO USE SAP
UI5 WE HAVE TO USE GATEWAY TO EXPOSE DATA TO OUTSIDE WORLD. SO, IF YOU WANT TO USE SAP UI4. THE DATA HAS
TO COME TO SAP UI5 AND FOR THAT PURPOSE WE WILL BE USING NETWEAVER GATEWAY

FOR ONLY WEB BASED APPLICATIONS AND MOBILE BASED APPLICATION WE USE SAP UI5. AND NOT FOR OTHERS. FOR
OTHERS THEY WILL BE HAVING THEIR OWN API’S.
FOR SOCIAL MEDIA WE WILL BE USING FIORI AS PART OF THAT.

WHEN TO USE SAP UI5 / GATE WAY
 When we want to do custom development of a cross platform web applications using HTML 5 and to connect
with SAP ERP’s any like CRM, ECC and so on what ever it is. We will be using SAP UI5 and NETWEAVER
GATEWAY.
 When the solution should run on desktop browsers (SAP UI5 Desktop), or mobile browsers (SAP UI5 Mobile
for IOS, Android, and Blackberry).
 When you want loose backend coupling over service-enabled backend, that is, reuse of existing Odata
services in backend.
 When you have very limited offline requirements (mainly huge online).
 When you do not have intensive use of native mobile features, other than GPS. You may add Apache Cordova
(Phonegap) libraries and create a hybrid app on top, if needed.
Not likely to be used:
 Outside SAP world.

SAP UI5: WHEN TO USE
Develop a cross-platform application for SAP backend
WHAT
DESKTOP MOBILE DESKTOP & MOBILE
DEVICES?
ONLINE / ONLINE OFFLINE ONLINE OFFLINE

OFFLINE?
UI5 WEBDYNPRO SAP UI5 (JQUERY MOBILE) JQUERY MOBILE JQUERY FAMILY JQUERY FAMILY
ABAP SAP UI5 SAP UI SAP UI5
NATIVE GENERATED NATIVE GENERATED
DATA PROTOCOL INTEGRATED ODATA FOR NW GATEWAY XML WEBSERVICE RFC ODATA XML
WEBSERVICE WEBSERVICE
THE MAIN ADVANTAGE OF SAP UI5 IS WHEN WE HAVE

COMBINATION OF DESKTOP & MOBILE (ONLINE + OFFLINE)
SAP UI5: proS & CONS
PRO CON
CROSS-PLATFORM WIDGETS WITH In development THIS BREAKS

SAP STYLE. STANDARD MVC PATTERN WITH THE
We can use one application for CRM, one UI GENERATED FROM JS CODE.
application for ECC and so on. And combine for all It has used MVC pattern in different
these we can develop an application using SAP format. Controller part and model part is
UI5. done in JSCRIPT.
SUPPORT FOR MOBILE DEVICES MOBILE PACKAGE IS SEPARATED
FROM DESKTOP PACKAGE. THERE
ARE NO AUTOMATIC LAYOUT
CHANGES.
Develop separate application for mobile
and desktop.
BUILD UPON WELL-KNOW LIBRARIES THERE IS NO DIRECT SUPPORT FOR
OF JQUERY. MOBILE DEVICE FUNCTIONALITIES OR
SAP has came up with SAP own libaries OFFLINE SUPPORT AS IT IS ONLY AN
apart from Jquery Libraries UI LAYER. PLEASE USE PHONEGAP
AND DATABASES FOR THAT.

SAP UI5 versus WEBDYNPRO
SAP UI5 WEBDYNPRO
KEY PROPERTIES HTML5 SAP WEB FRAMEWORK FOR SAP BACKENDS
STATELESS FULLY TRANSACTIONAL AND STATEFULL
PIXEL PERFECT DESIGN SERVER-SIDE RENDERING
CLIENT SIDE RENDERING PLATFORM INDEPENDENT (BUT BROWSER
PLATFORM INDEPENDENT (BUT BROWSER DEPENDENT)
DEPENDENT)
BACKEND THROUGH ODATA LAYER WITH SERVERAL SAP INTEGRATED IN ABAP
INTEGRATION PROVIDED CONTENT (ERP, NETWEAVER BPM,
HANA) OR HANA
KEY UI TOOLS AND ECILIPSE FOR DEVELOPERS ABAP,
EXTENSIONS JQUERY INCLUDED FLOORPLAN MANAGER (CONFIGURATION OF UI
APP DESIGNER (TO COME) FOR PROTYPING COMPONENTS)
EXTENSINO WITH ADOBE CORDOVA (FOR DEVICE
FEATURES) OR OTHER JAVASCRIPT LIBRARIES.
USE CASE LIGHT WEIGHT APPS FULLY FUNCTIONAL APPLICATIONS

CASUAL USAGE EXPERT / POWER USAGE
DESKTOP AND MOBILE APPS DESIGNED FOR DESKTOP USAGE
ALL DEVICES, TOUCH, OR MOUSE LIMITED TOUCH SUPPORT
REQUIRED SKILL HTML5, JAVASCRIPT, CSS, GATEWAY, ODATA WEBDYNPRO FRAMEWORK, FLOORPLAN
SETS MANAGER, OO ABAP

Installation of SAPUI5
SAPUI5- Development Environment SAP UI5 CONTENT
Introduction to SAPUI5
SAPUI5 - SAP Resources
SAPUI5 -Controls
SAPUI5 - SAP Theming
SAPUI5 - Data Binding Model UI & UI5
JSON Model, XML Model, Resource Model, OData Model
 HTML
SAPUI5 - Binding Options
SAPUI5 - Multilingual Applications  CSS
SAPUI5 Data Typing  HTML5
SAPUI5 - Integers, Floating-Point Numbers
SAPUI5 - String, Boolean Variable Data and time, Formatter Classes  CSS3
SAPUI5 - User types
SAPUI5 - Layout Adaption via own CSS JavaScript
SAPUI5 - Adapting CSS
SAPUI5 - Theme Designer  Intro to JavaScript
SAPUI5 - Communication with the SAP Backend  JavaScript Libraries
SAPUI5 Control (JQuery)
SAPUI5 - API Reference
SAPUI5 - Common Controls
SAPUI5 - UX3 Controls JSON
SAPUI5 - Table Control
Overview of Charts
Controls for Mobile Applications XML
Suite Controls
SAPUI5 - User Defined Controls
SAPUI5 - Development Scenario
SAPUI5 - UI Design
SAPUI5 - Implementation
Please put them to rest…………….

By

By


SAPUI5 Demo PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

SAPUI5 Demo PDF

Încărcat de

Drepturi de autor:

Formate disponibile

SAP Web UI Development Tool based on HTML5

 SAP AG 2001, Smart Forms - the Form Printing Solution,

SAP UI5 AND GATEWAY COURSE:

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 NETWEAVER GATEWAY (services)

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 EVOLUTION OF SAP on USER INTERFACE

 INTRODUCTION OF WEB APPLICATIONS

 INTRODUCTION TO SAP UI5

 WHAT IS SAP FIORI? WHERE SAPUI5 & SAP FIORI

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 It is a platform, where end-user can interact.

 End-user can perform his operations.

 End-users might be Customer, Service Representative, Sales

 Do perform their needs (or) to get the services in an organization /

 SAP AG 2001, Smart Forms - the Form Printing Solution,

GUI is not user friendly.

 SAP AG 2001, Smart Forms - the Form Printing Solution,

Basis has to install it to become

ITS uses HTMLB libraries. From backend uses RFC’s

This Its is having two plugs by

 SAP AG 2001, Smart Forms - the Form Printing Solution,

SAP WEB APPLICATION SERVER

JAVA STACK ABAP STACK

Now the biggest challenge for SAP is to be independent and convert.

 SAP AG 2001, Smart Forms - the Form Printing Solution,

1) Web Dynpro Abap

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 SAP WUI = BSP + WEBDYNPRO

 SAP WUI is similar to SAP FIORI (is user interface)

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 SAP AG 2001, Smart Forms - the Form Printing Solution,

Portal Style of GUI

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 SAP AG 2001, Smart Forms - the Form Printing Solution,

Front End Screens : SAP UI5

Front End Screens : SAP WebDynpro ABAP

 SAP AG 2001, Smart Forms - the Form Printing Solution,

User interface design (UID) or user interface engineering is the design

 SAP AG 2001, Smart Forms - the Form Printing Solution,

The SAPUI5 applications operate on large a wide range of equipment (smartphone,

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 SAP AG 2001, Smart Forms - the Form Printing Solution,

RESTFUL WEBSERVICES (ODATA – PROTOCOL) V/s SOAP WEBSERVICE

Advantages of restful web service's:

Disadvantages of restful web service’s:

Explanation in next page……….

ODATA SERVICES TO EXPOSURE OUR DATA TO OUTSIDE WORLD.

 SAP AG 2001, Smart Forms - the Form Printing Solution,

FOR SOCIAL MEDIA WE WILL BE USING FIORI AS PART OF THAT.

 SAP AG 2001, Smart Forms - the Form Printing Solution,

Not likely to be used:

 Outside SAP world.

 SAP AG 2001, Smart Forms - the Form Printing Solution,

ONLINE / ONLINE OFFLINE ONLINE OFFLINE

THE MAIN ADVANTAGE OF SAP UI5 IS WHEN WE HAVE

CROSS-PLATFORM WIDGETS WITH In development THIS BREAKS

 SAP AG 2001, Smart Forms - the Form Printing Solution,

USE CASE LIGHT WEIGHT APPS FULLY FUNCTIONAL APPLICATIONS

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 SAP AG 2001, Smart Forms - the Form Printing Solution,

 SAP AG 2001, Smart Forms - the Form Printing Solution,