Develop SAP Fiori Apps Rapidly with

Low-Code Development Tools

UX103
PUBLIC
Speakers

Las Vegas
September 24–27, 2019

Peter Spielvogel
Sebastian Steinhauer
Katja Zoch

Barcelona
October 8-10, 2019

Katja Zoch
Sebastian Steinhauer

Bangalore
November 13-15, 2019

Rohith Deraje

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

 Take the session survey.
We want to hear from you!

Complete the session evaluation for this session

UX103 on the SAP TechEd mobile app.

Download the app from

iPhone App Store or Google Play.

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3

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.

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4

Agenda

SAP Fiori elements basics

▪ Metadata-driven applications

Driving UX consistency
▪ Page types for most SAP scenarios

Accelerating application development

▪ Reusable UI code

Extending standard apps

▪ The power (and perils) of annotations

Next steps
▪ How to get started today

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5

3 things to remember about SAP Fiori elements

1. SAP Fiori elements 2. SAP Fiori elements 3. SAP Fiori elements

accelerates app enables UX covers 80% of app
development consistency development scenarios

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6

Agenda

SAP Fiori elements basics

▪ Metadata-driven applications

Driving UX consistency
▪ Page types for most SAP scenarios

Accelerating application development

▪ Reusable UI code

Extending standard apps

▪ The power (and perils) of annotations

Next steps
▪ How to get started today

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

What do you and your dev teams think about when building SAP Fiori apps?

“How long is it going to take to “How much effort is it going to “I need to build more apps.
build this app? take to design this app?” They all need to look similar.
What will it take to update it?” How can I scale that?”

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8

SAP Fiori guidelines are evolving

SAP SAP
SAP Fiori
Fiori 2.0 Fiori 3
2013
2016 2019

SAP Fiori Design guidelines: https://experience.sap.com/fiori-design/

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9
SAP Fiori elements helps you build Fiori apps quickly

In a nutshell:

▪ SAP Fiori elements is a UI development library based on SAPUI5.

▪ The UI is generated at runtime from metadata. This results in low-code development for
standard apps.

▪ The UI can be customized by introducing additional controls and behaviors.

Value proposition:

▪ Accelerate SAP Fiori apps development at scale

▪ Ensure consistency across apps

▪ Keep apps up-to-date with evolving SAP Fiori design guidelines

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10

SAP Fiori elements has three core capabilities

Create your app using predefined Leverage standard UI logic out of Customize your app with your
SAP Fiori page types the box own controls and interactions

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11

SAP Fiori elements enables rapid SAP Fiori app development

SAP-provided
page types
+ Developer-provided
back-end services
Define application Expose data and
appearance and behavior establish relationships

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

SAP Fiori elements creates the app at runtime using metadata

SAP Fiori app (SAPUI5)

Application SAP Fiori

configuration elements runtime

OData + annotations

Backend (SAP S/4HANA,

SAP Cloud Platform, other, …)
© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13
SAP Fiori elements application architecture provides flexibility

Application 1 Application 2 Application 3 Application 4 Application 5

Applications

Extensions
SAPUI5
flexibility Extensions Annotations
Application Application Application Application Application
Configuration Configuration Configuration Configuration Configuration
UI layer

SAP Fiori elements

SAPUI5 Core
Back-end

Annotations Annotations Annotations

OData OData OData OData

SAP S/4HANA SAP BW SAP Cloud Platform Other backend

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14

Agenda

SAP Fiori elements basics

▪ Metadata-driven applications

Driving UX consistency
▪ Page types for most SAP scenarios

Accelerating application development

▪ Reusable UI code

Extending standard apps

▪ The power (and perils) of annotations

Next steps
▪ How to get started today

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 15

Consistency across controls and interactions makes apps easier to use

Look and feel Controls and page types Behaviors and interactions
▪ Colors ▪ UI Components ▪ Actions (save, cancel, …)
▪ Icons ▪ Layout ▪ Filtering, sorting
▪ Fonts
▪ Confirmation dialogs
▪ Dimensions
▪ Motion design

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 16

 Create your app using predefined SAP Fiori page types
List report page
Overview page Object page

Analytical list page Worklist page

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 17

Demo
Apps created with SAP Fiori elements
Agenda

SAP Fiori elements basics

▪ Metadata-driven applications

Driving UX consistency
▪ Page types for most SAP scenarios

Accelerating application development

▪ Reusable UI code

Extending standard apps

▪ The power (and perils) of annotations

Next steps
▪ How to get started today

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 19

There are several paths to the SAP Fiori user experience (UX)

New business scenarios Existing business scenarios

Design standard Leverage

app with SAP out-of-the-box
Fiori elements* SAP Fiori apps

Create flavor with

Build custom app* SAP Screen
Personas

*or buy app from partner

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 20
 Choose the path to the SAP Fiori user experience based on your needs

Start:
Design Thinking

Build app using Yes New Existing Yes Download SAP

Does app follow New or existing Does app exist
SAP Fiori common business in reference Fiori app; modify
elements floorplan? scenario? library? if necessary
No
No

Simplify t-code
Develop
with SAP
freestyle app
Screen Personas

SAPUI5 Fiori app

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 21

SAP Fiori elements simplifies project staffing

Back-end developer Front-end developer

(optional)
Exposes the required
business data and Configures the app,
metadata extends with JavaScript

Design Expert / End users

User Researcher
Test applications and
Observes users and provide feedback for
creates designs to iteration
address their needs

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 22

SAP Fiori elements boosts developer productivity

Development UX Enterprise
Efficiency Consistency Readiness

Standardized page types SAP-delivered specifications Organizations can rapidly and

allow developers to: for data and controls ensure: consistently:
▪ Focus on business logic ▪ A centrally managed user ▪ Deliver high quality
and back-end services experience applications to end-users
▪ Leverage proven UI ▪ Out-of-the box forward ▪ Benefit from best practices
concepts compatibility to scale app creation

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 23

OData connects your application to the back-end

OData: a standardized method (Open Data Protocol)

for interacting with data on a server, ensuring
interoperability between sources

SAP Fiori elements connects with OData

services out-of-the-box

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 24

OData defines best practices for building and consuming RESTful APIs

▪ Used by SAP to define business data models for

SAP Fiori

▪ Allows user to query and manipulate data in a

standardized way

▪ Provides a machine-readable description of the

data model

▪ Independent of back-end implementation,

programming language, and UI design

Annotations

▪ Provide semantic information to OData

▪ Describe the capabilities of the OData service

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 25

OData annotations are metadata that define attributes and relationships

“This entity can be

For example: edited”

▪ The semantic of a field “This is the currency

“This is an email address” for the amount”

▪ How fields are related to each other

“This is the currency for this amount”

▪ How information should be displayed

“These fields shall be displayed together in a form”
“These fields shall be
displayed together in a
▪ The possible interactions with the business object form”
“This entity can be edited”
“This is an email
address”

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 26

SAP Fiori elements provides standard UI logic out of the box

▪ Navigation

▪ Search

▪ Filtering & sorting

▪ Variant management

▪ Editing (incl. draft management)

▪ and more

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 27

Demo
Creating an app with SAP Fiori elements
SAP Fiori elements reduces the cost of SAP Fiori app development

Assuming a proper understanding of end-users’ needs and project requirements:

SAP Fiori elements Freestyle SAP Fiori development
Ease of
Development

Flexibility

Cost

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 29

Agenda

SAP Fiori elements basics

▪ Metadata-driven applications

Driving UX consistency
▪ Page types for most SAP scenarios

Accelerating application development

▪ Reusable UI code

Extending standard apps

▪ The power (and perils) of annotations

Next steps
▪ How to get started today

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 30

Extensions let you go beyond standard SAP Fiori elements apps

Use the SAPUI5 programming model to

extend your app according to your needs

Leverage all SAPUI5 controls, e.g. in custom

table columns or object page sections

Add your own logic, e.g. new actions or filters

Usage tip:
The closer you stay to the standard SAP Fiori
elements page types, the greater the savings
in development and maintenance costs

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 31

SAP Fiori elements extensions enhance the functionality of standard apps

SAP Fiori elements SAP Fiori elements Freestyle SAPUI5

with extensions

Ease of
Development

Flexibility

Cost

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 32

SAP Fiori elements provides rapid, scalable development

Time to develop

Application complexity

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 33

Demo
Using annotations to extend your app
Agenda

SAP Fiori elements basics

▪ Metadata-driven applications

Driving UX consistency
▪ Page types for most SAP scenarios

Accelerating application development

▪ Reusable UI code

Extending standard apps

▪ The power (and perils) of annotations

One more thing…

▪ Making SAP Fiori elements easier to use
with visual tools

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 35

Demo
Sneak preview of SAP UX tools studio
We need some development experts to validate our approach

Contact us if you would like to co-innovate with us

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 37

Agenda

SAP Fiori elements basics

▪ Metadata-driven applications

Driving UX consistency
▪ Page types for most SAP scenarios

Accelerating application development

▪ Reusable UI code

Extending standard apps

▪ The power (and perils) of annotations

Next steps
▪ How to get started today

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 38

SAP Fiori elements: essential enablement information
Design guidelines SAP Fiori elements on SCN

Developer documentation Getting started with SAP Fiori elements video series

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 39

3 things to remember about SAP Fiori elements

1. SAP Fiori elements 2. SAP Fiori elements 3. SAP Fiori elements

accelerates app enables UX covers 80% of app
development consistency development scenarios

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 40

 Continue your SAP TechEd 2019 Learning Experience
Join the digital SAP TechEd Learning Room 2019 in SAP Learning Hub

▪ Access SAP TechEd Learning Journeys

▪ Discover related learning content
▪ Watch webinars of SAP TechEd lectures
▪ Learn about SAP’s latest innovations with openSAP
▪ Collaborate with SAP experts
▪ Self-test your knowledge
▪ Earn a SAP TechEd knowledge badge

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 41

 Engage with the SAP TechEd Community
Access replays and continue your SAP TechEd discussion after the event
within the SAP Community

Access replays Continue the conversation Check out the latest blogs
▪ Keynotes ▪ Read and reply to blog posts ▪ See all SAP TechEd blog posts
▪ Live interviews ▪ Ask questions ▪ Learn from peers and experts
▪ Select lecture sessions ▪ Join discussions
http://sapteched.com/online sap.com/community SAP TechEd blog posts

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 42

More information

Related SAP TechEd Learning Journeys

▪ UX1: Become the UX transformation champion in your company
▪ UX2: Design and develop SAP Fiori apps
▪ UX3: Implement and run a great UX for your intelligent suite
▪ CAA3: Move to SAP S/4HANA

Related SAP TechEd sessions

▪ UX264: Simplify Development of SAP Fiori Apps for End-to-End Scenarios (Hands-On Workshop)
▪ UX260: Create Analytical SAP Fiori Apps Quickly and Efficiently (Hands-On Workshop)
▪ UX263: Develop SAP Fiori Apps from Back End to User Interface (Hands-On Workshop)
▪ UX304: Rapid Building of SAP Fiori Apps Using SAP Fiori Elements and CDS Views (customer session with Johns Hopkins)
▪ UX214: Boston University Accelerates Development of SAP Fiori with Design Thinking (customer session)
▪ UX300: Unlock the Endless Potential in SAP Fiori Elements (partner session with IBM)

Public SAP Web sites

▪ SAP UX Community: https://experience.sap.com/tag/sap-fiori-elements/
▪ When to use SAP Fiori elements usage guide https://d.dam.sap.com/a/21EPJi8

© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 43

Thanks for attending this session.

Feedback Contact for further topic inquiries

Please complete your session evaluation Peter Spielvogel
for UX103. UX Engineering Product Marketing
[email protected]
Follow us

www.sap.com/contactsap

© 2019 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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP 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 platforms, 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, and they
should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.