. SAPUI5 & Fiori – Wher Where e ABAP ABAP-e -err Meet Meetss Jav JavaScri aScript pt Igor Barbarić
Content • • • • • • •
Web@ eb@ABA ABAP P - His Histor tory y SAPUI5 & Fiori – Key Features, Architecture SAPUI5 vs Fiori OpenUI5 vs SAPUI5 Development Environments Learning Content Personal Experience: First Project
Content • • • • • • •
Web@ABAP - History SAPUI5 & Fiori – Key Features, Architecture SAPUI5 vs Fiori OpenUI5 vs SAPUI5 Development Environments Learning Content Personal Experience: First Project
Web@ABAP – History 1. 2. 3. 4.
Business Server Pages (BSP, 2002) = HTML + ABAP-script WebDynpro (2003 Java, 2004 ABAP) = ABAP/Java-only (no HTML, CSS, Script) SAP Web Client (2007) = BSP + Dev Worbkench + GenIL Model
•
Not responsive
•
SAP Web Server only
•
SAP backend only
•
Performance issues
•
SAPUI5 & Fiori (2013) = BSP + SAPUI5 + HTML5 + CSS + JavaScript
No (difficult) theming / branding
Content • • • • • • •
Web@ABAP - History SAPUI5 & Fiori – Key Features, Architecture SAPUI5 vs Fiori OpenUI5 vs SAPUI5 Development Environments Learning Content Personal Experience: First Project
Fiori – SAP’s Strategic Direction •
Over time, we plan to move all SAP solutions in this direction. (support.sap.com SAP Product Strategy) “
”
SAP Fiori – Design Award Winner
gartner.com
red-dot.sg
SAPUI5 & Fiori – Key Features • • • • • • • • • • •
HTML5 + JavaScript + CSS3 + jQuery Models: JSON, XML, OData Stateless Extendable Flexible design (Theming, Branding, Corporate Identity) Client-side libs & rendering (server performance!) Any web server (SAP ABAP, SAP HANA, Tomcat, Jetty...) Any backend (also non-SAP) Any device / client (responsiveness) Open source (OpenUI5) No need for SAP NW server to play with
SAPUI5/Fiori Architecture Client (Web Browser): SAPUI5
Views with “sap.m” lib
Views with “sap.ui.commons” lib
Controllers
Models (JSON, XML, OData)
No SAP system!
Server UI5 BSP
Fiori Lchpd
XS Engine
SAP HANA Cloud Platform
UI5 BSP
Fiori Lchpd
SAP HANA
XS Engine
DB
SAPUI5 BSP Web Page
Fiori Launchpad
SAP ABAP Server
SAP Gateway
DB
Web Server, e.g. Apache Tomcat
DB
Content • • • • • • •
Web@ABAP - History SAPUI5 & Fiori – Key Features, Architecture SAPUI5 vs Fiori OpenUI5 vs SAPUI5 Development Environments Learning Content Personal Experience: First Project
Concept vs Technology SAPUI5 •
Technology –
Base • • • •
–
• •
–
Sap.ui.commons sap.m ...
Can run in Web Servers (e.g. Appache Tomcat)
Concept –
HTML5 CSS3 JavaScript jQuery
JavaScript Libraries •
•
100%
MVC
Fiori •
80%
– –
60% Technological Foundation 40% 20%
Technology
–
•
Concept – –
0% Fiori Design Guidelines
Base: SAPUI5 Fiori Launchpad Fiori Client for Android, iOS, Windows
– –
Product Line Platform User eXperience (UX) Fiori Design Guidelines • • • • •
Role-based Delightful Coherent Simple Adaptive
SAP Fiori Launchpad - Features • • • • • •
•
Enhanced personalization Search Capability (recently used...) Responsive Design Launchpad Designer Session Management (log in-out) Single Sign-on Theming & Branding
Content • • • • • • •
Web@ABAP - History SAPUI5 & Fiori – Key Features, Architecture SAPUI5 vs Fiori OpenUI5 vs SAPUI5 Development Environments Learning Content Personal Experience: First Project
OpenUI5 vs SAPUI5 SAPUI5 • • •
•
SAP License No Contributions NOT a separate product w separate license Server: – – – – –
•
NW ABAP (7.3 NW JAVA SAP HANA XS Hana Cloud Platform (HCP) Content Distribution Network (CDN)
openui5.hana.ondemand.com
OpenUI5 •
Apache 2.0 License –
–
–
•
•
•
Free of Charge Commercial Use is OK As-is (no warranty)
GitHub Contributions / Issue Reports Beta Releases sapui5.hana.ondemand.com/
OpenUI5 vs SAPUI5 SAPUI5 • • • • • •
•
•
Sap.viz SAP APF Sap.ndc Sap.ovp Smart Controls Web IDE Dev Templates Flexibility Services 3D Visualisation Kit
OpenUI5 •
Core –
– – – – –
•
Controls – – –
•
Models (JSON, XML, OData) Testing Responsive (devices) Routing Rendering jQuery sap.m sap.ui.table sap.ui.layout
Content • • • • • • •
Web@ABAP - History SAPUI5 & Fiori – Key Features, Architecture SAPUI5 vs Fiori OpenUI5 vs SAPUI5 Development Environments Learning Content Personal Experience: First Project
SAPUI5 IDEs Eclipse - based
View design: JavaScript
SAP Web IDE
View design: Graphical
Neptune (SAP ABAP GUI)
View design: XML
View design: Graphical
Content • • • • • • •
Web@ABAP - History SAPUI5 & Fiori – Key Features, Architecture SAPUI5 vs Fiori OpenUI5 vs SAPUI5 Development Environments Learning Content Personal Experience: First Project
Fiori – Try It Out sapfioritrial.com
Learn @ openSAP • • • • •
• • •
Online courses Duration: 5-6 weeks, 1h/day Video, handouts, presentations Weekly assignments (tests) Discussion forums Demo & Exercise environment Record of Achievment Final exam
Learn @ HANA Cloud Platform •
•
•
• •
SAPUI5 & Fiori – Test Development environment Free SAP HANA developer account SAP HANA Cloud Platform Cockpit SAP Web IDE Runtime Environment
SAP Cloud Appliance Library (CAL) •
• • •
Free SAP Dev & Trial software in Cloud SAP NW AS ABAP SAP HANA Cloud fee: –
–
Amazon Web Services Microsoft Azure
Learn @ SAPUI5 Dev Toolkit • •
•
• • •
Full API Reference Developer guide Tutorials “Explored” - Control documentation with samples Demo Apps with code examples Controls with code examples Icons
Content • • • • • • •
Web@ABAP - History SAPUI5 & Fiori – Key Features, Architecture SAPUI5 vs Fiori OpenUI5 vs SAPUI5 Development Environments Learning Content Personal Experience: First Project
SAP Fiori – Personal Experience • • • •
Scenario: Unpack / Repack Products Platform: SAP NetWeaver ABAP AS SAP Solution: Extended Warehouse Management Technologies: –
Backend: •
–
Frontend: • •
–
ABAP OO + SAP Gateway (OData) SAP Fiori @ Cheap Mobile Phone Motorola RS507 Barcode Scanner
IDE: Eclipse, ABAP Workbench (SE80)
SAP Fiori – Unpack / Repack
1. 2. 3. 4.
Truck arrival Scanning boxes Scanning Products Submit & Next box
Challenges •
•
SAPUI5 Package versions: Backend/Eclipse/Toolkit API vs Blogs, Forums... Layout management
Q&A
[email protected] linkedin.com/in/ibarbaric
Thank you!
