A Hitchhiker's Guide to SAP Fiori User Experience
and its Technologies
Oliver Graeff, Director – Product Management, SAP
October 2022
We care about your needs
"If you start with a technology then it just becomes
a feature list, but when you start with a person
then really amazing things happen.”
Mike Vanis - Interaction Designer
PUBLIC
2
SAP Fiori evolution
Casual users
Self-service apps
Power user
The new face of S/4HANA
Native mobile
for iOS & Android
Next steps of the Fiori evolution
Fiori Design System
9:41
Population
Overview
Filter
Total Population
2019
Updated 1h ago
All Countries
0-14 Yrs.
15-64 Yrs.
65 and Older.
Total
62,597,331
202,328,216
109,485,630
374,411,177
Population (millions)
140
120
100
80
60
40
0
Unite
Brazil
Russi
Japan
Mexic
Germ
Unite
Country
0-14 Yrs.
15-64 Yrs.
65 and Older.
Conversational
Consistent
Intelligent
Integrated
Design principles
2013
SAP Fiori
PUBLIC
2016
SAP Fiori 2.0
2019+
SAP Fiori 3
3
N
IG
ES W
D IE
P EV
SA PR
SAP FIORI
Introducing the Horizon Theme
We know that first impression matter. That’s why we’re
driving the next evolution for SAP Fiori by focusing on
fresh new themes in order to make our products more
approachable and delightful for our everyday users.
Our user insights-informed transformation will continue
in the coming months with improvements across all four
of our design pillars:
•
Aesthetics
•
Performance
•
Accessibility
•
Product Usability
PUBLIC
4
SAP Fiori Design System
SAP Fiori Design Guidelines
SAP Fiori's Horizon visual theme in SAP S/4HANA Cloud 2208 (video)
Horizon is available in SAP S/4HANA Cloud 2208
SAP Fiori Update: Major Horizon Next Steps Available Now – SAP S/4HANA Cloud 2208 and More
Developers can use Horizon on SAP Business Technology Platform
Horizon theme of SAP Fiori: productive usage for web applications
Horizon themes in SAP Launchpad service and SAP Work Zone
Horizon themes now available with the SAP Launchpad service and SAP Work Zone
Horizon themes in UI Theme Designer
Video
Horizon themes for Android & iOS mobile applications
SAP Fiori for Android & iOS: An all-new user experience for enterprise-ready mobile applications
PUBLIC
Source: https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android
5
Learn more
General information on SAP User Experience
Ø SAP Fiori Design Guidelines
Ø SAP Fiori product page
Ø SAP Fiori topic page in the SAP community
Additional information
Ø openSAP course “SAP Fiori overview”
Ø SAP Fiori Road Map, as storyboard
Ø The Experience Mindset: Redesigning How We Build
Products at SAP
Ø Horizon demo video
Ø SAP Fiori apps reference library
Ø SAP Fiori lighthouse scenarios with SAP S/4HANA
PUBLIC
6
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
Citizen Developer
Developer
Develop/
Extend/
Deploy
Pro-Code
Visual Studio
Code
(non-ABAP)
SAP Fiori tools
Low-Code
No-Code
SAP Business Application
Studio
SAP
AppGyver
Key User
Adapt
on
ce
pt
Business User
Desktop / Web
Run
SAPUI5
SAP GUI for HTML, Web Dynpro
SAPUI5 Flexibility
SAP Work Zone
SAP Fiori
launchpad
Mobile
Native
Android / iOS
SAP Mobile
Start
SAP Fiori tools
SAP Screen
Personas
(SAP GUI /
WD ABAP)
ABAP
Development
Tools in Eclipse
SDK for iOS /
Android
Local Laptop
SAP Business Technology Platform
SAP S/4HANA Cloud
Mobile
Development
Kit
SAP Business Technology Platform
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
7
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
on
ce
pt
Business User
Desktop / Web
Run
SAPUI5
SAP GUI for HTML, Web Dynpro
SAP Work Zone
SAP Fiori
launchpad
SAP Business Technology Platform
SAP S/4HANA Cloud
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
8
Digital Experience for SAP Fiori:
SAP Work Zone & SAP Fiori Launchpad
How can business users easily access relevant applications
and services to get their job done more efficiently?
Consistency through harmonized user experience | UX integration via a central point of access
PUBLIC
10
Services portfolio
SAP Launchpad service
SAP Work Zone
Blog post: Learn about the Key Components of SAP Work Zone and the Experience for the End User
PUBLIC
11
bs
a
PL
A
S
PUBLIC
iew
v
pre
12
Excursus: SAP Fiori deployment options and recommendations
On-premise
§ Launchpad as part of SAP Fiori front-end server
Gu
ide
Aug upda
ust ted i
202 n
2
§ SAP S/4HANA with embedded SAP Fiori experience
for standard applications
§ SAP Business Suite: SAP Fiori front-end server as
hub for multiple back-end systems possible
Cloud
§ Launchpad based on SAP BTP
§ SAP BTP tools to develop and extend apps
§ Central launchpad to integrate applications from
cloud and on-premise
PUBLIC
SAP Fiori Deployment Options and
System Landscape Recommendations
13
Entry points to SAP Fiori
My Home in SAP S/4HANA Cloud (video)
SAP Fiori Deployment Options and System Landscape Recommendations
PUBLIC
Source: https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android
14
The Strategic UI Technology of SAP Fiori
SAPUI5
SAPUI5 applications
Browsers
A single app
implementation
for all
§ Browsers
§ Platforms
§ Devices
Platforms
Devices
SAPUI5 Browser and Platform Support
PUBLIC
16
Building Modern Web Applications with SAPUI5
SAPUI5 is an HTML5 framework for creating cross-platform,
enterprise-grade applications
•
Consistent UX: SAPUI5 enables the SAP Fiori design evolution across
SAP solutions (and beyond).
•
Use anywhere: SAPUI5 allows a single, responsive app implementation
for all browsers, platforms, and devices.
•
Hundreds of enterprise UI elements to build professional UIs. UI5 Web
Components extend UI5 to all web technology stacks.
•
Powerful extension options: You can adapt SAP standard apps and
customize UIs without coding.
•
Flexible tools for any developer: SAPUI5 comes with tools to efficiently
build, test, and deploy apps. Both in pro-code as well as low-code ways.
•
Innovations: SAPUI5 brings a separation of apps and framework to
centrally innovate while staying upgrade-compatible.
•
Open-Source: SAPUI5 qualities available as OpenUI5.
PUBLIC
Video: What is SAPUI5?
17
SAPUI5 is innovating with feedback from large-scale usage
2.150+
18M+
1.110+
SAPUI5 in
SAPUI5 apps with
millions of users in
SAP S/4HANA
unique users of SAPUI5 in
SAP SuccessFactors
SAP S/4HANA Cloud
customers using SAPUI5
apps productively
SAP Business Technology Platform
SAP Integrated Business Planning
SAP Business ByDesign
SAP Launchpad service
SAP S/4HANA Cloud
SAP Fiori launchpad
SAP Analytics Cloud
SAP Business One
14M+
Web Components
1.536+
unique users of
Web Components in
SAP SuccessFactors
SAP Business Technology Platform
SAP S/4HANA
Procurement
SAP BTP customers
building SAP Fiori apps in
SAP Business Application
Studio
Design
Partner
Open Source
Bringing the SAP
Fiori design system
Enabling a thriving partner
ecosystem
growing developer community
PUBLIC
SAP Cloud ALM
SAP Work Zone
SAP S/4HANA
SAP for Me
SAP IT
...
18
UI5 Web Components
PUBLIC
19
UI5 Web Components provide reusable controls without full SAPUI5 framework
UI5 Web Components
Header
Project Cloud Transformation
4 of 4
Revenue by Product | EUR




Option 2
Tecum


New PDF File

Sales Order

Leave Request Note

Old PDF File
John Miller
Tue June 9
Option 1
ID782545256-D47
Option 2
Avantel
John Miller
Tue June 6
ID234545256-D44
Option 3
Telecomunicaciones Star
ID125545256-A51
Option 4
John Miller
Tue June 5
Talpa
ID123555256-I05
ui5-card
ui5-datepicker
ui5-combobox
John Miller
Tue June 3
ui5-list
Programming Models
React
Angular
UI5 Web Components are not a successor of SAPUI5, they are complementary.
Going forward: UI5 Web Components enablement for OpenUI5/SAPUI5
PUBLIC
VueJS
UI5 Web Components home page
20
A tailored approach for every business solution
SAP Fiori
Elements
Patterns and Blueprints, low- to no-code
Patterns and Blueprints, pro code
SAPUI5
Programming model layer
Angular Fundamental
Library NGX
React
UI Components - Behavior
Technology Reuse Layer -
UI Components - Visual Design
Design Language
Fundamental
Library Styles
UI5 Web Components
Common CSS
Theming Base Content
UI Technology Options
Re-Use Technologies
PUBLIC
21
SAPUI5
What is SAPUI5?
SAPUI5 Demo Kit (https://ui5.sap.com)
PUBLIC
Source: https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android
22
Efficiently Developing SAPUI5 apps:
SAP Fiori elements
SAP Fiori elements provides enterprise-ready apps out of the box
Filtering
Actions
Sorting
Personalization
Variant
Mgmt
Export
to Excel
Search
Data Lists
Navigation
Object Details
PUBLIC
Editing
(incl.
draft
mgmt.)
Additional enterprise
readiness features
included are:
§
Accessibility
§
Internationalization
§
Mobile compatibility
§
Responsiveness
§
Performance
optimizations
§
Integration
§
Security checks
§
Lifecycle stability
§
Test automation
support
§
…and more
24
SAPUI5 freestyle vs. SAP Fiori elements approach
Efficiency
Flexibility
Manual coding
SAP Fiori
elements
Mix
Freestyle
Smart Controls
Regular Controls
Business data
(SAP Gateway / OData)
PUBLIC
Semantic meta data
(OData annotations)
25
SAP Fiori elements: OData annotations define attributes and relationships
How is it displayed?
SAP Fiori elements patterns
§ Overview page
§ List Report page
§ Object page
§ Analytical list page
§ Worklist page
What is displayed?
Business data
§ Semantic metadata /
annotation
§ Behavior
Provided by:
SAP framework development
at runtime
Provided by:
Application Developers
§ Consumption hints
“This entity can be edited”
“This is the currency for
the amount”
“Consumption hints”
Which fields allow a human to
identify the entity?
Which fields are clickable?
“These fields shall be
displayed together in a form”
SAPUI5 View
PUBLIC
“Behavior like creatable,
updatable”
26
Choose the right UI development approach for your SAPUI5 app
Freestyle SAPUI5
Flexibility
Overall
approach
Efficiency
Freestyle designs
Design
requirements
SAP templates
Web Development
Development
knowledge
Annotations
Own coding, own UI logic
Higher
PUBLIC
SAP Fiori elements
App ownership /
maintenance
Total cost of
development
Own annotations, SAP’s UI logic
Lower
27
SAPUI5 brings scalability and flexibility to SAP Fiori app development
Efficient development based on metadata
Framework for application development
UI element with visual design & behavior
UI5 Web Components
PUBLIC
SAPUI5
OpenUI5
SAP Fiori elements
28
Flexible Programming Model blends SAP Fiori elements and SAPUI5 freestyle
Developers have a continuum of options instead of an either/or decision
SAP Fiori elements
Metadata-driven
development using
annotations
Flexible Programming Model
Standard
floorplans
Standard
floorplans
+
custom
artifacts*
Efficiency
SAPUI5 freestyle
JavaScript framework
and UI library
Custom
layout*
Custom
+
layout
standard
building blocks
Flexibility
How to use SAP Fiori elements, SAPUI5 freestyle or a mix of both with the Flexible Programming Model
*leveraging standard building blocks and/or SAPUI5 controls / custom code
PUBLIC
29
SAPUI5 Knowledge
SAP Launchpad service
§ Getting started using free tier, personal trial, or regular enterprise account
§ Try out the tutorials
§ Read the blog posts
§ Check the documentation for details
SAP Work Zone
§ Product page: SAP Work Zone
§ Read the blog posts
§ Check the documentation for details
SAPUI5
§ https://ui5.sap.com/ with getting started, tutorials,…
§ SAPUI5 Community Topic Page
§ SAP Fiori elements
§ SAPUI5 Road Map
§ Blog post: Learning SAPUI5 for Beginners
§ openSAP: Developing Web Apps with SAPUI5
§ openSAP: Evolved Web Apps with SAPUI5
§ openSAP: Developing and Extending SAP Fiori Elements Apps
© 2022 SAP SE or an SAP affiliate company. All rights reserved. ǀ CUSTOMER
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
PUBLIC
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
30
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
Citizen Developer
Developer
Develop/
Extend/
Deploy
Pro-Code
Visual Studio
Code
(non-ABAP)
SAP Fiori tools
Low-Code
No-Code
SAP Business Application
Studio
SAP
AppGyver
Key User
Adapt
on
ce
pt
Business User
Desktop / Web
Run
SAPUI5
SAP GUI for HTML, Web Dynpro
SAPUI5 Flexibility
SAP Work Zone
SAP Fiori
launchpad
Mobile
Native
Android / iOS
SAP Mobile
Start
SAP Fiori tools
SAP Screen
Personas
(SAP GUI /
WD ABAP)
ABAP
Development
Tools in Eclipse
SDK for iOS /
Android
Local Laptop
SAP Business Technology Platform
SAP S/4HANA Cloud
Mobile
Development
Kit
SAP Business Technology Platform
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
31
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
Citizen Developer
Developer
Develop/
Extend/
Deploy
Pro-Code
on
ce
pt
Low-Code
No-Code
SAP Business Application
Studio
SAP
AppGyver
SAP Fiori tools
SDK for iOS /
Android
Mobile
Development
Kit
SAP Business Technology Platform
SAP S/4HANA Cloud
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
32
SAP’s Development Environments:
pro-code, low-code and no-code
Industry-specific
end-to-end processes
SAP BTP is the
foundation
Enterprise resource management
Spend management
Human capital management
Customer relationship management
Business Technology Platform
Create personalized experiences
that instantly work with SAP applications
PUBLIC
Build faster with business context
to meet change with agility
Run with confidence on a trusted,
enterprise-grade platform
App Dev
Automation
Integration
Data and Analytics
AI
Build and innovate
Optimize and
automate
Connect and simplify
Give data purpose
Infuse intelligence
34
SAP Business Application Studio on SAP BTP
A modern development environment, tailored for efficient development of
business applications for the Intelligent Enterprise scenarios
PUBLIC
35
SAP Business Application Studio - The Big Picture
Browser
based
access
Data Sources
SAP BTP
SAP Business Application Studio
Dev-Space
Additional Extensions
Internet / Cloud
Dev-Space
SAP Cloud Business Application
Workflow
Dev-Space
SAP Fiori
Open VSX
On-Premise
Additional
Extensions
Custom
Extensions
(per scenario)
•
•
•
•
Development
environment
File System
SAPUI5
Layout Editor
LSP
… and more
Source Control
SAP BTP
Cloud Foundry
PUBLIC
SAP BTP
ABAP
SAP S/4HANA
Cloud
SAP HANA Cloud
On-prem
ABAP
36
Why Low-Code/No-Code Application Development?
Bringing business and IT together to deliver new innovations and solve the most complex
business challenges.
Enhanced ROI by optimizing
existing investments using
simplified integrations from
SAP
Increased adoption
of new processes and
applications
Accelerated time to value,
using support for best
practices with industry- and
LoB-specific prebuilt
content
PUBLIC
Maximized speed
and agility through
accelerated delivery
Greater collaboration
through codevelopment between
business and IT
Reduced total cost
of development
Watch the demo: SafeFlight app
37
How Can You Meet the Growing Application Need?
Scale Development by Empowering More Employees to Build Software
Professional developer
§ Uses tools of choice to create cloud native
applications and reusable services
§ Designs, develops, deploys, tests,
and hands over to production
§ Understands the concept of a development
lifecycle, testing, and versioning
§ Ensures governance and security
High
Professional developer
Citizen developer
Other IDEs*
Citizen developer
§ Creates and publishes low-code/no-code
apps and customizations with close links to
business contexts
§ Is unaware of testing, go-live, versioning, and
termination but learns through citizen
development education
§ Ensures governance and security through ITsanctioned tools and platform-supported processes
Professional
experience
Pro-code
SAP Business
Application Studio
for low-code
development
Low-code
Development democratization
SAP AppGyver
No-code
Low
Low
Application volume
High
i.e. VS Code + extensions
PUBLIC
38
Boost Development Agility and Unleash Innovation
A Unified Developer Experience from No-Code to Pro-Code
SAP Business Application Studio
for Low-Code Development
Template-based Fiori apps, applications
extensions, and backend services for SAP
opinionated technology (e.g., CAP, UI5)
SAP Integrations using APIs/events, cloud
application programming (CAP), Fiori
elements, mobile services
Low-code capabilities that can be expanded
with pro-code tools
Multiplatform deployment
Professional and advanced citizen developer
with low-code, easily dive into pro-code
PUBLIC
SAP AppGyver
What type of applications
can I create?
How to integrate to
other SAP solutions?
How to create apps
and extensions?
Front-end apps with custom functionality &
design for stand-alone apps & LoB side-byside extensions
Integrate with REST APIs and OData
Everything done with no-code tools
Where can I
deploy to?
Multiplatform deployment, app stores, and
web
Who can
create apps?
Citizen and professional developer with nocode
39
Key Capabilities of SAP Business Application Studio
Productive development environment for SAP centric development
Low-code development perspective, with
One click preview and deployment
GIT based Project Sharing
easy path to professional development tools
Simplified Semantic Project
view and edit
Guided Development
Visual Entity & Service Modeling using
Cloud Application Programming Model
Low-Code Template-based and Freestyle UI Design
PUBLIC
NEW 👉 The Best of Both Worlds: Visual Tools But Still Full Control of Your Code
Detailed information refer to the Public Roadmap 40
SAP Fiori tools guides developers through the full cycle
Application Generator
Creates the project
environment for
development
Page Map & Editor
Allows editing of the
structure of the app:
pages, properties, and
navigation
Guided Development
Provides step-by-step
development instructions
and generates code
snippets in-line
Application Preview
Provides preview of web
app in the browser either
with mock data or live data
Available in
SAP Business
Application Studio
and
Visual Studio Code
PUBLIC
Service Modeler
Visualizes service
entities, relations,
properties, and
annotations
Code Completion
Delivers a language
server protocol for
annotations with microsnippets and diagnostics
41
SAP Business Application Studio
SAP BTP Free-Tier / SAP BTP Trial -> SAP Business Application Studio
1.
Tutorial: Build an SAP Fiori App consuming Data from On-Premise
2.
Tutorial: Create a List Report Object Page App with SAP Fiori Tools
3.
Tutorial: Develop Full-Stack App Using Low-Code Capabilities of BAS
More missions / tutorials: SAP Discovery Center / Developer tutorials
PUBLIC
Source: https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android
42
Get started today
Meet your organization’s requirements
as fast as your business needs.
Build applications and extend SAP systems
faster than ever before. To learn more, click
the links below.
Test and Evaluation
Ÿ SAP Business Application Studio is available for test and
evaluation on SAP BTP Free-Tier / SAP BTP Trial environment
Ÿ Find available missions in SAP Discovery Center / developer
tutorials
Partner & Customer Licenses
Ÿ Available in consumption and subscription based pricing
•
•
•
PUBLIC
Join SAP Business Application Studio Community
SAP’s low-code/no-code homepage
Explore SAP Business Application Studio on Partner Portal
43
SAP Business Application Studio
Homepage: SAP Business Application Studio
Learn
More!
Introduction Video
Central Info Blog
SAP Fiori tools
Homepage Low-code application development
Low-Code/No-Code Development Tools
Learning Journey: Low-Code / No-Code Applications and Automations for Citizen Developers
Blog post: SAP Gateway Demo System ES5
Recommended Tutorials
1.
Tutorial: Build an SAP Fiori App that Consumes Data from an On-Premise System
2.
Tutorial: Create a List Report Object Page App with SAP Fiori Tools
3.
Tutorial: Develop Full-Stack App Using Low-Code Capabilities of SAP Business Application Studio
Contact information: SAPBusinessApplicationStudio@sap.com
PUBLIC
44
Native mobile SAP Fiori Experience for iOS and Android
30–40 %
25–30 %
design time saved*
development time saved*
SAP Fiori for iOS
SAP Fiori for Android
Design Guidelines
SAP BTP SDK for iOS
Design Guidelines
SAP Mobile Development Kit
(code once for both)
SAP BTP SDK for Android
*findings for apps built by SAP IT
PUBLIC
45
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
Citizen Developer
Developer
Develop/
Extend/
Deploy
Pro-Code
Visual Studio
Code
(non-ABAP)
SAP Fiori tools
Low-Code
No-Code
SAP Business Application
Studio
SAP
AppGyver
Key User
Adapt
on
ce
pt
Business User
Desktop / Web
Run
SAPUI5
SAP GUI for HTML, Web Dynpro
SAPUI5 Flexibility
SAP Work Zone
SAP Fiori
launchpad
Mobile
Native
Android / iOS
SAP Mobile
Start
SAP Fiori tools
SAP Screen
Personas
(SAP GUI /
WD ABAP)
ABAP
Development
Tools in Eclipse
SDK for iOS /
Android
Local Laptop
SAP Business Technology Platform
SAP S/4HANA Cloud
Mobile
Development
Kit
SAP Business Technology Platform
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
46
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
on
ce
pt
Developer
Develop/
Extend/
Deploy
Pro-Code
Visual Studio
Code
(non-ABAP)
SAP Fiori tools
ABAP
Development
Tools in Eclipse
Local Laptop
SAP S/4HANA Cloud
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
47
Local Development Environments:
Visual Studio Code (VSCode) &
ABAP Development Tools (ADT) / Eclipse
Efficient ABAP development in Eclipse©
HIGH DEVELOPER PRODUCTIVITY WITH THE
ABAP DEVELOPMENT TOOLS (ADT)
MODERN DEVELOPMENT TOOLSET
Fully eclipse-based
Syntax check, Code completion
Syntax highlighting, Pretty printing
Navigation, Search, Quick Fixes
Available for ABAP releases ≥ 7.31
QUALITY ASSURANCE
Static code checks (ATC, CVA) with
remote and local scenarios
Unit testing incl. isolation frameworks
Test seams and injections
SUPPORTABILITY
Debugging, profiling, tracing
Static and dynamic logging
Runtime monitoring and analysis
PUBLIC
49
Visual Studio Code and SAP Business Application Studio
Visual Studio Code
§
Provides development flexibility with offline capabilities
§
Features a developer-controlled, highly configurable
development environment
§
Allows access to thousands of extensions from the
Visual Studio Code marketplace
§
Is part of a fast-growing open source community
PUBLIC
SAP Business Application Studio
§
Provides a managed, preconfigured, hosted
environment, optimized for SAP application development
(including client and server side extensions).
§
Can be centrally administrated with tools repositories,
systems access and company policies
§
Integrates with existing SAP solutions, systems & services
50
Local Development Environments
Set Up SAP Fiori Tools in Your Visual Studio Code
Install ABAP Development Tools (ADT) in Eclipse
PUBLIC
Source: https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android
51
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
Citizen Developer
Developer
Develop/
Extend/
Deploy
Pro-Code
Visual Studio
Code
(non-ABAP)
SAP Fiori tools
Low-Code
No-Code
SAP Business Application
Studio
SAP
AppGyver
Key User
Adapt
on
ce
pt
Business User
Desktop / Web
Run
SAPUI5
SAP GUI for HTML, Web Dynpro
SAPUI5 Flexibility
SAP Work Zone
SAP Fiori
launchpad
Mobile
Native
Android / iOS
SAP Mobile
Start
SAP Fiori tools
SAP Screen
Personas
(SAP GUI /
WD ABAP)
ABAP
Development
Tools in Eclipse
SDK for iOS /
Android
Local Laptop
SAP Business Technology Platform
SAP S/4HANA Cloud
Mobile
Development
Kit
SAP Business Technology Platform
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
52
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
Citizen Developer
Developer
Develop/
Extend/
Deploy
Pro-Code
Low-Code
No-Code
Key User
Adapt
on
ce
pt
Business User
Desktop / Web
Run
SAPUI5
SAP GUI for HTML, WebDynpro
Mobile
Native
Android / iOS
SAPUI5 Flexibility
SAP Screen
Personas
(SAP GUI /
WD ABAP)
SAP S/4HANA Cloud
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
53
Extending / Adapting SAP Standard Apps:
SAPUI5 Flexibility & SAP Screen Personas
SAP Fiori Apps Reference Library
Library of all SAP content for the SAP Fiori launchpad.
Explore, plan, and implement SAP Fiori apps as well as
classic applications based on SAP GUI and WebDynpro.
•
Overview of all SAP Fiori apps
•
Information for each app, including technical data for
installation and configuration
•
Configuration information required to integrate classic
SAP GUI and WebDynpro applications into the SAP
Fiori launchpad
•
Data for previous app versions
•
Direct navigation to related resources, such as app
documentation, Product Availability Matrix, and
Maintenance Planner
•
Recommendations for SAP Fiori apps for your needs
SAP Fiori Apps Reference Library
PUBLIC
55
Choose the path to the SAP Fiori user experience based on your needs
I need to adapt an
existing SAP Fiori app
Yes
SAPUI5
app
I need a new
custom app
Build app using
No
SAP Fiori
elements
SAPUI5
freestyle
Flexible Programming Model
Accelerate development with SAP Fiori tools
Adapt using
SAPUI5 flexibility
PUBLIC
Adapt using
SAP Screen Personas
56
SAP Screen Personas simplifies complex classic ERP screens
Benefits
Improve business
productivity
Increase SAP adoption by
making screens easier to use
Decrease training time for
SAP users with intuitive
screens
Enhance user
satisfaction
Reduce the cost of
personalization compared
to custom coding
Capabilities
Hide / rearrange screen
elements, reduce scrolling
SAP Fiori design creation
for custom or standard
transactions, including SAP
S/4HANA; embed into SAP
Fiori launchpad
Adapt Dynpro or Web
Dynpro ABAP screens
Pre-filled fields & pulldown menus as well as
automation of repetitive
tasks
Slipstream Engine renders
flavors on desktop, tablet,
or mobile phone
www.sapscreenpersonas.com
PUBLIC
57
Using SAPUI5 flexibility to deliver a tailored user experience
Adapt standard applications
for your own use cases in a
cost-efficient way
Benefit from standard
upgrades while keeping
extensions functional
Add extensions wherever
needed compared to
classical “extension points”
Developer
SAPUI5 flexibility – All you need to know
PUBLIC
Key user
Explore intuitive tooling
tailored for different
personas
End user
Try it yourself: https://ui5.sap.com > Demo apps > SAPUI5 flexibility demo apps
58
Key user adaptation – New: Change visualization & Version history
Key users can visualize and manage their changes
in an easy-to-understand way.
Key users work with draft adaptations to activate them
once reviewed. A version history keeps track of how,
when and by whom the app was changed.
Learn more: Easily manage your key user adaptations with SAPUI5 flexibility/ and Key User Adaptation in SAP Launchpad service is available out-of-the-box
PUBLIC
59
Developer adaptation with SAPUI5 flexibility
Adaptation projects allow developers to create code-based extensions of standard applications.
Extension project in SAP Web IDE
Adaptation project in SAP Business Application Studio
Leveraging SAPUI5 extension points, controller hooks
Leveraging SAPUI5 flexibility
Extend only in predefined extension point
Extend anywhere, no extension point needed
Does not support SAP Fiori elements applications
Supports SAP Fiori elements as well as SAPUI5 freestyle
Limited options (e.g. no extend of lifecycle methods)
Increased options
One layer only
Multiple layers: Customer -> Industry -> Core (planned)
Migrate from SAP Web IDE to SAP Business Application Studio: Blog post & Mission
SAP is planning to enable the extension pane in BAS in on-prem scenarios for existing extension projects and
for apps not enabled for adaptation projects.
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 noninfringement.
PUBLIC
60
SAPUI5 flexibility
Availability on different platforms
ABAP platform,
SAP NetWeaver platform
At runtime in
SAP Fiori launchpad
At design time in
SAP Business App Studio
adaptation project
PUBLIC
SAP S/4HANA Cloud &
SAP BTP, ABAP environment
SAP BTP,
Cloud Foundry environment
ü End user personalization
ü End user personalization
ü End user personalization
ü Key user adaptation
ü Key user adaptation
ü Key user adaptation
ü Developer adaptation
X Developer adaptation
ü Developer adaptation
(planning in progress)
61
Extending / Adapting SAP standard apps
SAPUI5 Flexibility
Ø SAPUI5 Flexibility - All You Need to Know
Ø Blog post: Extending SAP-delivered SAP Fiori elements apps using adaptation projects
Ø Blog post: SAP Fiori Elements: Adaptation Project – Adding a Custom Filter to the List Report
SAP Screen Personas
Ø Tutorials: Get Started with SAP Screen Personas
PUBLIC
62
Extending SAP standard apps: SAPUI5 Flexibility & SAP Screen Personas
SAP Screen Personas - SAP Community topic page
SAPUI5 Flexibility - All You Need to Know
https://ui5.sap.com > Demo apps > SAPUI5 flexibility demo apps
PUBLIC
Source: https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android
63
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
Citizen Developer
Developer
Develop/
Extend/
Deploy
Pro-Code
Visual Studio
Code
(non-ABAP)
SAP Fiori tools
Low-Code
No-Code
SAP Business Application
Studio
SAP
AppGyver
Key User
Adapt
on
ce
pt
Business User
Desktop / Web
Run
SAPUI5
SAP GUI for HTML, Web Dynpro
SAPUI5 Flexibility
SAP Work Zone
SAP Fiori
launchpad
Mobile
Native
Android / iOS
SAP Mobile
Start
SAP Fiori tools
SAP Screen
Personas
(SAP GUI /
WD ABAP)
ABAP
Development
Tools in Eclipse
SDK for iOS /
Android
Local Laptop
SAP Business Technology Platform
SAP S/4HANA Cloud
Mobile
Development
Kit
SAP Business Technology Platform
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
64
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
on
ce
pt
Business User
Run
Mobile
Native
Android / iOS
SAP Mobile
Start
SAP S/4HANA Cloud
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
65
Overview video on YouTube
SAP Mobile Start
Your native entry point to the intelligent enterprise
Start screen
Latest notifications,
& app suggestions
Applications
ToDo screen
Native apps,
Tasks and Notifications
Web responsive apps,
Web links & News feeds
iOS Integration
Spotlight Search
Widgets
Notifications
Single-sign on integration with
Road Map for 2023:
Support for Situation Handling for
SAP S/4HANA
PUBLIC
SAP Mobile Start for Android is available
66
SAP Mobile Start
Video: SAP Mobile Start – Your native entry point to the Intelligent Enterprise
PUBLIC
Source: https://en.wikipedia.org/wiki/Marvin_the_Paranoid_Android
67
SAP Mobile Start
SAP Asset Manager is the best-in-class mobile application
Mobile Start
Ø News: Hello, SAP Mobile Start
Ø Blog post: SAP Mobile Start – Try the new native entry point to the Intelligent enterprise
Ø Blog post: SAP Mobile Start – the new native entry point to access applications & contents
Ø Blog post: SAP Task Center is now available in SAP Mobile Start
Ø Blog post: SAP Business Application Studio for low-code, deploying multichannel app to mobile
PUBLIC
68
Te
ac
hin
gc
SAP Fiori User Experience Enabled by Technologies & Tools
Citizen Developer
Developer
Develop/
Extend/
Deploy
Pro-Code
Visual Studio
Code
(non-ABAP)
SAP Fiori tools
Low-Code
No-Code
SAP Business Application
Studio
SAP
AppGyver
Key User
Adapt
on
ce
pt
Business User
Desktop / Web
Run
SAPUI5
SAP GUI for HTML, Web Dynpro
SAPUI5 Flexibility
SAP Work Zone
SAP Fiori
launchpad
Mobile
Native
Android / iOS
SAP Mobile
Start
SAP Fiori tools
SAP Screen
Personas
(SAP GUI /
WD ABAP)
ABAP
Development
Tools in Eclipse
SDK for iOS /
Android
Local Laptop
SAP Business Technology Platform
SAP S/4HANA Cloud
Mobile
Development
Kit
SAP Business Technology Platform
SAP S/4HANA
ABAP
SE80
ABAP
ECC
SE80
ABAP
Backend
PUBLIC
69
Thank you.
... and don’t panic!
Oliver Graeff
Director – Product Management, SAP
E-mail: oliver.graeff@sap.com
Twitter: @OliverGraeff
LinkedIn: olivergraeff
Recording + Slides of 2h version here
Disclaimer
The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP.
Except for your obligation to protect confidential information, 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 presentation or any related
document, or to develop or release any functionality mentioned therein.
This presentation, or any related document 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
presentation is not a commitment, promise or legal obligation to deliver any material, code or functionality. This presentation 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 presentation is for informational purposes and may not be incorporated into a contract. SAP
assumes no responsibility for errors or omissions in this presentation, except if such damages were caused by SAP’s intentional 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.
PUBLIC
71