Sap fiori-ux-architecture-for-s4h

1© 2014 SAP SE or an SAP affiliate company. All rights reserved.
Version 4.2
December 2016 (public roll-out: Jan ’17, update 09.02.2017)
SAP Fiori® User Experience - SAP S/4HANA
Architecture Deep Dive

© 2016 SAP SE or an SAP affiliate company. All rights reserved 2Public
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

SAP Fiori Apps
Product Qualities
Modern, internet-educated UX
with state-of-the-art performance
+++
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
+++
Integration of OLAP and OLTP
Completely Fiori HANA OptimizedCloud Ready

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

SAP Fiori Apps
Product Qualities - Design
Visual design
 SAP Fiori 2.0 offers a refined visual language. Clean and
consistent layouts throughout the user interface convey the
content with clarity. Experience modern, visually pleasing
aesthetics with a strong focus on ease of use
Information architecture
 Give business users ready access to the information they
need to complete their tasks
Interaction patterns
 Harness simple and intuitive interactive patterns to boost
productivity company-wide

SAP Fiori Apps
Technical Capabilities
 Support for multiple devices and form factors - Maximize usability
using a desktop PC, tablet, or smartphone
 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
 UX app extensions - 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
 Ready for mobile enablement - Seamless, secure mobile access to
SAP’s Fiori apps via the Internet
 Based on SAPUI5 - Enterprise-ready UI development toolkit based on
HTML5 and JavaScript
 Powered by SAP HANA - Run analytical SAP Fiori apps and object pages
on SAP’s powerful in-memory database platform

SAP Fiori Architecture
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

Overview
 SAP Fiori apps built with SAPUI5 technology (web) and
iOS (native - 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 through OData services during runtime

On-PremiseSAP S/4HANA
Cloud Edition
High-Level Overview
SAP S/4HANA
SAP S/4HANA Business Logic
SAP Fiori front-end server
SAP Fiori apps OData ServicesSAP Fiori apps OData Services
SAP Business Suite
(ERP, SRM, …)
SAP S/4HANA …
Developer
SAP HANA Cloud Platform
Tools
ABAP in Eclipse
Backend Services
SAP Web IDE
SAP Fiori user
interfaces
Build/Packaging
Services
SAP Fiori Client /
packaged app
Web

SAP HANA Cloud Platform On-Premise
High-Level Overview – SAP Fiori Cloud (internal 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 /
packaged app
Web Developer
On-Premise
ABAP in Eclipse
Backend Services
SAP Fiori Cloud
SAP Fiori apps
SAP Web IDE
SAP Fiori user
interfaces
Build/Packaging
Services
1) For clients accessing the system from within the corporate firewall: no
SAP S/4HANA business data passes through the cloud

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

Developer
On-Premise
High-Level Overview – SAP Fiori Mobile on premise
SAP Business Suite
(ERP, SRM, …)
SAP S/4HANA …
Web /
SAP Fiori Client
SAP Mobile Platform
(optional)
Tools
SAP Web IDE
SAP Fiori user
interfaces
ABAP in Eclipse
Backend Services
Build/Packaging
Services (opt.)SAP Fiori front-end server
Web via SAP Fiori Client /
packaged app

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
packaged app
Web /
SAP Fiori Client
Developer
Tools
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
Runtime Services
Deployment/
Discovery
Services

packaged app
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 (optional)
Runtime Services
Developer
Tools
Fiori User
Interfaces
ABAP in Eclipse
Backend Services
Deployment/
Discovery
Services
SAP Web IDE
SAP Fiori user
interfaces
Build/Packaging
Services
SAP Fiori Cloud
SAP Fiori apps OData Provisioning
* Optional offering for On-Premise
selected SAP Fiori apps
*
**planned

Cloud
SAP S/4HANA Cloud
packaged app
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 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
Customer/Partner extensions
ODataSAP Fiori apps
SAP Fiori (optional)
Runtime Services
Deployment/
Discovery
Services

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
Includes planned
Innovations

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)
 SAP Fiori technology components
 SAP Fiori launchpad
 Metadata driven UIs - Smart Controls & Smart Templates
 ABAP infrastructure components
 Draft Infrastructure for transactional Logic
 SADL for CDS read access
 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
Includes planned
Innovations

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

Sap Fiori Front-end server (SAPUI5, SAP Fiori launchpad & SAP Gateway)
 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)

Web-based Entry Point for SAP Fiori Apps across Platforms and Devices
 SAP Fiori launchpad is a role based, personalized and
real-time aggregation point for business applications
and analytics.
 It runs on multiple devices, using responsive web
design, and is deployable on multiple platforms.
 It is designed according to the simple and intuitive SAP
Fiori user experience, while supporting established UI
technologies.

Edit mode for instant
personalization of
groups and tiles
SAP Fiori launchpad - UX
Search across and
within apps to get
immediate answers
Role-based content
definition
Group tiles for
personalized
content organization
News and feeds
enhance collaboration
Color coding alerts
user for any overdue,
new or immediate
action
Dynamic charts
provide high level,
real-time overview
Launch SAPUI5, Web
Dynpro ABAP*, SAP
GUI for HTML* and
arbitrary URLs
*on selected devices

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

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

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)
FrontendBE
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
FrontendBE

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
resolvesLaunchpad Logic
Trusted RFC
contains Authorization
Profile
Authorization
Profile
determines
determines
refers to
refers to
Group
contains
resolves
Catalog
Menu

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

Analytics: Conceptual View
SAP HANA / Any DB
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

SAP Fiori UX
Search
Capabilities
 Search and federation across business objects and
across system boundaries
 Navigation into applications
 Flexible, faceted search for drilling down
with analytical charts
 Sophisticated autosuggest

Detailed Search and Object Pages – on Premise
Search
 State-of-the-art search experience including
facetted search
 Intuitive Business Object overview at a glance
 High-Performance powered by SAP HANA
 Spanning the entire Business Suite
Navigation
 Powerful contextual navigation by browsing the
related web of business entities
 Comprehensive 360° view on business entities
 …

Detailed Search
Key Features
 Free text search across Suite Business Objects, all SAP Fiori
applications and KPI tile
Easy Administration
 Tasklists to take care of search connector activation and update
Model driven development of Search Models
 Search models directly consume DB tables
 Exposing relevant search data for search
 Target architecture is to use CDS views (Search@CDS)
Runs on SAP HANA only
 Design time ABAP (Enterprise Search);
 Runtime ABAP/HANA

Artifacts for customers
Frontend Server
 Mainly FIORI specific assignment of FIORI catalogs via UI roles to
users to allow navigation
SAP S/4HANA
 Search Models define the runtime Search connectors
 Model/Connector authorizations to restrict access to scenario
specific connectors (also with regards to performance)
 Instance authorizations to restrict access to allowed result entries
 Tasklists automate creation and updates of connectors
SAP HANA DB
 Connectors area generated at setup time, actually generated views
in HANA DB
UI Roles
FIORI
Catalogs
Search
Models
Model/
Connector
Authori-
zations
Search Connectors/
Generated Views
SAP HANA DB
SAP S/4HANA
Frontend Server
Instance
Authori-
zations
Tasklists

Notifications Component Overview
Planned Innovations

* Requires SAP Fiori mobile service
Running SAP Fiori in the Cloud
Key activities
Manage cloud account, resources, users and apps
Enable and configure SAP backend (on-premise)
Connect cloud account to on-premise landscape
Administrator
Access apps via web browser or mobile device
User
Run
SAP Fiori apps
Develop
custom Fiori apps
Extend
SAP Fiori apps
Optimize for mobile experience*
Brand and customize the look and feel
Business Expert
& Developer Prototype
new Fiori apps

* optional license
Key building blocks for running SAP Fiori in the cloud
 Provide a role-based, personalized entry point to
SAP Fiori apps with SAP Fiori launchpad
 Manage and customize content with SAP Fiori
Configuration Cockpit
 Manage account and destinations via administration
cockpit and OData provisioning service
 Connect securely to backend via Cloud Connector
 Style the solution with UI theme designer
 Prototype new applications with Build service
 Customize, extend, develop apps with SAP Web
IDE
 Enhance apps with mobile services for SAP Fiori*
SAP Web IDE UI theme designer
SAP Fiori launchpadSAP Fiori apps

SAP HANA Cloud Platform, OData provisioning
Connecting the SAP Fiori apps to your SAP Business Suite
Expose business data and business logic as OData services for
building user-centric applications in the cloud
Administer (register, activate, maintain) OData services exposed
from SAP Business Suite backend*
Assign multiple destinations to same service for multi-origin
composition
Leverage HCP qualities such as monitoring, metering, supportability,
security, multi-tenancy, rolling software updates
Alternative OData service for SAP Business Suite scenarios to SAP
Gateway Hub (on-premise)
* Prerequisite: Gateway backend enablement add-on (IWBEP) and valid SAP Gateway backend license for connected SAP Business Suite systems
Cloud connector
SAP Fiori UX
HCP OData provisioning
SAP backend*

SAP Fiori Cloud - Architecture at a Glance
SAP HANA Cloud Connector
SAP HCP Cockpit
UI theme designer
SAP Fiori launchpad Designer
SAP Cloud Identity
SAP HCPms (mobile services)
SAP HANA Cloud Integr.
Non
SAP
SAP Business Suite
SAP Gateway Hub*
OData
SAP HANA Cloud Platform (HCP)
OData
SAP Web IDE
AdminTools
Add.
Services
http
http
ON-PREMISECLOUD
UISERVICESDATA&
PROCESSWS
SAP Fiori launchpad
SAP Fiori Apps

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
TasksContacts

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

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)

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
DirectDirect
Any Browser SAP Fiori Client

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)
 Client-side interface with SAP Afaria for configuration &
certificate management
 SAP Mobile Place / SAP Mobile Secure integration
 Supportability Enhancements
 Android Third Party Attachment Viewer
 Demo Mode (http://www.sapfioritrial.com/)
Fiori Frontend Server
(e.g. SAP Gateway)
SAP Mobile Platform
3.0 SP03 PL02 /
HCPms
Optimized
Optimized
DirectDirect
Any Browser SAP Fiori Client

SAP Fiori Client - Available on all major App Stores
Google Play Store for AndroidApple App Store for iOS
Support: iOS 8.x – 9.x Support: Android 4.3 – 5.x Support: Windows Phone 10 & Windows 10
Microsoft App Store for WP & Windows

Deployment of SAP Fiori Front-end server (FES) - as central hub
General Recommendation
 Deployment of SAP Fiori applications 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 SAP Fiori applications
Example:

SAP Fiori Front-end server (FES) - Landscape Planing
SAP Fiori apps reference the FES as product.
The FES is downloaded and installed as part of the Fiori apps implementation.
The FES defines a valid release range (and the preferred release level) for the underlying SAP NW release, the SAP_UI add-
on and Gateway add-on, if required.
The FES is shipped in accordance with SAPUI5 releases and SPSs.
You can find the FES in the product availability matrix: https://support.sap.com/pam
if you search for “SAP FIORI FRONT-END SERVER 2.0” or “SAP FIORI FRONT-END SERVER 3.0”
 2219596 – Fiori Front-End Server 2.0
 2355644 – Fiori Front-End Server 3.0 (for Fiori 2.0)
Please be aware about the following database restrictions
 Up to SAP S/4HANA, you can run the Front-End Server with Any DB (including Suite on HANA)
 With SAP S/4HANA, the Front-End Server has to run on a SAP DB.
More Info: https://uacp.hana.ondemand.com/http.svc/rc/PRODUCTION/pdffee10356f3b43a35e10000000a44538d/1511%20001/en-US/UITECH_OP1511_FPS01.pdf

SAP Fiori Security - General
Reverse
Proxy
SAP
Gateway
SAP
S/4HANA
Core
Secure Configuration /
Network Setup / Authentication
Authorization
 Network and Reverse Proxy Setup
 Authentication
 User Management
 Authorization
 System Hardening (Securing Trusted RFC connection)
SAP HANA
DB

SAP Fiori Security - Authentication Use Cases
 Use Case 0: Form-based Initial Authentication
 Use Case 1: SSO via SAML 2.0 (recommended - please refer to illustration below)
 Use Case 2: SSO via SPNego / Kerberos
 Use Case 3: SSO via Logon Ticket
 Use Case 4: SSO via X.509 certificate
Reverse
Proxy
SAP
Gateway
SAML 2.0 IdP
A typical use case is for customers to access one or more SAP Fiori apps from the public internet. In this case, single sign-on can be implemented using SAML 2.0
based authentication in conjunction with IdP (Identity Provider) software such as Ping Federate or Microsoft’s Active Directory Federation Service (AD FS).
SAP
S/4HANA
Core
SAP HANA
DB

Extensibility - Roles
Business User DeveloperKey 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

Extensibility - Overview on Capabilities
Extensibility based on SAP HANA Cloud Platform
 Enable an SAP Fiori® and mobile user experience
 Integrate with other cloud solutions (for example SuccessFactors and
Ariba, both SAP companies) and third-party solutions
 Take advantage of application services of SAP HANA Cloud Platform
(cloud portal, mobile documents, output management, et al.)
 Provides a full-fledged development platform to build extension
applications (Java, SAP HANA native development)
Key User Extensibility
 Custom fields and tables, analytics and forms extensibility
 Change or add business rules and business logic (cloud ABAP
Web editor)
SAP S/4HANA - In-app extensibility:
Context-aware extensions, focus on tight integration
Side-by-side extensibility w. SAP HANA Cloud Platform
Weave external content into your solutions
+
Classic Extensibility
 Full access to ABAP (for example, Eclipse)
On-premise Cloud

Extensibility Cloud and On Premise
SAP Business Suite
Classic customer and partner development
Extensions Modifications
User Interface
Application
Database
Side-by-sideextensibilityon
SAPHANACloudPlatform
APPUIDB
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

SAP S/4HANA In-App Extensibility Scenarios
Backend-Application
(ABAP | CDS)
Database Table
OData Service
User Interface
(Fiori)
Frontend
Backend: ABAP Server
SAP owned
In-App Extensibility
Custom Backend-
Application
(ABAP | CDS)
Custom
Database Table
Custom
OData Service
Custom User
Interface (Fiori)
OData
SAP Fiori lauchpad
UI AdaptationI1
CustomFieldsI2
Custom Business LogicI4
CustomBusinessObjectsI5CustomUII6
Custom Analytics / FormsI3

Extensibility

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

SAPUI5 Flexibility Services: UI Adaptation at Runtime (RTA) for Key Users
1. Switch your SAP Fiori application to Adaptation Mode 2. Intuitively Manage your UI Elements
 Hide or add fields to the UI
 Hide or add groups of fields to the UI
 Move UI elements per drag and drop
 Rename labels and titles
 Group/split several fields

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

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

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)

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

SAP Web IDE: Landscape Overview
External servicesPlugins & 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 SourcesSDK

SAP Web IDE
SAP Gateway
SAPUI5
Version
Orion
SAP HANA Cloud Connector
Git
(App Projects)
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

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

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

SAP Web IDE plugins, out of the box
Create and deploy hybrid
mobile SAP Fiori apps
based on Apache
Cordova and
Kapsel
Hybrid
Application Toolkit
Develop your own
OData model and
view it graphically
OData
Model Editor
Create, package &
deploy a SAP Fiori
overview page
application
SAP Fiori
Overview Page
Create chart extension
packages for SAP
BusinessObjects
Lumira and other
products
VizPacker
Create site templates,
page templates, pages,
and widgets
SAP HANA
Cloud Platform, portal
service*
Deploy SAP Web IDE
developed application
into SAP Enterprise
Portal*
SAP Enterprise
Portal
Create self-defined
transactional SAP Fiori
apps for SAP Event
Management
SAP Events
Management
* Previously known as SAP HANA Cloud Portal
Create, package &
deploy an Internet of
things application
IoT
You can modify MII
artifacts, create new
artifacts and sync them
back to SAP MII
system
MII

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:
o The SAP Web IDE plugin for Hybrid App Toolkit
o HAT Connector to local build environment (Cordova CLI) or Cloud
Build Service (requires SAP HCP, mobile service for SAP Fiori
subscription)
o SAP Hybrid App Toolkit 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

SAP Web IDE - SAP Hybrid App Toolkit Companion
The SAP Hybrid App Toolkit Companion is
a mobile application that runs on a mobile device or device emulator.
 Enables a live preview of a web app created with SAP Web IDE
 Cordova based mobile app
 Contains Cordova, SAP mobile (Kapsel) and SAPUI5 libraries
 Automatically built during HAT installation
for iOS and Android
 You may also use a QR code to load the corresponding application
(double-click on Companion app and select Scan)
Companion
app
Kapsel

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

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

SAP Fiori Elements - Overview
SAP Fiori Elements increase developer efficiency, consistency, and quality
through a metadata driven approach to SAP Fiori application 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 applications
 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

Backend Developers
Create the data models for
the applications.
Define the semantics of the
data: Data types, information
structure, relations.
Data Model1
UI Developers
Compose the SAP Fiori app by combining
the SAP Fiori Elements with the data.
Fine-tune the UI by configuration and
breakouts/freestyle development where
needed.
Composition2
Templates
Joint Designer & Developer team
Create templates for commonly used
page types, layouts, and
compositions.
SAP Fiori Elements - Creating the Fiori Experience

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 EfficiencyDevelopment 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

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)

• 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 applications
• 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

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

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

© 2016 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have 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 SE’s or its affiliated companies’ strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies 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. 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.

Sap fiori-ux-architecture-for-s4h

More Related Content

What's hot (20)

Similar to Sap fiori-ux-architecture-for-s4h (20)

Recently uploaded (20)

Sap fiori-ux-architecture-for-s4h