UX100 - SAP FIORI 2.0
for SAP S/4 HANA
SEP 2016
Michael Falk
Jamila Schon
Speakers
Las Vegas, Sept 19 - 23
Michael Falk
Jamila Schon
© 2016 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
Public
2
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.
© 2016 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
Public
3
1 | SAP FIORI – HISTORY
ONCE UPON A TIME
6
APPS
25
APPS
?
APPS
?
APPS
PROJECT
GENEVA
PROJECT
KELLY
SAP FIORI
SAP S/4HANA
“SAP is mobile”
“SAP is consistent”
“SAP is beautiful”
“SAP has moved to a
new level of User
Experience”
Simple applications
Complex applications
© 2016 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
Public
5
2 | SAP FIORI – Design Principles
DESIGNED FOR OUR USERS
Fiori Design Principles
ROLE-BASED
ADAPTIVE
SIMPLE
COHERENT
Delightful
Designed for you,
your needs, and
how you work
Adapts to multiple
use cases and
devices
Only what is
necessary
Provides one fluid
user experience
Makes an
emotional
connection
© 2016 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
Public
7
3 | Design Led Development Process
DISCOVER - DESIGN - DEVELOP - DEPLOY
Design Led Development Process
Proven design thinking methods for optimal user
experience
Simple and easy to follow provides a solid basis for
scaling design as whole
Focus on User-centricity guidance and support
for product teams
Unity between designers and developers
to ensure needs of the end user in every step
© 2016 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
Public
9
Design Led Development Process
DESIGN GATE 0
GOALS
Understand the business requirements of your end
user
Conduct research & design thinking sessions
with prospective end users
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
„Readiness Check“ by UX coaches
Signals kick-off takes place before creating mockups
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
Public
10
Design Led Development Process
DESIGN GATE 1
GOALS
Produce an initial design based on findings from
previous phase
Ensure optimal desirebility, viability & feasibility
of the design
Design prototypes & decide for a technology
End of first design phase
© 2016 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
Public
11
Design Led Development Process
DESIGN GATE 2
GOALS
Adapt and optimize the design due to user feedback
and technical constraints
Ensure final design & implementation perfectly
synchronized by UX coaches
First implementation and tests might need further
iterations or adaptions
Signals “ready for Production” receive a sign-off
© 2016 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
Public
12
Design Led Development Process
CUSTOMER REVIEW
GOALS
Provide final implementation of the design – check
with representatives
Organize customer review sessions to evaluate
desirability & viability
Evaluate desirability & viability of products via demos
or usability tests
© 2016 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
Public
13
4 | SAP FIORI and UX of S/4 HANA
ONE EXPERIENCE
© 2016 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
Public
15
FIORI 2.0
Next evolution step for the SAP Fiori User Experience
•
New Visual Design Language
•
Build on existing Concepts
•
New and improved Concepts
•
Navigation and Discovery Enhancements
•
Global Settings
•
New Floorplans and Layouts
•
Fiori Analytics
•
Beautiful Transitions and Animations
16
New Visual Design Language
New Visual Design Language
Belize
Light (Default)
18
© 2016 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
Public
18
New Visual Design Language
Belize
Plus
19
© 2016 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
Public
19
New Visual Design Language
Calm color tones help users to stay focused on the content.
Minimum color contrast ratio fulfills accesibility standards.
© 2016 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
Public
20
New Visual Design Language
Calm color tones help users to stay focused on the content.
Minimum color contrast ratio fulfills accessibility standards.
Home Page
Overview Page
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Flexible Layout
Split Screen
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
Full Screen Layout
Public
21
Build on Existing Concepts
Information Structure
SINGLE ENTRY POINT
SAP Fiori Launchpad
DOMAIN SPECIFIC INFOS
Overview Page
DETAIL VIEWS
App Pages
Fiori App Pages
Detailed Views
HYBRIS
© 2016 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
Public
23
Fiori Home Page
Role based, personalized, real-time and contextual aggregation point to access business applications
and analytics across functional areas and technologies
© 2016 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
Public
24
Viewport
The viewport virtually enlarges the users screen in a flexible way. It keeps the main work area clear and uncluttered,
while providing information from other areas, as well as access to important functions via the Me-Area and
Notifications.
Me-Area
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Workspace
Notifications
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
Public
25
ME AREA
The Me-Area is the content of the left
area of the ViewPort replacing the
former User Menu from the top right
corner in Fiori 1.0.
• User image, online status, logout
Frequently used
• Generic options: Access to App
Finder, Settings, Help
• Context specific: Edit (only on
Home Page), via More
• Recent activities & frequent (apps
& in app nav. targets, triggered
searches, co-pilot collections and
drafts) – max. 30; newest/frequent
on top
© 2016 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
Public
26
NOTIFICATIONS
The Notifications support the user in keeping
track of important events without distracting him
from his current task.
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Action X
Action Y
Action X
Action Y
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
Public
27
NOTIFICATIONS
The Notifications support the user in keeping
track of important events without distracting him
from his current task.
Navigate to the source of the notification
Action X
Action Y
Act directly on individual notifications
Action X
Action Y
Act on multiple notifications at the same time
© 2016 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
Public
28
NOTIFICATIONS
The Notifications support the user in keeping
track of important events without distracting him
from his current task.
Visual indicator indicate the priority of a
notification
Color coding:
Red:
Action X
Action X
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Action Y
High
Orange:
Medium
Green:
Low
Grey:
Neutral
Action Y
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
Public
29
OVERVIEW PAGE
The overview page aggregates information
from different applications of a certain
business area and provides a quick way to
access the most important applications in that
current business context.
With that the user can easily anticipate which
items need his attention.
It also will reduce the number of tiles that were
formerly located in a group on the homepage.
© 2016 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
Public
30
NEW AND IMPROVED
CONCEPTS
COPILOT
Copilot is a light-weight productivity app bridging the gap between prestructured application flows and the users’ natural style of working.
Start the Co-Pilot via the top bar from
everywhere in Fiori
Create new collections, objects or notes
context independent and collaboratively
Continue working on recent collections
Access context sensitive collections
© 2016 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
Public
32
COPILOT Features
Start Screen
Collection List
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Screenshot
Create
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
Chat
Public
33
Navigation & Discovery
Enhancements
NAVIGATION MENU
The navigation menu provides the user with a quick
way to browse the hierarchical structure of
applications, access context related and frequently
used apps, as well as all assigned apps for a user
role.
© 2016 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
Public
35
APP FINDER
The App Finder is the place where the user
can access all available apps. Here he can
discover new apps, add apps to his
homescreen, request access to apps or
directly launch them.
By browsing through the different app
categories and reading the detail
information provided for each available
app the user can discover the right app for
his needs.
© 2016 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
Public
36
Global Settings
GLOBAL SETTINGS
The Global Settings are always accessible and
allow the user to change overall and app specific
settings from a central point.
© 2016 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
Public
38
New Floorplans & Layouts
NEW BASIC PAGE
The new page layout comes with a header that
consists of two areas: The title area, that stays stable
and identifies the current instance of the page and
the header content area, which is flexible and
contains additional identifying information.
The header content area can snap on scroll or on tab.
It can be fixed by the application or pinned by the
user.
The global actions that have effect on the whole page
will be located on top.
Actions that are related to the content will be close to
the area they belong to, e.g. to a table.
© 2016 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
Public
40
FLEXIBLE LAYOUT
The Flexible Screen Layout is a new method of
displaying multiple floorplans side by side on a
single page.
It consists out of changeable layouts in which up
to three different floorplans can be shown next
to each other.
The Flexible Screen Layout offers a seamless
User Experience with the possibility to see
more, but stay focused on relevant details.
© 2016 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
Public
41
OBJECT PAGE
The Object Page provides a glimpse on all
facets of one object instance in one place.
Object pages therewith give access to business
objects, allowing to create, edit, and view them
in an easy-to-consume way.
The type of data determines how it is visualized.
It will come with rich data visualizations and
embedded Analytics, that support easy
comprehension of the data.
© 2016 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
Public
42
LIST REPORT FLOORPLAN
The List Report Floorplan allows to filter
huge amounts of data down to a number that
the user can handle.
It provides predefined variants the user can
choose from or flexibility to create own
variants and ad-hoc queries.
The visualization and complexity of the
filtering varies depending on the necessary
type of filtering.
© 2016 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
Public
43
Fiori Analytics
Analytics
REAL-TIME
business insights
INSIGHT to action
PROGRESSIVE
disclosure of
content
VISUAL interaction
PRECISE &
INTUITIVE
visualisations
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
SEAMLESS
integration and
aggregation
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
Public
45
Analytics Analytical List Report
VISUAL
FILTERING
Visualization of
steps to shrink
down data
ACTIONS
TRANSACTIONAL
CONTENT
Charts are directly
linked to business
actions
Comprehensive view
on transactional
content
© 2016 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
Public
46
Analytics Seamlessly Embedded in SAP Fiori
HOME PAGE
OVERVIEW PAGE
SEARCH
LIST REPORT
Analyse
OBJECT PAGE
© 2016 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
Public
47
Visual Harmonization
Visual Harmonization
Example SAP GUI Transaction
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Harmonized SAP GUI Transaction for HTML
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
Public
49
SAP FIORI Qualities
and Principles
5 | SAP Fiori UX
SAP Fiori Applications Product Qualities
Completely Fiori
Cloud Ready
HANA Optimized
UX QUALITIES
CLOUD QUALITIES
REAL-TIME QUALITIES
Modern, internet-educated UX
with state-of-the-art performance
Multi-device support
Simple Extensibility for
Business Experts:
Custom fields and business logic
without backend development
Offer power of HANA
to the End-User
Scalable apps w/ large number of users
Real-time for all apps with search,
analytics and transactional
capabilities
Low TCO in cloud-like operation
Integration of OLAP and OLTP
Simple task-oriented apps
Consistent look and feel
across all apps
© 2016 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
Public
52
SAP Fiori Architecture UX Qualities
Modern, internet-educated User Experience
•
•
•
•
Highly responsive
Start now – save incomplete – continue later
Keep working – data is saved automatically and
asynchronously
No data loss due to connectivity disruption or session
time-out
•
•
•
•
Start on one device – continue on other device
Start now – let someone else continue later
Collaborate now with others on same task/document
Data is stored “in the cloud”
Consequences for Architecture
Data must be stored in central location
stateless
data access
protocol
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
•
•
•
Not tied to device
Not tied to session
Not tied to user
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
Public
53
6 | SAP FIORI – ARCHITECTURE
SAP Fiori Architecture– High Level Overview - Today
Web
Tools
On-Premise
SAP S/4HANA Cloud
SAP Web IDE
SAP Mobile Platform
for Mobile Devices
SAP S/4HANA
SAP Fiori
Applications
OData
Services
SAP Fiori
User Interfaces
Frontend Server
Mobile
Services
SAP S/4HANA Business Logic
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori Applications
SAP S/4HANA
OData Services
SAP Business Suite
(ERP, SRM, …)
…
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
ABAP in Eclipse
Backend Services
Public
55
Includes Planned Innovations
SAP Fiori Architecture
SAP S/4HANA – Priciple of one archetype
SAP Fiori Architecture for SAP S/4HANA consists of only
one archetype for transactional, analytical and search

One User / Authorization Management via ABAP Server

One Business Model

One Gateway / OData protocol implementation

One Lifecycle
And additionally
© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Support for Hierarchies in analytics via Analytic Engine

Zero Downtime via ABAP Repository
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
Public
56
Planned Innovations
SAP Fiori Architecture –
Notifications Component Overview
Consumption
Cannels
Notification
Service
Notification
Providers
© 2016 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
Public
57
7 | SAP FIORI – ELEMENTS
SAP Fiori Architecture
SAP Fiori Elements - Creating the Fiori Experience
1 DATA MODEL
2
COMPOSITION
Backend Developers
UI Developers
Create the data models for the
applications.
Compose the SAP Fiori app by combining the
SAP Fiori Elements with the data.
Define the semantics of the data:
Data types, information structure,
relations.
Fine-tune of the UI by configuration and
breakouts/freestyle development where needed.
TEMPLATES
Joint Designer & Developer team
Create templates for commonly used
page types, layouts, and
compositions.
© 2016 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
Public
59
SAP FIORI ARCHITECTURE
SAP FIORI ELEMENTS - WHAT IS SMART?
• ANNOTATIONS describe semantics related to data (examples see next slide)
• SMARTNESS of controls and templates is based on the understanding of these semantics.
Annotations are evaluated in the client-controller-logic.
DEVELOPMENT
STEPS
Choose template
Select annotated
OData service.
Run fully functional
standard SAP Fiori app
Templates
incorporate latest
SAP Fiori design
and UX
Annotations are
derived from CDS for
reuse, productivity,
and consistency
No front end coding required.
Extension via additional
annotations or own
templates
© 2016 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
Public
60
SAP Fiori Architecture
SAP Fiori Elements - Semantic Information
Field
label
Selection
field
Amount
linked to
Currency
Value help
list
Line item
field
Code field
linked to
Text field
© 2016 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
Public
61
Efficient UI development with SAPUI5
SAP Fiori Elements and SAPUI5 Flexibility Services
Key user
UI Adaptation
Effic.
Efficiency
UI Adaptation
Flexibility
Flex.
Coding
Dev
Flexibility
Manual coding
Manual
coding
Hybrid design
Smart design
(Break-outs)
(at runtime)
Freestyle design
(Freestyle Template)
Dev
Efficiency
At design time
Developer
SAP Web IDE
SAP Web
IDE
Personalization
At runtime
End user
Smart Controls / SAP Fiori Elements
Vanilla Controls
© 2016 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
Public
62
SAP TechEd Online
Continue your SAP TechEd
education after the event!
Access replays of






© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Keynotes
Demo Jam
SAP TechEd live interviews
Select lecture sessions
Hands-on sessions
…
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
Public
63
Further Information
Related SAP TechEd sessions:
<XXX111> - <session title>
….
….
….
….
….
….
….
….
Please specify any related TechEd sessions
SAP Public Web
Please specify any spaces on SCN or pages on
sap.com related to the session topic
scn.sap.com
www.sap.com
SAP Education and Certification Opportunities
www.sap.com/education
Please mention any related SAP certification and
training courses
Watch SAP TechEd Online
www.sapteched.com/online
© 2016 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
Public
64
SAP TechEd Online
Please complete your
session evaluation for
Contact information:
UX100
Jamila Schon
Senior User Experience Design Specialist
jamila.schon@sap.com
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
Michael Falk
Chief Product Expert
michael.falk@sap.com
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
Public
65
THANK YOU!
UX 100 - SAP FIORI 2.0 for S/4 HANA
SEP 2016
Michael Falk
Jamila Schon
Appendix:
© 2016 SAP SE. All rights reserved.
SAP FIORI UX Qualities
Role-based
Personalized
 Apps assignment via role-specific business catalogs
 Predefined groups for SAP Fiori launchpad home page
Navigation – fast, easy and contextual navigation
Responsive
 Adaptive design to run on multiple devices
 Configuration allows to start device specific apps





Add apps from assigned catalogs to home page
Delete apps from home page
Reorder tiles and groups
Change group and tile titles
Select custom themes
Theming and branding - via UI theme designer
Search – across apps and business objects
© 2016 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
Public
68
SAP FIORI UX Qualities Responsive Design
Capabilities
Benefits

Visual design adapts automatically to the respective
screen size

SAP Fiori launchpad runs on both mobile and desktop
devices
© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Seamless experience across all device types smartphones, tablets and desktops
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
Public
69
SAP Fiori UX Enhanced Personalization
Capabilities
•
Create pre-configured groups for the home page
•
Wide choice of ready-to-use tiles
•
Add and remove or group tiles
Benefits
© 2016 SAP SE or an SAP affiliate company. All rights reserved.
•
Manage apps based on roles and personal needs
•
Apps assigned to specific roles
•
Users get what they need
•
Personalize homepage based on user preference
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
Public
70
© 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://www.sap.com/corporate-en/about/legal/copyright/index.html 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 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. 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
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 forwardlooking 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.
© 2016 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
Public
71