sap-fiori-ux-architecture-for-s4h-1.pdf

PUBLIC
Version 4.3
October 2017
SAP Fiori Architecture
Overview to Deep Dive - with focus on S/4 HANA

2
PUBLIC
© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ This presentation and SAP‘s strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document is provided without a warranty of any kind,
either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement
The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. This
presentation is not subject to your license agreement or any other service or subscription agreement with SAP. SAP has no obligation to pursue
any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This
document, or any related presentation and SAP's strategy and possible future developments, products and or platforms directions and
functionality are all subject to change and may be changed by SAP at any time for any reason without notice. The information in this document is
not a commitment, promise or legal obligation to deliver any material, code or functionality. This document is provided without a warranty of any
kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-
infringement. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors
or omissions in this document, except if such damages were caused by SAP´s willful misconduct or gross negligence.
All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations.
Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not
be relied upon in making purchasing decisions.
Legal disclaimer
This presentation and SAP‘s strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice.
This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a
particular purpose, or non-infringement

3
PUBLIC
SAP Fiori Apps
Product Qualities
Modern, award winning UX
+++
Role based
+++
Multi-device support
+++
Simple task-oriented apps
+++
Consistent look and feel
across all apps
UX Qualities Cloud Qualities
Simple Extensibility for
Business Experts:
Custom fields and business logic
without backend development
+++
Scalable apps w/ large number of users
+++
Low TCO in cloud-like operation
Real-Time Qualities
Offer power of HANA
to the End-User
+++
Real-time for all apps with search,
analytics and transactional capabilities
+++
Embedded Analytics
Completely Fiori HANA Optimized
Cloud Ready

4
PUBLIC
SAP Fiori Apps
Product Qualities - Design
Role-based
➢ Deliver the right information at the right time via multi-
faceted user interfaces
Adaptive
➢ Get instant, relevant insight – whether using mobile
apps or a desktop computer
Simple
➢ Zero in on your most important tasks, functions, and
activities
Coherent
➢ Deliver a consistent UX across the enterprise – whether
you need to fulfill a sales order, review your latest KPIs,
or manage leave requests
Delightful
➢ Enrich your work experience with intuitive, easy-to-use
SAP Fiori apps

5
PUBLIC
SAP Fiori Apps
Technical Capabilities
➢ Availability - On Demand and On Premise
➢ Support for multiple devices and form factors - Maximize usability using
a desktop PC, tablet, or smartphone
➢ Central Access via SAP Fiori launchpad - Access your SAP Fiori apps
from a central launchpad (navigation, personalization, support, and
configuration)
➢ Role-based authentication and authorization - Harness role-based single
sign-on (SSO) mechanisms for secure access
➢ Secure provisioning and consumption of data - Provide access to
business logic (SAP back-end system) data via OData services
➢ Corporate identity theming - Simply and effectively implement themes for
SAP Fiori apps and SAP Fiori launchpad
➢ Embedded Analytics – efficiently include compelling KPIs, charts, and
analytical tables in your SAP Fiori apps providing real-time insights and
offering immediate actions
➢ SAPUI5 based - Enterprise-ready UI development toolkit based on HTML5
and JavaScript
➢ App Extensibility - Enhance your SAP Fiori apps using templates in the
SAP Web IDE
➢ Custom development - Rapidly design, build, and deploy SAP Fiori apps
for browsers and mobile devices in the SAP Web IDE

6
PUBLIC
Consequences for Architecture
Consequences for Architecture
➢ Not tied to a device
➢ Not tied to a session
➢ Not tied to a user
Modern UX through draft enabled Architecture
➢ Start now – save incomplete – continue later
➢ Keep working – data is saved automatically and
asynchronously
➢ Start on one device – continue on other device
➢ Start now – let someone else continue later
➢ Collaborate with others on the same task/document
stateless
data access protocol

7
PUBLIC
Overview
➢ SAP Fiori apps built with SAPUI5 technology (web) and / or
iOS native (iOS native is not in scope of this presentation)
➢ Support of smartphones, tablets, and desktop (by responsive design patterns)
with single code line
➢ SAP Fiori apps are launched and run in the SAP Fiori launchpad
➢ Business data is retrieved at runtime (via OData services)

8
PUBLIC
On-Premise
SAP S/4HANA Cloud
High-Level Overview
SAP S/4HANA
SAP S/4HANA Business Logic
SAP Fiori front-end server
SAP Fiori apps OData Services
SAP Business Suite
(ERP, SRM, …)
SAP S/4HANA …
Developer
SAP Cloud Platform
On-Premise
ABAP in Eclipse
Backend Services
SAP Web IDE
SAP Fiori user
interfaces
SAP Fiori Client
Packaged apps
Web

9
PUBLIC
SAP Cloud Platform On-Premise
High-Level Overview – SAP Fiori Cloud (internal data access point1)
SAP S/4HANA
OData Services
* Optional offering for on-premise
SAP Business Suite systems, for
selected SAP Fiori apps Reverse Proxy
SAP Fiori Client
Web Developer
SAP Cloud Platform
On-Premise
ABAP in Eclipse
Backend Services
SAP Fiori Cloud
SAP Fiori apps
SAP Web IDE
SAP Fiori user
interfaces
1) For clients accessing the system from within the corporate firewall:
no SAP S/4HANA business data passes through the cloud

10
PUBLIC
SAP Cloud Platform On-Premise
High-Level Overview – SAP Fiori Cloud (external data access point)
SAP Business Suite
(ERP, SRM, …)
** SAP
S/4HANA
…
*
* Optional offering for on-premise
selected SAP Fiori apps
SAP Fiori Client
Web Developer
SAP Cloud Platform
On-Premise
ABAP in Eclipse
Backend Services
SAP Fiori Cloud
SAP Fiori apps OData Provisioning
SAP Web IDE
SAP Fiori
user interfaces
**planned

11
PUBLIC
SAP Cloud Platform
On-Premise
High-Level Overview – SAP HANA Cloud Platform, mobile service for SAP Fiori – for on premise
SAP Business Suite
(ERP, SRM, …)
SAP S/4HANA …
SAP HANA Cloud Platform, mobile service for SAP Fiori
SAP Fiori Client /
packaged app
Web /
SAP Fiori Client
Developer
On-Premise
Fiori User
Interfaces
ABAP in Eclipse
Backend Services
Build/Packaging
Services
SAP Web IDE
SAP Fiori user
interfaces
Build/Packaging
Services (opt.)
Runtime Services
Deployment/
Discovery Services

12
PUBLIC
SAP Fiori Client /
packaged app
SAP Cloud Platform
On-Premise
High-Level Overview – SAP HANA Cloud Platform, mobile service with SAP Fiori Cloud
SAP Business Suite
(ERP, SRM, …)
** SAP
S/4HANA
…
Web /
SAP Fiori Client
Runtime Services
Developer
On-Premise
Fiori User
Interfaces
ABAP in Eclipse
Backend Services
Deployment/
Discovery Services
SAP Web IDE
SAP Fiori user
interfaces
Build/Packaging
Services (opt.)
SAP Fiori Cloud
SAP Fiori apps OData Provisioning
* Optional offering for On-Premise
selected SAP Fiori apps
*
**planned

13
PUBLIC
Cloud
SAP S/4HANA Cloud
SAP Fiori Client /
packaged app
SAP Cloud Platform
On-Premise
High-Level Overview – SAP HANA Cloud Platform, mobile service for SAP Fiori: SAP S/4HANA Cloud
SAP Business Suite
(ERP, SRM, …)
SAP
S/4HANA
…
Web /
SAP Fiori Client
SAP S/4HANA business logic
Developer
On-Premise
SAP Web IDE
(HCP)
Fiori User
Interfaces
ABAP in Eclipse
Backend Services
Build/Packaging
Services
SAP Web IDE
SAP Fiori user
interfaces
Build/Packaging
Services (opt.)
Customer/Partner extensions
OData
SAP Fiori apps
Runtime Services Deployment/
Discovery Services

14
PUBLIC
SAP S/4HANA Cloud
High-Level Overview - Cloud
SAP S/4HANA
SAP S/4HANA Business Logic
Developer
SAP Cloud Platform
On-Premise
ABAP in Eclipse
Backend Services
SAP Web IDE
SAP Fiori user
interfaces
SAP Fiori Client
Packaged app
Web
Fiori Configuration
Cockpit
(FCC)
SAP Cloud
Products
SAP Cloud
Products
SAP Cloud
Products

15
PUBLIC
Backend System
Database Server
Backend Server
R
R
Fiori User
Fiori User
Client
R
Simplified Top-Level View
Desktop and mobile interaction patterns
Common data access protocol for
business data and metadata via HTTP
The backend server exposes services that
either directly call SQL on the database or
invoke business logic in an application tier.
Coded or declared artefacts
where necessary for business logic
Database shall foster code pushdown
and model simplification
SAP HANA is the preferred database
Static UI content via HTTP
Fully exploit SQL capabilities

16
PUBLIC
SAP S/4HANA – Principle of one archetype
SAP Fiori Architecture for SAP S/4HANA consists of only one
archetype for all (transactional, analytical and search)
➢ One User / Authorization Management via ABAP Server
➢ One Business Model
➢ One Gateway / OData protocol implementation
➢ One Lifecycle

17
PUBLIC
SAP S/4HANA – Principle of one archetype
SAP Fiori Architecture for SAP S/4HANA supports
transactional, analytical and search in SAP Fiori apps
➢ SAP Fiori technology components
➢ SAP Fiori launchpad
➢ Fiori Elements to easily define SAP Fiori UIs (based on metadata)
➢ ABAP infrastructure components
➢ SADL for CDS read access
➢ Transactional infrastructure including Draft
➢ Analytical Engine (embedded BW) for analytical CDS access
➢ SAP Gateway for OData exposure
➢ CDS Views (ABAP managed)
➢ Uniform Business Object Modelling
➢ Central repository for Metadata

18
PUBLIC
SAP Fiori launchpad - Key Features and Capabilities
Role-based
• Apps assignment via role-specific business catalogs
• Predefined groups for FLP home page
Personalized
• Add / remove apps from home page
• (Re)arrange tiles and groups
• Change titles
• Select custom themes
Search – across apps and business objects
Navigation – fast, easy and contextual navigation
Responsive
• Adaptive design to run on multiple devices
• Configuration allows to start device specific apps
Theming and branding - via UI theme designer

19
PUBLIC
Dynamic charts to provide
high level, real-time
overview
Edit mode for instant
personalization of groups
and tiles
SAP Fiori launchpad – User Experience
Search across and within
apps to get immediate
answers
Anchor navigation
allows direct access to
groups
Group tiles for
personalized content
organization
Link lists provide
access to a large
number of apps
News and feeds to
enhance collaboration
Launch SAPUI5, Web
Dynpro ABAP*, SAP GUI
for HTML* and arbitrary
URLs
Color coding alerts user for
any overdue, new or
immediate actions
*on selected devices

20
PUBLIC
SAP Fiori launchpad - Architecture
SAP Fiori launchpad is a runtime container
supporting intent-based navigation for
➢ SAPUI5 Components
➢ Web Dynpro ABAP or SAP GUI apps
➢ External URLs
It provides platform-independent service APIs with
adapters for different front-end servers (ABAP, SAP
Enterprise Portal, SAP HANA Cloud Platform) and local
consumption (Sandbox for testing in SAP Web IDE,
mobile offline).

21
PUBLIC
SAP Fiori launchpad – Authorization: Content Model for ABAP platform (on premise)
Transaction PFCG
➢ Assign groups and catalogs to roles
➢ Roles are the means to assign catalogs and their apps to users
SAP Fiori launchpad designer (FLPD)
Content can be configured system wide (configuration) or client specific
(customizing):
➢ Target Mapping: maps navigation intent to concrete (logical
application/target)
➢ Tile: used to launch an application from the homepage
➢ Catalog: set of applications a user can use and add to his homepage
➢ Group: predefined set of tiles a user sees on his homepage

22
PUBLIC
SAP Fiori launchpad - Delivered Content Model Artifacts (Simplified Picture) (on premise)
FLPD:
Catalog (TC)
Navigation Target
Application
(UI5 BSP)
TA “PFCG”: Roles
(TCR)
FLPD:
App Launcher
TA „PFCG“:
Backend Role
for OData Service
FLPD:
Catalog (BC)
TA “PFCG”: Roles
(BCR)
FLPD:
App Launcher
FLPD:
Group (BCG)
Frontend
BE
FLPD:
Target Mapping
FLPD:
Target Mapping
Technical Content
• grouped by application area
• repository for admins
• for custom content
Business Content
• grouped by business role
• serves as demo content
Frontend
BE

23
PUBLIC
SAP Fiori launchpad - User Assignment and Authorizations of Content (on premise)
Front-End
Server
Back-End
System
Authorization Objects
Authorization Objects
Launchpad PFCG Role
(Front-End)
Target
Mapping
shows
starts
App-specific
OData Service
uses
UI2 Launchpad
OData Service
uses
Model Provider
Data Provider
Start Authorization
Start Authorization
Business
Authorizations
PFCG Role
(Back-End)
has
has
requires
requires
refers to
determines
Business Logic requires
calls
UI
OData
Auth.
calls
Authorization Defaults
Authorization Defaults
uses
uses
Fiori App
refers to
refers to
User
Tile
(App Launcher)
sees is granted
Model Provider
Data Provider
resolves
Launchpad Logic
Trusted RFC
contains Authorization
Profile
Authorization
Profile
determines
determines
refers to
refers to
Group
contains
resolves
Catalog
Menu

24
PUBLIC
SAP Gateway – Architecture – on Premise
Business Functionality (Backend)
SAP S/4HANA
OData
SAP HANA DB
SAP Gateway
Recommended Development option
Core Data Services (CDS views)
access the SAP S/4HANA Business
Data via SAP Gateway.
SAP HANA DB
Browser
(SAP Fiori Launchpad)
SAP Fiori App
SAPUI5
Frontend-Server
SAP Fiori App
SAP Fiori
launchpad
SAP Gateway Hub
(OData Service)
Backend
SAP NetWeaver
SAP Gateway OData Provider
(Backend provider)
Query
(SADL)
Draft
Engine
(BOPF)
Backend Business Logic
(Classes, BAPI, …)
CDS View Draft Table Appl. Table
Trusted RFC
HTTPS
HTML / OData
Read & write
Read Write
Read
Write
& write

25
PUBLIC
SAP Fiori Cloud Deployment Options for SAP Gateway and OData Provisioning
SAP Fiori, cloud edition
CP cloud connector
SAP backend
SAP Gateway (embedded)
Embedded Deployment
+ quick and easy way to expose
SAP Gateway services from a
single backend
‒ disadvantages when combining
data from several backends
‒ downtime for Business Suite
systems when upgrading UI
components
CP cloud connector
SAP backend
SAP Gateway (hub)
Gateway Hub
+ administration advantages
through central deployment
+ multi-origin composition
+ routing support for connecting
to multiple backend systems
+ enhanced security
‒ additional server required
CP cloud connector
SAP backend
CP OData Provisioning
OData Provisioning
+ „Gateway hub in the cloud“
+ included in license for
+ cloud benefits (upgrades,
scaling, security,…)
+ integrated with other HCP
services
‒ no integration of 3rd party data
sources
CP cloud connector
SAP backend
CP Integration
Cloud Platform Integration
+ full extensibility options for Fiori
+ integration of SAP and 3rd party
data sources & web services
+ cloud benefits (upgrades, scaling,
security,…)
+ integrated with other HCP services
1 2 3
1

26
PUBLIC
SAP CP ODATA Provisioning – Architecture - Cloud (a.k.a Gateway-aaS/HCI OData Provisioning)
SRM SCM ERP
PLM
CRM
SAP Business Suite SAP HANA
SAP Gateway Backend
Provisioning
HCP OData
provisioning
HCP
OData
 Strategic service to administer(register, activate, maintain) OData
services on Hana Cloud Platform exposed from SAP Business Suite
backend. Services to be developed in SAP backend(ABAP).
o SAP Gateway Backend (IW_BEP 200) component to be installed as add-
on in SAP Business Suite Backend Systems that are based on SAP
NetWeaver 7.0, 7.01, 7.02, 7.03, and 7.31.
o For SAP NetWeaver 7.40 or higher it comes pre-installed with
“SAP_GWFND 740/750” component which contains full functional scope
of Gateway.
 Engineered for Cloud: Low TCO, Multi-tenancy, rolling software
updates, horizontal scalability, subscription-based usage
 Connectivity to on-premise system using HCP Cloud Connector
 Leverages all cloud qualities of HCP, viz. monitoring, supportability,
security etc.
 Re-uses the same investments done for OData enablement of on-
premise SAP systems using Gateway (IWBEP) for cloud scenarios
 Some features of on-prem Gateway HUB not available yet, but
planned for roadmap of this year (viz. user based routing, softstate,
notification support)
 Currently bundled with SAP Fiori Cloud Edition license, HCI and few
HCP Bundles, however needs valid SAP Gateway Backend license for
connected Suite systems
Gateway
License
(Details)
Bundled with
other
products
Cloud
Connector

27
PUBLIC
Analytics: Consumption patterns
List Reporting & Charting build with
List Report & Analytical List Page Template
KPI Monitoring & Analysis
build with
Smart Business &
Analysis Path Framework
Multidimensional Analysis
build with
Design Studio
Analysis App
Adding transactions to aggregated data
▪ Cost center hierarchy: Plan budgets and disaggregate
▪ Any grouped data: offer mass actions on lower level items
85
Built-In Analytics
build with
Controls:
Analytical Table &
Analytical Chart

28
PUBLIC
Analytics: Conceptual View
SAP HANA
CDS Data Model
Application Infrastructure
UI
Consumption View
Interface View
OData Adapter
Transaction Handler
Core Controls
Smart Controls
UI Annotations
SAP Fiori elements
Application Generic Player
UI Annotations
Annotations
Analytical Table, Chart
Smart Table
List Report
Analytic Query View
Analytical views for
dimensions, facts, cubes,
aggregation levels
Planning
OData plus InA
KPI, Report, …
SAP BusinessObjects Design
Studio Analysis App, SAP
Smart Business Drilldown App
Data Point, Selection,
Presentation (Chart, …)
Analytical view categories
and details

29
PUBLIC
Analytics: Design Time (Developer & Key User)
SAP HANA
CDS Data Models
UI
Consumption Views
Interface Views
OData Adapter
Transaction Handler
Core Controls
Smart Controls
UI Annotations
SAP Fiori elements
Application Generic Players
UI Annotations
Annotations
Repositories
Development
Environments
Web IDE
Design Studio
KPI Modeler
UI Artifact,
e.g. Fiori Application
DS Application
KPI Definition
ABAP in Eclipse
Analytical
CDSView

30
PUBLIC
Analytics: Runtime (End-User) (based on NW AS ABAP 7.50 or higher On Premise / NW AS ABAP 7.60 or higher Cloud)
SAP HANA
CDS Data Models
UI
Consumption Views
Interface Views
OData Adapter
Transaction Handler
Core Controls
Smart Controls
UI Annotations
SAP Fiori elements
Applications Generic Players
UI Annotations
Annotations
Fiori Shell
Analytical App
Smart Business
KPI Monitoring
Design Studio
Analysis App
SAP NetWeaver 7.6x
Analytical OData Service
Transaction Handler Analytic Engine
HANA / Any DB
Business Data
R
OData R
InA
R
R
R
Open SQL
Read Access
R
SQL
SQL View
R
Annotations

31
PUBLIC
Search Scenarios
Enterprise Search
➢ Integrated into SAP Fiori launchpad
➢ State-of-the-art search experience across
business objects, SAP Fiori apps and documents
➢ Filtering facets and full S/4HANA authorizations support
➢ Flexible navigation from search results based on standard
semantic objects’
In-App Search
➢ Available for every SAP Fiori App and OData service
➢ Greatly simplifies filtering and value help UIs
Shared Programming model
➢ CDS (VDM) views serve as basis for the modelling of
search behavior
➢ Based on the powerful HANA text processing functionality
and CONTAINS predicate
S/4HANA
ABAP
SAP
HANA
S/4HANA Tables
Enterprise
Search (ABAP)
SADL
ABAP CDS Views
Enterprise
Search (HANA)
SQL Processor
CONTAINS
SQL Views
R
SQL
R
SQL
R
SAP
Fiori
UI
Enterprise
Search APP
Fiori APP
R
OData R
sINA/OData
FTIs

32
PUBLIC
Enterprise Search Details
Key User Tools
➢ Boosting Cockpit allows for fine tuning of the business
related ranking of search results.
➢ Query Log for analyzing and optimizing the search
behavior
➢ Synonyms editor for advanced search experience
Technology
➢ Two types of models are supported: table and CDS based
➢ Proprietary table based models are mapped to join views
and supported for legacy and performance reasons
➢ CDS models fully leverage the standard S/4HANA
development model and should become the only
modelling type
➢ ABAP API for integrations of ranking functionality into
S/4HANA apps
SAP Fiori UI
S/4HANA
ABAP
SAP
HANA
S/4HANA Tables & FTIs
Enterprise Search
(ABAP)
Enterprise Search (HANA)
SQL Views Processor
SQL Views
Enterprise
Search APP
Table based
models
ABAP CDS
Views
Boosting Cockpit
R
R
R
Query Log
Synonyms
Editor
R
Join Views Processor
Join Views
R
Business
User
Key
User
R R

33
PUBLIC
Document Search
Key Features
➢ Search in documents attached to the S/4HANA business
objects
➢ File Processing service supports text, topics and metadata
extraction from various types of documents (pdf, word etc.)
➢ File Processing service is running on the SAP CP (Cloud
Foundry based)
➢ Integration with supported types of document storage
solutions with both KPRO and CMIS APIs
➢ Available in S/4HANA on-premise solution
➢ In the evaluation in S/4HANA Cloud solution
Note: For the sake of simplicity the block diagram doesn’t show some details
like search model or HANA part of the Enterprise Search
SAP
HANA
S/4HANA
ABAP Document
Storage Solution
File Processing
DMS
File Processing results:
text extracts and metadata
R
FPRO
Client
R
Enterprise
Search
R
R

34
PUBLIC
Notifications Component Overview
This presentation and SAP‘s strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice.
This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a
particular purpose, or non-infringement

35
PUBLIC
SAP Fiori Cloud
SAP Fiori Cloud provides SAP S/4HANA and SAP Business Suite customers a simple approach to
adopt the SAP Fiori user experience (UX) by leveraging SAP Fiori pre-packaged content and
services in the cloud
 Enable a modern, intuitive user experience for SAP business
processes (SAP S/4HANA & SAP Business Suite) with
reduced cost and effort
 Combine SAP and non-SAP business processes with
a consistent UX
 Simplify on-premise landscape with efficient cloud services,
enabling fast innovation cycles
 Provide access to SAP business process from anywhere at
anytime via a secured connectivity between on-premise to cloud
SAP
Business Suite
SAP
S/4HANA
SAP Cloud Platform
SAP Fiori UX

36
PUBLIC
Fiori-related Cloud offerings
▪ SAP Fiori Cloud
FLP apps and configurations
managed in the cloud
▪ On-Premise Shipment
Shipment and lifecycle of the apps and
configurations on-premise
▪ S/4HANA Cloud
ABAP system with Frontend Server
managed in the cloud
SAP Fiori Cloud – in the context of other SAP Fiori offerings
Fiori apps and
Configurations
ABAP BE
Minimized
Frontend Server
SAP Fiori Cloud
Fiori apps and
Configuratins
ABAP BE
S/4HANA Cloud
Fiori apps and
Configurations
ABAP BE
On-Premise
Shipment
SAP Cloud Platform
BE=Backend

37
PUBLIC
SAP Fiori Cloud - Architecture at a Glance
SAP HANA Cloud Connector
Other
Backends
SAP ABAP Backend
SAP Gateway Hub
OData
SAP HANA Cloud Platform (HCP)
OData
http
http
ON-PREMISE
CLOUD
UI
SERVICES
DATA
&
PROCESSWS
SAP Fiori launchpad
SAP Fiori Apps
SAP Cloud Platform Cockpit
UI theme designer
Launchpad Config Cockpit
Identity Authentication
SAP Fiori mobile service
Web IDE

38
PUBLIC
SAP Fiori on mobile devices
1
Push
Offline
GPS
Voice Recording
Camera
Barcode
Calendar Printing
LifeCycle Management
3rd party
Plug-ins
Web App Hybrid Mobile App
Settings Security
Tasks
Contacts

39
PUBLIC
SAP Fiori Runtimes
Fiori in browser
 Browser based apps
 Runs on all devices
 No installation required
 Coherent UX across devices
SAP Fiori Client
 Downloadable ‘native’ app
 Pre-packaged with commonly used Cordova
plug-ins for native device integration
 Full screen operation
 Attachment viewing
 Native device integration
 Notification App Updates
➢ Selected Mobile Platform Services can be used
Fiori Mobile with ‘Kapsel’ SDK
(packaged apps)
 Custom packaged & branded app
 Can be delivered on company store
 Native device integration
 Offers App Administration & Reporting
 Push Notifications*
 Offline application data*
 Use additional SAP Mobile Platform
services
Mobile Platform required
ONE ACCESS
Browser (Desktop or Mobile) Mobile only
*requires adoption of SAP Fiori application
SAP Fiori launchpad SAP Fiori launchpad
Planned
Innovations

40
PUBLIC
SAP Fiori Consumption Options
URL
Fiori front-
end server
App
OData
Fiori in browser
SAP Fiori launchpad
and applications
Fiori front-
end server
App
SAP Fiori
Client
URL
OData
SAP Fiori Client
or custom Fiori Client
SAP Fiori launchpad
and applications
SAP Fiori Cloud premium, mobile
service for development and operations
or
SMP 3.0 SP03 PL02+
SAP Mobile
Platform
* in future release
Fiori front-
end server
SAP Fiori Cloud premium, mobile
service for development and
operations or
SMP 3.0 SP03 PL02+
OData
SAP Mobile
Platform
Fiori Mobile
app
App
Fiori Mobile
with ‘Kapsel’ SDK
*
Kapsel AppUpdate
(optional)

41
PUBLIC
SAP Fiori Client - with SAP Fiori Cloud
– End to End solution for mobilizing SAP Fiori apps.
– Supports all features of SAP Fiori client
– Provides as part of a single, integrated solution:
• Build/Packaging service transforms your SAP Fiori web app into
a native/hybrid app, necessary to leverage native device
features.
• App deployment service enables app lifecycle management and
an enterprise app store app for deployment, ratings and reviews.
• Data service provides infrastructure support for advanced mobile
features such as push and offline.
• Mobilizes SAP Fiori Cloud apps and SAP Fiori on-premise apps
with a single solution.
• Integrates with SAP HCP, mobile service for app and device
management
• Simplifies support for basic and advanced SAP Fiori use cases.
Fiori Frontend Server (SAP Fiori Cloud or on-premise)
(e.g. SAP Gateway)
SAP Fiori Cloud
premium
Optimized
Optimized
Direct
Direct
Any Browser SAP Fiori Client

42
PUBLIC
SAP Fiori Client - with SAP Mobile Platform 3.0 / HCPms
– Support of native device capabilities
▫ Camera, Geo-Location, Barcode, Printing, Calendar, Contacts,
enhanced Voice Recording incl. attachment,
▫ Access manageable via SAP SMP Administration Cockpit
– Support of enterprise capabilities
▫ Secure Onboarding
▫ Enhanced security (Secure, remote access without VPN)
▫ Support of additional security scenarios
(SAML2, X.509 via SAP Afaria, Mutual Authentication, OAuth …)
▫ Enforced application passcode
▫ Logging & Tracing (incl. set log level & retrieve log from remote)
– EMM integration for configuration & certificate management
– Supportability Enhancements
– Android Third Party Attachment Viewer
– NEW: Cloud Build Feature allows developers to create a
custom SAP Fiori Client with no on-premise developer
footprint.
– Demo Mode (http://www.sapfioritrial.com/)
Fiori Frontend Server
(e.g. SAP Gateway)
SAP Mobile Platform
3.0 SP03 PL02 /
HCPms
Optimized
Optimized
Direct
Direct
Any Browser SAP Fiori Client

43
PUBLIC
SAP Fiori Client - Available on all major App Stores
Google Play Store for Android
Apple App Store for iOS
Support: iOS 9.x – 10.x Support: Android 4.13 – 7.x Support: Windows Phone 10 & Windows 10
Microsoft App Store for WP & Windows

with focus on SAP S/4HANA
System Landscape Recommendations

45
PUBLIC
SAP Fiori Front-end server
➢ Single point of UI maintenance like browser support or SAPUI5 provisioning
➢ Central place for theming and branding
➢ Single place for configuration, personalization, and SAP Fiori shell services
➢ Rule-based dispatching of requests in a multi-system landscape
(e.g. for approvals incl. aggregation)
➢ Security considerations
➢ Similar to an application-level gateway (ALG) with protocol switch and whitelisting (excl. search)
➢ Admin for UI meta data does not need to have admin rights in backend (data sensitivity)

46
PUBLIC
Deployment of Fiori Frontend Server (FES)
Central Hub Deployment
General Recommendation
 Deployment of Fiori Apps and UI content on separate systems
 Deployment of the GW components as described in landscape use case II
of the GW landscape deployment recommendations
 Enablement of OData access for multiple SAP Backend systems
Benefits
 Fiori UI Software Update cycles decoupled from backend system*
 Better handling of innovations for Fiori UIs and UI content
 FES deployed as one instance incl. central Fiori Launchpad
 Routing mechanism in several backend systems
 Scaling-Up is manageable independent from backend system
 FES can be implemented in segmented networks (e.g. DMZ) to serve security needs
 Input validation functions and business logic on two different systems (security requirement)
 Central management of connections, central access for devices
 Backend development placed in the system where the data is stored
Considerations
 Additional NW ABAP System
 Web Dispatcher (Reverse Proxy) is mandatory when using analytical Fiori apps
Example:
*for S/4H only valid for SPSs

47
PUBLIC
Deployment of Fiori Frontend Server (FES)
Add-on Deployment in Application Backend System
Possible Exception
 Deployment of needed Fiori UI content on each required
SAP Backend system (ERP, CRM etc.)
 Multiple deployment/configuration of Gateway Server and
Gateway content (on each SAP Backend)
 Acceptable for single system infrastructures e.g. Proof of Concepts or single
instance productive systems (starting point for Fiori)
Benefits
 No additional NW ABAP system needed  less TCO
 Less runtime overhead  no remote-call
 Direct access to metadata and business data
 Later scale-out to central hub deployment possible
Considerations
 Innovation speed of Fiori UI/GW and backend must be synchronized
 Update strategy must reflect dependencies between software components
 Cross-System composition (e.g. usage of one Fiori Launch Pad) is not advisable
 SAP Backend must fulfill minimum system-requirements
 Possible scale-up of SAP backend (resizing)
 Currently the majority of customers are on central hub deployment
Example:
ERP on HANA
Frontend – HTML5
ECC
Server
Gateway enabl.
Gateway
Server
Fiori UIs
ABAP
AS ABAP
ERP Content
SAP CRM
CRM
Server
Gateway enabl.
Gateway
Server
Fiori UIs for CRM
ABAP
AS ABAP
CRM Content
HANA
SAP SRM
SRM Server
Gateway enabl.
Gateway
Server
Fiori UIs for SRM
ABAP
AS ABAP
SRM Content
HTTP/ODATA
UI Technology UI Technology UI Technology
HTTP/ODATA
HTTP/ODATA HTTP/ODATA
Frontend – HTML5 Frontend – HTML5
HTTP/ODATA
HTTP/ODATA
Web Dispatcher

48
PUBLIC
SAP Fiori Front-end server - Landscape Planing
▪ The SAP Fiori Front-end server provides the UI resources and routes the
OData Service calls to the backend.
▪ It can be deployed
 Standalone, as a HUB or
 Embedded, co-deployed onto the backend
▪ Indicators for one central instance as a HUB deployment
Serves Multiple Backend-Systems, incl. Routing
Decouples Lifecycle Management
Scales Backend-independent
Increases Security: FES can run in dedicated network segment (e.g. DMZ);
Request Validation and Business Logic are managed in different systems
Indicators for an embedded deployment
▫ Cost: reduced number of systems, 1 Backend System only.
SAP Fiori Cloud eliminates the need for a Front-end server in the Customer
Landscape - More information:
https://eaexplorer.hana.ondemand.com/_item.html?id=11166#!/overview

49
PUBLIC
SAP backend
(SAP Gateway service
implementation)
SAP Business Suite
(ERP, SRM, …)
SAP backend
(SAP Gateway service
implementation)
SAP S/4HANA*
Web
SAP Fiori Client
Packaged app
SAP Fiori Front-end Server
(based on AS ABAP)
SAP Fiori launchpad & apps
SAP Gateway hub components
(OData provisioning)
The SAP Fiori Front-end Server
o Runs on AS ABAP
o Provides the required technology stack for SAP Fiori Apps
(front-end components) comprising
• SAP User Interface Technology
• SAP Gateway hub components
o Provides the OData Services for the SAP Gateway service
implementations of the backends.
Can be deployed as
o HUB (dedicated Server, recommended for most scenarios) or
o Embedded in the backend
Additional Information
o 2219596 – Central Note for SAP Fiori Front-End Server 2.0
o 2355644 – Central Note for SAP Fiori Front-End Server 3.0 (incl. Fiori 2.0)
*SAP S/4HANA requires to run SAP Fiori Front-end Server with SAP Database
SAP Fiori Front-end server – on Premise

50
PUBLIC
SAP Fiori Architecture Scenarios
using Fiori within a SAP S/4HANA on premise single system
Single System S/4H on premise
 Starting point for S/4H on premise customer (net-new, or upgrade from ERP)
 Recommended approach if there is no business requirement for a separate HUB
(e.g. multi-system integration)
Benefits
 Usage of optimized “micro-hub” within S/4H backend system
 The S/4H UI content is deployed in the backend
 No more XS content (VDMs) – all analytics in S/4H designed via CDS
(Core Data Services), as a result no direct http channel from Web
Dispatcher to HANA XS is required anymore
Considerations
 UI upgrade must be planned in sync with backend maintenance window
 Currently there is a strict dependency between SAP Fiori UI and SAP S/4H
backend release version and SP
Example:
S/4HANA
S/4H Core
ABAP
Gateway
Server
Gateway enabl.
sFinancials
Web Dispatcher
Frontend – HTML5
HTTP/
ODATA
SAP HANA for S/4 System
Search
INA
PRIMARY DB
CONNECTION
S/4H Fiori UIs*

51
PUBLIC
using Fiori within a SAP S/4HANA on premise integration scenario
Integration landscape (S/4H)
 Typical starting point for S/4H customers is an integration of a new S/4H system in
an existing enterprise infrastructure
 Similar to the strategy before S/4H, the same benefits and considerations for an
embedded or hub deployment of the Fiori FES are valid
Benefits
 Easy integration of an S/4H system in an existing landscape via central
Fiori FES
 The additional S/4H UI content must simply be deployed on FES
 No more XS content (VDMs) – all analytics in S/4H designed via CDS
(Core Data Services), as a result no direct http channel from Web
Dispatcher to HANA XS is required anymore
Considerations
 All systems with S/4H Fiori content must run on a SAP DB
 FES must be on min. NW 7.50
 Currently there is a strict dependency between SAP Fiori UI and SAP S/4H
backend release version and SP
Further information in: SAP FIORI FOR SAP S/4HANA Release Information Notes.
Example:
S/4H Core
S/4H
ABAP
Gateway
Server
AS ABAP on
SAP DB*
SAP FES
ABAP
Central GW
Content (opt)
Gateway
enabl.
sFinancials
Web Dispatcher
Central UI
Technology
Fiori UIs for ERP
Frontend – HTML5
HTTP/
ODATA
SAP HANA for S/4 System
HANA
Search
INA
PRIMARY DB
CONNECTION
SAP HANA for ERP System HANA
PRIMARY DB
CONNECTION
TRFC
S/4 Fiori UIs*
INA
ECC
Server
ERP on HANA
Gateway
enabl.
Suite content*
Search
* if S/4 content is
deployed on FES
a SAP DB is
mandatory
ABAP

52
PUBLIC
Using Fiori with SAP Cloud Platform Mobile Services (CPms)
Extended Landscape Option (Cloud)
 CPms as Service on SAP Cloud Platform
 Starting point for more SAP CP services like Web IDE, Mobile Place/
Mobile Secure
Benefits
 Easy access to SAP CPms features via Cloud subscription (Zero
installation)
 Secure channel from SAP CP to SAP system via Cloud Connector
 Usage of special mobile features like Fiori offline
 SMP administration cockpit with e.g. Application Policies
 Logging and Tracing features
Considerations
 Setup of Cloud Connector to access backend data
Example:
ECC
Server
SAP ERP on HANA
ABAP
Gateway
Server
AS ABAP
SAP FES
ABAP
Central GW
Content (opt)
Gateway
enabl.
ERP content*
Central UI
Technology
Fiori UIs for ERP
Frontend – HTML5
TRFC
XS Engine
Fiori App
Content
HTTP/
ODATA
SAP HANA System for SAP ERP
HANA
VDM Reuse
Content
Search
INA
Web Dispatcher
HTTP/
ODATA
Cloud
HTTP/
ODATA
Cloud Connector
SAP
CP
CPms
Internet
PRIMARY DB
CONNECTION

53
PUBLIC
SAP Fiori Architecture - Access Point Scenarios
Internal Access Point External Access Point
SAP Gateway Hub / Embedded
ON-PREMISE
PUBLIC
CLOUD
UI
SERVICES
DATA
&
PROCESSES
SAP Cloud Platform
SAP backend + SAP Gateway
service implementation
SAP Fiori apps & launchpad
SAP Cloud Platform
SAP Business Suite
(SAP Gateway service impl.)
https
OData provisioning*
Users access launchpad and apps via
internal SAP Web Dispatcher,
no business data leaves the intranet
Users access launchpad and apps on
SAP Cloud Platform via internet connection
OData
* Option B: SAP Business Suite scenarios only,
* for restrictions see note: #1830712
SAP Cloud Connector
SAP Gateway Hub / Embedded
SAP backend + SAP Gateway
service implementation
SAP Cloud Platform
SAP Cloud Connector
OData
SAP Web Dispatcher
OData
*
A B

54
PUBLIC
Landscape Deployment of SAP Fiori Cloud
Connect to SAP Business Suite via SAP Cloud Platform OData provisioning
External access to SAP Business Suite
 Fiori frontend services in the cloud (Fiori UIs, SAPUI5
libraries, Fiori launchpad, OData provisioning, etc.)
 For customers who do not run a dedicated ABAP
Frontend server / Gateway hub (on-premise)
Benefits
 Fiori apps for SAP Business Suite provided via cloud subscription
 Cloud-based OData provisioning service
 Minimized setup and maintenance for Fiori infrastructure
Considerations
 SAP CP OData provisioning service does not provide the
complete SAP Gateway hub functionality (Note #1830712)
 SAP CP Cloud connector required to establish secure access
between customer account and on-premise landscape
 Gateway enablement and relevant Fiori backend components
required in backend system
Example
Frontend – HTML5
Cloud
Cloud Connector
Internet
Fiori UIs
Central UI
Technology
CP OData provisioning
SRM
Server
SAP SRM
Gateway
enabl.
SRM content*
ECC
Server
ERP on HANA
Gateway
enabl.
Suite content*
SAP CRM
HTTP/
ODATA
SAP Cloud Platform
On-
Premise
TRFC

55
PUBLIC
Connect to SAP Business Suite & S/4HANA on-premise via SAP Gateway server
External access to SAP Business Suite &
SAP S/4HANA
 Allow customers to run, extend and develop Fiori apps
in the cloud, while leveraging a central SAP Gateway
server (on-premise hub) in multi-system environments
Benefits
 SAP Business Suite & S/4HANA Fiori apps via cloud subscription
 Usage of Fiori 2.0
 Automated selection of Fiori app versions compatible to the
connected backend(s)
 Central SAP Gateway server to manage OData services
 Full set of SAP Gateway hub capabilities available
 (optional) FES embedded deployment in single system landscape
Considerations
 Customer needs to operate and maintain SAP Gateway server
 SAP CP Cloud connector required to establish secure access
between customer account and on-premise landscape
 Gateway enablement and relevant Fiori backend components
Example
Frontend – HTML5
Cloud
Cloud Connector
Internet
HTTP/
ODATA
On-
Premise
FES
ABAP
Gateway
Server
S/4
Server
S/4HANA
Gateway
enabl.
S4/H content*
TRFC
ECC
Server
ERP on HANA
Gateway
enabl.
Suite content*
S/4 Fiori UIs
Central UI
Technology
SAP Cloud Platform
Fiori UIs

56
PUBLIC
Connect to SAP Business Suite or SAP S/4HANA via SAP Gateway embedded
Internal access to SAP Business Suite &
SAP S/4HANA
 SAP Gateway on premise (Hub or Embedded)
 Frontend services in the cloud (Fiori UIs, S/4H Fiori
UIs, FLP)
Benefits
 SAP Business Suite & S/4HANA Fiori apps via cloud subscription
 OData provisioning via Gateway on premise
 Minimized setup and maintenance for Fiori infrastructure
 (Optional) Gateway as Hub in multi-system landscapes
 Automated selection of Fiori app versions compatible to the
connected backend(s)
Considerations
 Gateway configuration and relevant Fiori backend components
Example
Frontend – HTML5
Cloud
Web Dispatcher
Internet
HTTP/
ODATA
On-
Premise
S/4
Server
S/4HANA
Gateway
enabl.
S4/H content*
TRFC
S/4 Fiori UIs
Central UI
Technology
SAP Cloud Platform
Fiori UIs
Gateway
Server

57
PUBLIC
Extensibility - Roles
Business User Developer
Key User, Business Expert
I want to …
➢ Change order of columns in a table
➢ Hide/Unhide tabs
➢ Change format of dates/numbers
➢ Hide/Unhide a few apps on Launchpad
My changes should …
… not affect other people.
I want to …
➢ Add/change complex business logic
➢ De-couple software lifecycle of standard
and extensions
… affect people in my company
I want to …
➢ Add/change business rules/logic
➢ Add custom fields, tables, reports, forms
➢ Use my company theme/logo
➢ Change layout
… affect people in my LOB/company

58
PUBLIC
In-App and Side-by-Side Extensibility
In-app extensibility
Context-aware extensions, utilize tight coupling
Capabilities: Field extensibility, UI adaptation, UIs,
business logic extensions, queries, analytics, APIs
Side-by-side extensibility on SAP Cloud Platform
Integrate with the outside world, build own applications
Capabilities: SAP Cloud Platform to build and operate custom
UIs, applications, services, integration, process steps
+
Primary method of extensibility
 Benefit from loose coupling (lifecycle, runtime,
scaling)
 Utilize rich services (e.g. mobile, documents, ML)
 custom data marts with replicated or federated
business data
 PaaS approach giving choice of appropriate
programming environment, allowing to go beyond
predefined extension patterns
 Same extensibility approach for all SAP products
Cover last mile of adaptation for key users
 Similar approach as in competitor products
 Utilize tight coupling to
 extend within SAP transactions
 achieve high performance
 leverage embedded S/4HANA analytics
 provide hooks for side-by-side extensibility
 Many proven and stable mechanisms exist,
e.g. UI adaptation, field extensibility, ... –
complemented by business configuration
 extension points foreseen by SAP

59
PUBLIC
Extensibility Cloud and On Premise
SAP Business Suite
Classic customer and partner development
Extensions Modifications
User Interface
Application
Database
Side-by-side
extensibility
on
SAP
HANA
Cloud
Platform
APP
UI
DB
User interface
User interface
Application
Application
Database (SAP HANA)
Database (SAP HANA)
Public APIs SAP Customer, Partner
Key user extensibility
Key user extensibility
Classic extensibility
Cloud
In-App Extensibility
On-Premise

60
PUBLIC
Extensibility

61
PUBLIC
SAPUI5 Flexibility Services
SAPUI5 flexibility services provide capabilities to flexibly adapt an app and store the changes context-based in a layered
repository. This allows, for example, customers to create their own SAPUI5 entities based on the delivery of SAP without having
to modify existing entities in a lower layer. At runtime all changes made to an app are interpreted to define the final UI.
Key capabilities
➢ Provide flexibility infrastructure used by several flexibility tools
➢ Allow separation of content delivered by SAP, industries,
partners*, customers and end-users
➢ Store UI changes in a layered repository
➢ Retrieve UI changes at runtime and generate the final UI
➢ Enable context-based UI adaptation*
➢ Provide for different user groups tools to adapt the UI in a
convenient way, e.g. WYSIWYG tools for key users at runtime
Benefits
➢ Simplified, cost-effective, and easy to use UI change process
➢ Increased end user acceptance through optimized UI layouts
➢ Upgrade safe when adapting the UI
➢ Easy and intuitive way for business users to change the UI

62
PUBLIC
1. In Adaptation Mode > Create custom field(s)
Key User Extensibility - Custom Fields & Logic
2. Define Custom Fields & Logic
(Note: here we extend the OData service)
3. Manage the Usage

63
PUBLIC
ABAP Custom Code Migration
Suite on any
database
Suite on HANA
S/4HANA on premise
S/4HANA Cloud
SAP HANA and
Unicode migration
Simplification changes
Side-by-Side Extensibility based on HANA Cloud Platform
Classic Extensibility with full access to ABAP development tools
Key User In-App Extensibility
Extensions

64
PUBLIC
Cloud - Transition from Classic to Cloud
Minimize customer / partner individual steps and communication
Separation of Concerns
➢ Clear logical separation of custom / partner objects and SAP standard objects
➢ Access to SAP objects only via whitelisted APIs, no modifications, enhancements follow strict guidelines
➢ Regular SAP updates must not lead to adaptation needs for custom / partner code
SAP Standard
Customer / Partner
Classic extensions
SAP Standard
Separation of
Concerns
Public Model / Whitelist
BAdI CDS APIs
Side-by-side
(SAP HCP)
In-app
Extensions designed for cloud
• Modifications
• Usage and include
of SAP objects
without limitation
• Direct DB writes
• Dynamic calls
• Implicit
enhancement
spots
• Code generation
Access via
white-listed,
stable interfaces
(API HUB)

65
PUBLIC
SAP Web IDE - Key Use Cases
Extend SAP Fiori applications
• Extend existing SAP Fiori applications via predefined
extension points
• Use text editors and graphical tools
Build SAP Fiori, SAP S/4HANA & SAPUI5
applications
• Leverage out of the box code templates based on SAP best
practices
• Easily deploy to various SAP platforms
Develop IoT applications
• Jumpstart development with IoT-specific templates
• Use predefined SAPUI5 components targeted for IoT
Develop SAPUI5 hybrid mobile applications
• Create, test, build and deploy Apache Cordova hybrid
mobile apps
• Leverage mobile services integration

66
PUBLIC
SAP Web IDE: Landscape Overview
External services
Plugins & templates
SAP Gateway
(OData services)
Internet of Things
Overview page
Hybrid App Toolkit
ABAP
SAP HANA (OData services)
REST services
SAP Web IDE
SAP HANA apps
SAP Fiori apps
IoT apps
Hybrid mobile apps
SAP
HANA
SAP HANA
Cloud
Platform
SAP
Mobile
Platform
Data Sources
SDK

67
PUBLIC
SAP HANA Cloud
Permanent File
System
(App Projects)
Permanent File
System
(App Projects)
DI (Che) Orion
R
R GIT
(App Projects)
GIT
(App Projects)
R
R R
External Services
UI5 Version
GW, HANA, XS,
Git, JAM . . .
HTTPS
R
Logger
Notification
Manager
R
UI5 Version
UI5 Version
R
Learning Center
R R
R
Dispatcher
SAP Web IDE: Landscape Overview

68
PUBLIC
SAP Web IDE
SAP Gateway
SAPUI5
Version
WS Manager
SAP HANA Cloud Connector
Git
(App Projects)
SAP HANA Cloud Platform
Business Suite / ERP
HTTP(S)
Corporate Network / Intranet
Windows OS
Linux OS
Mac OS X
(all 64-bit)
HTTPS
Cockpit
Permanent File
System
Browser
Trusted RFC
Internet / Cloud
HCP Cockpit
Destination
SAP Web IDE: Develop on SAP Hana Cloud Platform

69
PUBLIC
SAP Web IDE: Run SAP Fiori Apps on SAP Hana Cloud Platform
SAP Web IDE
SAP Gateway
Via SAP HANA Cloud
Connector
WS Manager Git
(App Projects)
HTTPS
HTML5 Apps
Dispatcher
User Workspace
IDE in browser
Internet / Cloud
Application
OData
OData
Push / Fetch
SAP S/4HANA
Trusted RFC
Deploy

70
PUBLIC
IDE Platform
Toolsets
Platform
SAP
Core
Resourc
e index
Perspect
ive
File
mgmt
Docume
nt
Shell
(toolbar, menu, repo browser, etc.)
Console,
Log
HCP/XS
Interface
Monitor
Selection
, Focus
Docume
ntation
Preview Run
Source
control
Problem
Project mgmt
(setting, template,
etc.)
Workspace (orion/DI)
interface
Editor and generic language services
(validation, formatting, snippet, outline, etc.)
Specific language services
(JSON, JS, XML, YAML, CSS)
Mock data modeler Templates JS service
Bootstra
p
Plugin services
(proxies, registration, interfaces and events, etc.)
Configuration
management
Debug
hook
Error
management
UI5
(project, run, metadata
handler)
Fiori
(specific XML/JS services, ABAP interfaces, learning center)
HANA
HCP
Extensio
n
HCI FLP
SAP Web IDE - Component layers

71
PUBLIC
Developer can install the SAP Web IDE on his/her local machine as a co-IDE to the cloud version for offline development.
Personal edition for productive usage
➢ Single developer on local machine
➢ Use as a co-IDE to the cloud version
➢ Quarterly releases
➢ Subset of SAP HANA Cloud Platform edition capabilities for offline
development
➢ Data consumption and deployment using connectivity with on-premise
backend systems
➢ Included with SAP HANA Cloud Platform license
Application build for developers
➢ Minification of the application's JavaScript files
➢ Collection of files into a distributable runtime package
SAP Web IDE – Personal Edition

72
PUBLIC
Browser
SAP Gateway
Business Suite / ERP
HTTP(S)
Trusted RFC
Local
SAP Web IDE
Permanent File
System
Orion Git
(App Projects)
SAPUI5
Version
SAP Web IDE – Personal Edition

73
PUBLIC
SDK for extending SAP Web IDE by adding your own templates and plugins. You may offer your plugin through a marketplace
for customers, partners and developers.
Plugin and template creation with SAP Web IDE SDK
➢ Tutorials and how-to
➢ Guidelines and best practices
➢ API reference for developing plugins
➢ Catalog for plugins and templates
➢ Framework for plugins lifecycle
➢ Wizard for creating new plugins and templates
➢ Ability to reuse existing template screens and user created templates
➢ Auto complete for editing template files in code editor
➢ Test plugin projects within SAP Web IDE
➢ Deploy plugins
SAP Web IDE - SDK

74
PUBLIC
SAP Fiori Architecture - Mobile
SAP Web IDE - What is SAP Hybrid App Toolkit (HAT)?
Enables developers to develop and build Apache Cordova
hybrid apps in SAP Web IDE
HAT has 3 components that are provided as a plugin and
an add-on to SAP Web IDE:
 The SAP Web IDE plugin for Hybrid App Toolkit
 HAT Connector to local build environment (Cordova CLI) or Cloud
Build Service (requires SAP HCP, mobile service for SAP Fiori
subscription)
 SAP Hybrid App Toolkit Developer Companion
SAP Web IDE
HAT
(add-on)
Android SDK* Tools
XCode
HAT Connector
Kapsel
Hybrid
Application
Toolkit
(plugin)
SDK* : Software Development Kit
Cloud Build Service*
Visual Studio
Developer Companion

75
PUBLIC
SAP Web IDE - SAP Hybrid App Toolkit Companion
The SAP Hybrid App Toolkit Developer Companion is
a mobile application that runs on a mobile device or device emulator.
➢Shortens time to value by eliminating the need to rebuild and redistribute
entire app
➢Built using the Cloud Build Service, no on-premise development
landscape required
➢Follows same build flow as your production app (aka support for
branding, custom app name)
➢Supports 3rd party/custom plugin integration
➢Enables push testing
➢Integrated into the Fiori mobile app delivery lifecycle
Developer
Companion
Kapsel

76
PUBLIC
SAP HAT - Cloud Build Service
The Cloud Build Service is a feature of HAT provided through SAP
HCP, mobile service for SAP Fiori
➢Creates hybrid apps for iOS and Android using completely cloud-based
tools. No on-premise installation necessary.
➢Supports inclusion of public, 3rd party and custom Cordova plugins
➢Automatically inserts the app into Mobile Place, SAP’s enterprise app
store for mobile devices, for simplified lifecycle management
➢Requires a subscription for SAP HCP, mobile service for SAP Fiori for
each user that consumes an app built by the service
The Cloud Build Service is a feature of HAT provided through SAP HCP,
mobile service for SAP Fiori

77
PUBLIC
SAP Web IDE – SAP Fiori Elements for Hybrid apps
Hybrid templates are provided
➢ SAPUI5 Mobile Kapsel Application Project **
➢ SAPUI5 Master Detail Kapsel Application **
➢ SAPUI5 Master Detail Kapsel Offline Application **
➢ SAP Fiori Worklist Application *
➢ SAP Fiori Master Detail Application *
➢ CRUD Master-Detail Application *
➢ SAPUI5 Application *
➢ List Report Application *
Create a new project
File > New > Project
Additional templates of any kind can be created, added and managed

78
PUBLIC
SAP Fiori Elements - Overview
SAP Fiori Elements increase developer efficiency, consistency, and quality
through a metadata driven approach to SAP Fiori app development.
Key capabilities
➢ Provide high code quality templates and controllers for re-use
➢ Draft, application infrastructure, and message handling support
➢ SAP Fiori launchpad integration, tiles, catalog, navigation
➢ Support of UI Flexibility, xRay and automatic test tools
➢ SAP WebIDE Plugin, GIT integration, App Descriptor support
➢ CDS annotations and SAP Web IDE Annotation Modeler
➢ Break-out capabilities
Benefits
➢ Scale SAP Fiori development by applying a meta data driven approach
➢ Reduce amount of frontend code for SAP Fiori apps
➢ Foster design consistency and keep apps up-to-date with evolving design guidelines
➢ Embedded in overarching SAP Fiori concepts for UI flexibility, lifecycle management
and application notion

79
PUBLIC
At Runtime… Application Developer Design Time…
Web IDE
Annotation Modeler Plugin
Project Template Wizard
ABAP Dev Tools in Eclipse
Core Data Service
Definitions
Gateway Service Builder
(Exposure via SADL)
Application Developer
OData Service
exposes data & relations
OData
Annotations
apply terms to
service elements
OData
Vocabularies
define semantics
through terms
What is displayed
UI5 Views
+
UX + Central Template Dev
UI5 XML View Templates
based on Vocabulary Terms
using UI5 Smart Controls &
generic controller logic (draft, …)
How is it displayed
SAP Fiori Elements – How it works: Bird’s-eye view (1,000 ft)

80
PUBLIC
SAP Web IDE – Fiori Elements: Smart Templates
A template wizard guides the user through the definition of an application and generates the code.
Standard templates are provided
➢ Basic SAPUI5 project
▫ SAPUI5 Application Project
➢ SAP Fiori Elements
▫ List Report Application
▫ Overview Application
▫ Analytical List Page
➢ SAP Fiori application
▫ Fiori Master Detail Application
▫ Fiori Master Master Detail Application
➢ Plugin Development
➢ Extensibility of SAP Fiori and SAPUI5 applications
Sample applications
➢ easily ramp up Fiori development by audited ready-to-run end-to-end samples
Template selection for new component
Template selection for new project

81
PUBLIC
SAP Fiori Elements
SAP Fiori UI Development with SAP Fiori Elements & UI Flexibility
Freestyle design
Coding
Hybrid design
Coding &Template
Smart design
Template based
End user - Personalization
Runtime context
Designtime
Key user – Run-time adaptation
➢ No coding
➢ Highest
development
efficiency
Development Efficiency
Development Flexibility
Industry
Runtime
role locale
variant
device …
➢ Manually coded
➢ Highest
development
flexibility
SAPUI5 Controls
SAP Fiori Elements
Business data
(SAP Gateway / OData)
Semantic meta data
(OData annotations)
Partner
Administrator
End User
UI Flexibility

82
PUBLIC
OData InA
OData/HTTP InA/HTTP
Database Tier
UI Integration Tier
R
R
SQL R
Service Tier
UI Tier
Application Tier
CDS
Open, flexible, and standardized Programming Model – 1/3
• Independent of application tier, decoupled via a small number of HTTP-based protocols
• Support wide range of devices and device capabilities
• Cloud-ready, scalable  again HTTP helps a lot to get there
• Focus on end-user experience
• Efficiently build large number of consistent, responsive apps
• Stay open for potential change to new UI technologies, UI frameworks, specialized
protocols (over HTTP)

83
PUBLIC
• Consistency for users with respect to SAP Fiori® Design and UX across all apps and
across all Application Tiers
• Fast UI innovation for the end user decoupled from Application Tier
• Reuse of the entire SAP UI technology and design investments and innovations
for all Application Tiers
• Contains all SAP UI related artifacts and tools,
e.g. SAP Web IDE, SAPUI5 library, SAP Fiori apps
• Mobile and cross-system services (e.g. Collaboration, Search, Analytic aspects)
• Single point of access for multiple application tiers
• Single point for authentication, navigation and interoperability
• Mediator between UI and application tier: hybrid system landscapes/deployment scenarios
OData InA
OData/HTTP InA/HTTP
Database Tier
UI Integration Tier
R
R
SQL R
Service Tier
UI Tier
Application Tier
CDS

84
PUBLIC
OData InA
OData/HTTP InA/HTTP
Database Tier
UI Integration Tier
R
R
SQL R
Service Tier
UI Tier
Application Tier
CDS
• SAP HANA DB for SAP S/4HANA
• Wide variety of existing and emerging application servers
• Access to database tier via CDS and SQL
• Virtual Data Model (VDM): Database- and UI-independent, basis for generic infrastructure
(e.g. Extensibility, SQL-optimization)
• Service tier defines contract and guarantees isolation

85
PUBLIC
UI development with a metadata-
driven approach (templates of
SAP Fiori Elements) and support
for flexible freestyle Apps
CDS as the one and only
technology for data definition
with advanced view building
capabilities and supporting
declarative business logic
Annotations are used to influence
the SAP Fiori Elements but in
addition the runtime behavior for
transactional processing, analytics
and search
SQL Views are generated by CDS
for runtime access by SADL and
BW
SAP Fiori User Experience
for all devices and users
with role-oriented design
Editors for the programming model
artefacts in mostly homogenous
development environment
SAP Gateway with OData Hub for
multiple backends or as a service in
the cloud with infrastructure in the
ABAP backend
SADL dispatches requests in the
new CDS-based programming model
to BOPF for transactional execution,
to SAP Business Warehouse for
advanced analytics. Default is query-
pushdown to SAP HANA
BOPF (now part of SAP NetWeaver)
offers well defined code-exits for
structured ABAP business logic
including stateless and draft support
Active data and draft data are
persisted in different tables with
orchestration by BOPF
SAP S/4HANA - ABAP Programming Model

sap-fiori-ux-architecture-for-s4h-1.pdf

sap-fiori-ux-architecture-for-s4h-1.pdf

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to sap-fiori-ux-architecture-for-s4h-1.pdf

Similar to sap-fiori-ux-architecture-for-s4h-1.pdf (20)

Recently uploaded

Recently uploaded (20)

sap-fiori-ux-architecture-for-s4h-1.pdf