.

SAPUI5 & Fiori – Where ABAP-er Meets JavaScriptIgor Barbarić

Content• Web@ABAP - History• 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 – History1. Business Server Pages (BSP, 2002) =

HTML + ABAP-script

2. WebDynpro (2003 Java, 2004 ABAP) = ABAP/Java-only (no HTML, CSS, Script)

3. SAP Web Client (2007) = BSP + Dev Worbkench + GenIL Model

4. SAPUI5 & Fiori (2013) =BSP + SAPUI5 + HTML5 + CSS + JavaScript

• Not responsive

• SAP Web Server only

• SAP backend only

• Performance issues

• 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

Server

Client (Web Browser): SAPUI5

DB

Models (JSON, XML, OData)

Controllers

Views with “sap.m” lib

Views with “sap.ui.commons” lib

SAP ABAP Server

SAP Gateway

Fiori Launchpad

SAPUI5 BSP Web Page

SAP HANA

XS EngineFiori

Lchpd

SAP HANA Cloud Platform

XS EngineFiori

Lchpd

DB DB

Web Server, e.g.

Apache Tomcat

SAPUI5/Fiori Architecture

UI5 BSP

UI5 BSP

No SAP system!

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 TechnologySAPUI5• Technology

– Base• HTML5• CSS3• JavaScript• jQuery

– JavaScript Libraries• Sap.ui.commons• sap.m• ...

– Can run in Web Servers (e.g. Appache Tomcat)

• Concept– MVC

Fiori• Technology

– Base: SAPUI5– Fiori Launchpad– Fiori Client for Android,

iOS, Windows

• Concept– Product Line– Platform– User eXperience (UX)– Fiori Design Guidelines

• Role-based• Delightful• Coherent• Simple• Adaptive

0%

20%

40%

60%

80%

100%

experience.sap.com/fiori-design/

Fiori Design Guidelines

Technological Foundation

SAP Fiori Launchpad - Features

experience.sap.com

• 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 SAPUI5SAPUI5• 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 SAPUI5SAPUI5• Sap.viz• SAP APF• Sap.ndc• Sap.ovp• Smart Controls• Web IDE Dev

Templates• Flexibility

Services• 3D Visualisation

Kit

OpenUI5• Core

– Models (JSON, XML, OData)

– Testing– Responsive (devices)– Routing– Rendering– jQuery

• Controls– 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 IDEsEclipse - based SAP Web IDE

Neptune (SAP ABAP GUI)

tools.hana.ondemand.com/mars neptune-software.com

View design: JavaScript

View design: XML

View design: Graphical

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 Outsapfioritrial.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

open.sap.com

Learn @ HANA Cloud Platform• SAPUI5 & Fiori– Test

Development environment• Free SAP HANA developer

account• SAP HANA Cloud Platform

Cockpit• SAP Web IDE• Runtime Environment

account.hanatrial.ondemand.com

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

cal.sap.com

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

sapui5.hana.ondemand.com/1.28.9

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: • ABAP OO + SAP Gateway (OData)

– Frontend: • SAP Fiori @ Cheap Mobile Phone• Motorola RS507 Barcode Scanner

– IDE: Eclipse, ABAP Workbench (SE80)

SAP Fiori – Unpack / Repack

1. Truck arrival2. Scanning boxes3. Scanning Products4. Submit & Next box

Challenges• SAPUI5 Package versions:

Backend/Eclipse/Toolkit APIvs Blogs, Forums...

• Layout management

Q & A

Thank you!

igor.barbaric@erpicon.hrlinkedin.com/in/ibarbaric