Fiori
May 2014
Kyle J. Delaney, Solutions
Engineer
2014© SAP
What is
Fiori?
Introducing SAP Fiori
A collection of apps with a simple and
easy to use experience for broadly and
frequently used SAP software functions
that work seamlessly across devices –
desktop, tablet, or smartphone.
Keeping Things Simple
Imagine being able to quickly enter
your time, check your sales orders,
approve requests and more from
anywhere. The first release of SAP
Fiori includes 220 apps for the most
common functions for workflow
approvals, information lookups and
self-service tasks.
Role-based
Fiori apps decompose complex
applications into a task-based
experience with one central entry
point for each user.
Responsive
Fiori apps adapt to all sizes, devices,
versions, and channels to provide a
common user experience across all
channels.
Simple
Fiori apps follow the 1-1-3
experience (1 user, 1 scenario, 3
screens). They know and provide
the right context and meaningful
data integration.
Coherent
Coherent user experience with
apps that speak the same design
language. This implies coherence
for common activities as well as
coherence for your brand.
Leverage SAP Investment
SAP Fiori enables you to leverage your existing
SAP investments by delivering powerful business
results. You can get started with SAP Fiori
immediately and bring instant value to all your
employees.
Instant value with a low barrier to adoption, enabling
customers to adapt, and users to personalize.
Fiori Architecture
Central Hub Deployment is used to
separate back-end from front-end
UI5 The SAP Web dispatcher is the entry point for HTTP(s)
components with a central SAP
requests. It can reject or accept connections. When it
NetWeaver Gateway. *Used in the case
Launchpad accepts a connection, it selects an appropriate
where you need to access several
Web Dispatcher application server and balances the load to ensure an
different databases, you need to use a
even distribution across the servers.
central NetWeaver Gateway.
https (http/OData)
DMZ - Firewall
SAP NetWeaver Gateway is a development
framework, which offers development and
generation tools to create OData services to a
Fiori
variety of client development tools.
NetWeaver GW
The ABAP back-end server
contains the business logic and This means you must install SAP NetWeaver
the back-end data. Gateway independent of consumer
OData technologies in a standalone system, either
behind or in front of the firewall, depending on
whether you want to enable users to consume
ABAP Stack
Odata establishes a the Fiori apps only internally or also externally.
connection between SAP
Business Suite data and
target clients, platforms,
ABAP Stack
and programming
CRM framework.
Other DBs ERP/ECC
Fiori Architecture
In the case where you need to access
just one database/server, the Fiori
NetWeaver GW can be loaded on the
same server as a ABAP Stack Launchpad
Web Browser
DMZ - Firewall
Fiori
NetWeaver GW
ABAP Stack
Odata
CRM
Fiori Architecture
From Transactions to Apps
Classical enterprise software is structured along
transactions. The SAP Fiori design paradigm
consciously breaks with the transactional
approach. Instead, SAP Fiori is centered on people
and their goals.
https://experience.sap.com/fiori-guidelines/index.html#SAPFiori
Launchpad
The user’s personal collection of Fiori apps is
accessed via the Fiori Launchpad. Its main
function is to contain the Homepage which
groups and displays various tiles that not only
function as entry points to the apps but also
display selected app-specific data for immediate
review. Launchpad also takes care of user
identification (login/logout), navigation, and
Global Search, which is located within the Shell
Bar.
App Framework
The App Framework describes the foundation of
any SAP Fiori App. The basis of all apps is formed
using the Page Header and the Footer Toolbar.
The Page Header focuses on navigation services
while the Footer Toolbar primarily contains all
currently available actions. Those two patterns
are part of every SAP Fiori app that is based on
either the Master/Detail or the Full Screen
template.
Patterns
Interaction design patterns are re-usable user
interface objects that are somewhat more
complex than simple controls. They describe
recommended best practices for common use
cases, and when followed throughout the design
of your app, provide a consistent user experience
across all SAP Fiori apps.
Application Types
In this section you will find recommended
templates for different types of apps. Each
template is designed with a specific use case in
mind. For instance, a Process App guides users
through a step-by-step procedure and allows
jumping between all the required steps for
process completion.
Analytical App
When required the user may drill down into the
data for a more detailed view and for making
decisions on what to do with the insight gained
from the drill down. This can include starting
other apps, sharing the insight with others or
triggering actions.
Approval App
Approving or rejecting certain requests is a rather
typical workflow task type. An approval app
enables the person accountable to approve,
reject, or forward requests for, e.g., purchase
orders, travel expenses, and the like
Factsheets
Factsheets display contextual information about central
objects used in business operations. From a Factsheets tile
users can drill down into details. Factsheets also allow for
navigating to related Factsheets.
News App
The News App basically consists of a list with
news on relevant updates. The news feed is
maintained by administrators. They are to define
any variants and the data sources that feed the
app. The list gets updated automatically and new
articles are added to the top of the list..
Process App
Process apps guide users through processes. In
the above example, internal orders need to be
converted into purchase orders for vendors.
Shopping App
A shopping app enables users to browse through
products, to collect, and to order them.
Change App
Change Apps make use of the Master/Detail
pattern and allow for editing items in the Master
List. The ‘change’ actions are reached via the
Detail Page’s footer. Upon clicking, a dialog opens
with all the item’s fields that are editable. Once
editing is complete, the respective item gets
updated.
SAPUI5 is a client-side HTML5 and JavaScript-based
rendering library and programming model that is
optimized for consumption of SAP data. It combines new
qualities such as openness and flexibility with known
SAP strengths such as enterprise readiness and product
standard support.
The key capabilities of UI5 are:
Rich control set including charts for all devices
Application development environment for all
platforms
OData integration for timeless software
Extensibility concepts for “custom controls”
Modern theming and branding concepts
Embraces “open source” framework(s) and web
standards
Targets developers with web development skills
(HTML, CSS3, JS)
The benefits of UI5 are enormous: it provides
business agility through the availability on any device
and on any platform. Hence, user productivity and
satisfaction are increased through flexibility,
openness, and pixel perfect design
Summary
Fiori is an UI approach to
simplify the usability and
deployment of SAP apps for
higher productivity, higher
adoption rate and lower cost.
Thank You!
SAP Community Network – Fiori link
http://scn.sap.com/docs/DOC-53176
y
Kyle J. Delane
eer
Solutions Engin
sap.com
E kyle.delaney@
0
P 858-230-046
