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

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 2

[email protected]

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

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 3

[email protected]

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

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 4

[email protected]

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.  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 5

[email protected]

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.

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 6

[email protected]

EVOLUTION OF SAP USER INTERFACE 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.  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 7

[email protected]

EVOLUTION OF SAP USER INTERFACE

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 8

[email protected]

EVOLUTION OF SAP USER INTERFACE 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 HTTP Protocol

HTTP

ITS SERVER is not part of Application Server

DIAG

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  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 9

[email protected]

EVOLUTION OF SAP USER INTERFACE 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.

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 10

[email protected]

EVOLUTION OF SAP USER INTERFACE 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  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 11

[email protected]

EVOLUTION OF SAP USER INTERFACE 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 Converter WD Converter SICF  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 12

[email protected]

BSP APPLICATIONS WD ABAP APP. NO WD JAVA APP

EVOLUTION OF SAP USER INTERFACE 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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 13

[email protected]

EVOLUTION OF SAP USER INTERFACE 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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 14

[email protected]

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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 15

[email protected]

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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 16

[email protected]

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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 17

[email protected]

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 18

[email protected]

SAP UI TOOL HISTORY

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 19

[email protected]

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 Mediator Back End

: SAP UI5 : SAP NetWeaver GateWay Odata Channel : 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 Back End

: SAP WebDynpro ABAP : 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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 20

[email protected]

SAP UI TOOL HISTORY

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 21

[email protected]

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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 22

[email protected]

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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 23

[email protected]

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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 24

[email protected]

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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 25

[email protected]

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.  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 26

[email protected]

Introduction: overview of environment

Explanation in next page……….  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 27

[email protected]

Introduction: overview of environment 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

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 28

[email protected]

Introduction: overview of environment 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.

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 29

[email protected]

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 AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 30

[email protected]

SAP UI5: WHEN TO USE Develop a cross-platform application for SAP backend WHAT DEVICES?

DESKTOP

MOBILE

ONLINE

ONLINE / OFFLINE?

OFFLINE

DESKTOP & MOBILE

OFFLINE

ONLINE

UI5

WEBDYNPRO ABAP

SAP UI5 (JQUERY MOBILE)

JQUERY MOBILE SAP UI5 NATIVE GENERATED

JQUERY FAMILY SAP UI

DATA PROTOCOL

INTEGRATED

ODATA FOR NW GATEWAY WEBSERVICE

XML WEBSERVICE RFC

ODATA XML WEBSERVICE

JQUERY FAMILY SAP UI5 NATIVE GENERATED

THE MAIN ADVANTAGE OF SAP UI5 IS WHEN WE HAVE COMBINATION OF DESKTOP & MOBILE (ONLINE + OFFLINE)  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 31

[email protected]

SAP UI5: proS & CONS PRO

CON

CROSS-PLATFORM WIDGETS WITH SAP STYLE. We can use one application for CRM, one application for ECC and so on. And combine for all these we can develop an application using SAP UI5.

In development THIS BREAKS STANDARD MVC PATTERN WITH THE UI GENERATED FROM JS CODE. It has used MVC pattern in different format. Controller part and model part is 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 OF JQUERY. SAP has came up with SAP own libaries apart from Jquery Libraries

THERE IS NO DIRECT SUPPORT FOR MOBILE DEVICE FUNCTIONALITIES OR OFFLINE SUPPORT AS IT IS ONLY AN UI LAYER. PLEASE USE PHONEGAP AND DATABASES FOR THAT.

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 32

[email protected]

SAP UI5 versus WEBDYNPRO SAP UI5

WEBDYNPRO

KEY PROPERTIES

HTML5 STATELESS PIXEL PERFECT DESIGN CLIENT SIDE RENDERING PLATFORM INDEPENDENT (BUT BROWSER DEPENDENT)

SAP WEB FRAMEWORK FOR SAP BACKENDS FULLY TRANSACTIONAL AND STATEFULL SERVER-SIDE RENDERING PLATFORM INDEPENDENT (BUT BROWSER DEPENDENT)

BACKEND INTEGRATION

THROUGH ODATA LAYER WITH SERVERAL SAP PROVIDED CONTENT (ERP, NETWEAVER BPM, HANA) OR HANA

INTEGRATED IN ABAP

KEY UI TOOLS AND EXTENSIONS

ECILIPSE FOR DEVELOPERS JQUERY INCLUDED APP DESIGNER (TO COME) FOR PROTYPING EXTENSINO WITH ADOBE CORDOVA (FOR DEVICE FEATURES) OR OTHER JAVASCRIPT LIBRARIES.

ABAP, FLOORPLAN MANAGER (CONFIGURATION OF UI COMPONENTS)

USE CASE

LIGHT WEIGHT APPS CASUAL USAGE DESKTOP AND MOBILE APPS ALL DEVICES, TOUCH, OR MOUSE

FULLY FUNCTIONAL APPLICATIONS EXPERT / POWER USAGE DESIGNED FOR DESKTOP USAGE LIMITED TOUCH SUPPORT

REQUIRED SKILL SETS

HTML5, JAVASCRIPT, CSS, GATEWAY, ODATA

WEBDYNPRO FRAMEWORK, FLOORPLAN MANAGER, OO ABAP

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 33

[email protected]

SAP UI5 CONTENT

Installation of SAPUI5 SAPUI5- Development Environment Introduction to SAPUI5 SAPUI5 - SAP Resources SAPUI5 -Controls SAPUI5 - SAP Theming SAPUI5 - Data Binding Model JSON Model, XML Model, Resource Model, OData Model SAPUI5 - Binding Options SAPUI5 - Multilingual Applications SAPUI5 Data Typing SAPUI5 - Integers, Floating-Point Numbers SAPUI5 - String, Boolean Variable Data and time, Formatter Classes SAPUI5 - User types SAPUI5 - Layout Adaption via own CSS SAPUI5 - Adapting CSS SAPUI5 - Theme Designer SAPUI5 - Communication with the SAP Backend SAPUI5 Control SAPUI5 - API Reference SAPUI5 - Common Controls SAPUI5 - UX3 Controls SAPUI5 - Table Control Overview of Charts Controls for Mobile Applications Suite Controls SAPUI5 - User Defined Controls SAPUI5 - Development Scenario SAPUI5 - UI Design SAPUI5 - Implementation  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 34

[email protected]

UI & UI5  HTML  CSS  HTML5  CSS3 JavaScript  Intro to JavaScript  JavaScript Libraries (JQuery) JSON XML

Please put them to rest…………….  SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 35

[email protected]

By

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 36

[email protected]

By

 SAP AG 2001, Smart Forms - the Form Printing Solution, Claudia Binder / Jens Stumpe 37

[email protected]