Public
UX125 – SAP Fiori Elements
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 2 Public
Speakers
Bangalore, October 5 - 7
Suneet Agarwal
Las Vegas, Sept 19 - 23
Jan Ruessel
Barcelona, Nov 8 - 10
Jan Ruessel
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 3 Public
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. 4 Public
Agenda
What are SAP Fiori elements?
SAP Fiori elements outlook
SAP Fiori elements technology
SAP Fiori elements development
SAP Fiori elements enablement info
Public
What are SAP Fiori elements?
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 6 Public
• Smart templates becomes SAP Fiori
elements
• SAP Fiori elements has the same meaning as
smart templates
• Examples of SAP Fiori elements are list
report, object page, overview page
SAP Fiori elements
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 7 Public
• New design and interaction patterns for SAP Fiori
UX
– List report
– Object page
– Overview page
• Consistent UX across business processes
• Rapid SAP Fiori app development
• Improved SAP Fiori app maintenance
• Adaptation via SAPUI5 flexibility and extensibility
SAP Fiori elements
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 8 Public
SAP Fiori elements available today
List report
Overview page
Object page
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 9 Public
Introducing SAP Fiori overview page Support for a specific domain/role through Cards with different application content
The overview page is a data-driven SAP Fiori app
providing all the information a domain/role have to
overlook in a single page.
Via cards a user can view, filter and react easily
through content from different applications.
The overview page organizes and displays an amount
of filterable data to provide an introductory-level view of
content on one glance.
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 10 Public
Overview page at a glance
*on selected devices
“Easy scan layout”
Cards are ordered in columns
Header of the overview page
with a collapsible filter bar
Stack card
will open an object
stream (collection of
cards)
List card
Bar chart list card
Analytical cards
— Line chart
— Bubble chart
— Donut chart
Table card
with multiple columns
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 11 Public
List report at a glance
*on selected devices
Smart filter bar
including search fields with
value helps
Actions
for one or multiple line items Indicator support
— status
— progress
— rating
Break-outs
for custom fields in smart filter bar
Personalization and
configuration of search fields
and columns
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 12 Public
Anchor navigation
will open an object stream
(collection of cards)
Object Page at a glance
*on selected devices
“Collapsible header”
Object header data with
important information
Section with contacts
information
Analytical content in sections
— Line chart
— Bubble chart
— Donut chart
Global actions like edit or
share
Public
SAP Fiori elements outlook
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 14 Public
Flexible screen 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.
Planned
Innovations
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 15 Public
Flexible screen layout
The efficient usage of the available screen size as well as an easy to use interface
are two of the major benefits offered by the new flexible screen layout.
Planned
Innovations
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 16 Public
Introducing analytical list page Powerful and flexible floorplan for lightweight and advanced data analysis
SAP Fiori analytical list report embeds
analytical content and capabilities into
the natural work environment of a
business user.
It enables the user to predict and to
recognize the impact of his actions.
Planned
Innovations
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 17 Public
Analytical list page at a glance
*on selected devices
Actions, filter dialogue and filter
type-switch
Toolbar with view switch for
chart/table view
Variant switch with display
option for global KPIs
Visual filters
Breadcrumb navigation
showing analysis path
Interactive chart area (for
analysis and controlling the
line-item table)
Planned
Innovations
Public
SAP Fiori elements technology
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 19 Public
Re-engineered development experience with SAP Fiori elements
SAP Fiori app freestyle
SAP Fiori app based on freestyle templates
SAP Fiori app based on SAP Fiori elements
SAP Web IDE
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 20 Public
Re-engineered development experience with SAP Fiori elements
SAP Fiori app freestyle
Free design & development in using SAPUI5 controls
SAP Fiori app based on freestyle templates
Predefined app project structure model / view / controllers
translation
navigation
SAP Fiori app based on SAP Fiori elements
Development required Search, filter, links
Actions
Tables
Forms
Adaptation capabilities
SAPUI5 flexibility
Extensibility with code breakouts
Generic UI for recurring interaction patterns List report
Object page
Overview page
Generic app structure Development required
CDS views including UI annotations
or
OData service & UI annotations in
SAP Web IDE
SAP Web IDE
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 21 Public
Flexibility Efficiency
SAP Fiori app UI development Flexibility vs. development efficiency with SAP Fiori elements
SAP Fiori elements
UX consistency
Code quality
Re-use
# lines of code
Maintenance
Freestyle SAP Fiori apps
Support Adaptation
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 22 Public
D
a
t
a
b
a
s
e
SAP Fiori floorplans
SAP Fiori app
SAP Fiori elements
SAP Fiori elements explained
Controls
List report
Object page
Overview page
Smart
controls Smart
controls
Smart
controls
Analytical list page Analytical list page
OData
+
UI annotations
G
a
t
e
w
a
y
C
D
S Backend
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 23 Public
Fiori elements architecture
Application tier
Global scope
UI integration tier
Local app scope
Annotations
Table Table Table
View View
CDS
App View
Gateway
OData model
UI tier
OData
http
S
A
Consists of data & merged
annotations from and (optional)
Contains view template & controller logic
Evaluates annotations at runtime
Shared data model incl.
annotations across all
applications
Application-specific views
SAP Web IDE
.xml
ABAP dev. tools
Database tier
OData
http
SAP Fiori application
(with SAP Fiori elements)
HTML
http
.js .js .js
S A
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 24 Public
SAPUI5 control SAPUI5 smart
control
SAP Fiori
app
OData
service
Metadata Service UI annotations
Application
infrastructure
SAP Fiori terminology – connecting the dots
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 25 Public
SAPUI5 control SAPUI5 smart
control
SAP Fiori
app
OData
service
Metadata Service UI annotations
Application
infrastructure
SAP Web IDE freestyle
templates
Master detail pattern
Worklist pattern
SAP Fiori terminology – connecting the dots
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 26 Public
SAPUI5 control SAPUI5 smart
control
SAP Fiori
app
OData
service
Metadata Service UI Annotations
Application
infrastructure
SAP Web IDE freestyle
templates
Master detail pattern
Worklist pattern
SAP Fiori
elements
Overview page
Object page
List report
Analytical list page
Wizard
Comparison view
…
SAP Fiori
floorplans
New interaction
patterns based on
user needs
Terminology 101 for Fiori app development
Public
SAP Fiori elements
development
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 28 Public
Applying SAP Fiori elements
Templates
Joint designer & developer team Create templates for commonly used page types, layouts and compositions
Backend developers
Create the data models for the
applications.
Define the semantics of the data: Data
types, information structure, relations
Data model 1
UI developer
Compose the SAP Fiori app by
combining the templates with the data
Fine-tune the UI by configuration and
freestyle development where needed.
Composition 2
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 29 Public
Frontend development steps. Coding optional…
1 2 3 4
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 30 Public
SAP Fiori elements – why is it 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
Choose template
Templates incorporate
latest SAP Fiori design
and UX
Select annotated
OData service.
Annotations are derived from
CDS for reuse, productivity
and consistency
Run fully functional
standard SAP Fiori application
No front end coding required.
Extension via additional
annotations or own templates
Development steps
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 31 Public
Fiori elements – semantic information
Amount
linked to
currency
Code field
linked to
text field
Line item
fields
Label for field
Link to value
list
Selection
fields
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 32 Public
Fiori elements: Annotations in CDS
Selection field
Link to value list
Field control
Field semantics
Amount linked to currency
Line item field
lineItem: {position: 30, importance: #HIGH},
@UI: {
selectionField: {position: 20},
}
mandatory: true,
@ObjectModel: {
foreignKey.association: '_Currency'
}
@Semantics.amount.currencyCode: 'Currency'
@Semantics.currencyCode: true
define view Product … {
Price,
Currency,
…
}
Public
SAP Fiori elements enablement
info
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 34 Public
Further information
Related SAP TechEd sessions:
UX165: Hands-On workshop to build Fiori apps with Fiori elements
DEV109: Lecture to learn the ABAP Programming Model in SAP S/4HANA
DEV212: Lecture on building an End-to-End SAP Fiori App Based on SAP S/4HANA and ABAP
SAP Public Web
LINK to a simple end to end example
LINK to documentation on CDS modelling and UI annotations
LINK to documentation for Fiori elements development
SAP Education and Certification Opportunities
www.sap.com/education
Watch SAP TechEd Online
www.sapteched.com/online
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 35 Public
SAP TechEd Online
Continue your SAP TechEd
education after the event!
Access replays of
Keynotes
Demo Jam
SAP TechEd live interviews
Select lecture sessions
Hands-on sessions
…
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 36 Public
Please complete your
session evaluation for UX125
Contact information:
Jan Ruessel
UX & SAP Fiori Product Management
Feedback
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 37 Public
© 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.