Introduction Into

SAP Fiori
Agenda

1. SAP Fiori Overview

2. Fiori Design Principles

1. Application Responsiveness

2. Launchpad Design & Components

3. Grid Layout/Form Factors/Navigation/Page Layouts/Floorplans/System Requirements

3. Fiori Applications

1. Current Applications & Products

4. About Us
What is SAP Fiori?

 SAP Fiori is the new user experience (UX) for SAP software that utilizes
modern design principles to provide a personalized, role-based, responsive &
user-friendly experience across all lines of business, tasks & devices.
 SAP Fiori is a collection of applications w/ a simple & easy-to-use experience
for broadly & frequently used SAP software functions.
 Specify which data & apps users can access using previously designed authorizations & roles.
 Work seamlessly across devices (desktop, tablet or smartphone).
 Boosts user productivity, satisfaction & performance.
 Established in 1972, SAP has been evolving at a rapid pace. Below is a
timeline of SAP’s evolution of user interfaces to Fiori in recent years.

2010 – Web Dynpro 2014 – Fiori

2005 – ALV Grid

1999 – R/3
What is SAP Fiori?

 Fiori UX speaks a consistent design language & uses common technical

infrastructure to provide a holistic & consistent end-to-end user experience.
 Uses attractive & interactive UI elements.
 Blurs traditional computing boundaries.
 Allows companies to leverage existing SAP investments by providing
instant value for employees & customers.
 SAP Fiori offers services for search (business objects &
apps), navigation, personalization & single sign-on.
SAP Fiori UX

New Existing
Applications Applications

NEW RENEW ENABLE

UX Design Services
 Fiori OData (Open Data) services allow users to keep up-to-date versions
of backend data.
 Fiori UX is created w/ state-of-the-art HTML5 (SAPUI5) technology.
 Uses RESTful (OData) runtime services to process business data through open standards.
 A single application instance supports end-users in any device setting.
 Unified UX direction for all SAP software.
 All UI technologies & applications to eventually converge to SAP Fiori.
Fiori Client

 Fiori Client helps users overcome mobile browser limitations

by providing a built-in reliable asset-caching tool, which enables
device Application Programming Interfaces (API).
 E.g. for geo-location, camera & barcode scanner, etc.
 Fiori Client also uses SAP Mobile
Platform SDK that allows for custom
functionality enhancements to be made.
SAP WEB IDE

 Fiori WEB IDE allows users to build or extend existing Fiori apps in a browser.
 No additional installation steps are required – “In-Browser-Development”
 Holistic web-based development environment.
 Addresses app development process from prototype to deployment.
 Encourages various
decision makers to engage
in app creation to increase
end-user value.
 Provides user-friendly
visual editors (templates,
drag-and-drop, wizards, etc.).
Fiori Design Principles

 Focused applications are designed based on how people work & the most
common/critical activities.
Simple
• Focuses on
importance.
• Personalize your
experience to your
Responsive specific tasks & Coherent
• On-demand user activities. • Fluid & seamless user
support. experience.
• Allows for instant • Adheres to consistent
insight, regardless of interaction & visual
devices being used. design language.

Role-based Delightful
• Designed for specific SAP Fiori’s • Secures emotional
business roles, needs 5 Main connection.
& work requirements. • Allows you to do your
• Provides pertinent Design job.
information at the
correct times.
Principles.
 Responsiveness allows for apps to run on desktops, smartphones, tablets, etc.
 In order to do this, applications apply two different methods.
 Responsive:
 Responsive controls & patterns: SAPUI5 provides various controls & patterns.
 Adjusts to various form factors & different devices w/out being recoded or manipulated.
 Adaptive:
Mobile
 Applications manually define different
designs across different form factors.
 Applications adhere to adaptive design. Framework CSS

 Mobile first design approach.

 Responsive & adaptive Responsive

methods can be mixed.

Desktop Fluid

Cross-
platform
Application Responsiveness

 Mobile access is continuing to make desktop access irrelevant.

 Mobile-based SAPUI5 controls allow for touch control & mouse/keyboard.
 Configure apps to fit touch devices & mouse/keyboard devices.
 Desktop controls must be replaced w/ responsive controls when running mobile.
 Allows for proper manipulation of responsive configurations within patterns.
 Enhance core functionality from mobile devices to larger ones.
 Adjust layout options to fit various platform sizes.
 Allows for worklist application letterboxing.
 ALV Analytical Tables must be replaced w/ responsive tables or other
case-specific solutions such as KPIs, texts, or charts.
 Filter bar will become responsive in future SAPUI5 version upgrades.
 If desktop app is too complex, some functionality must be turned off in order
to access via mobile devices.
 If app functionality is available for all devices, responsive methods should be
used to auto adjust the application. If not, manual adjustment is required.
Fiori Launchpad Components

 The Fiori Launchpad homepage allows for personal app collection

accessibility; main entry point to both mobile & desktop apps.
 Launchpad homepage is fully responsive & can be personalized.
 Groups & displays various app entry point tiles, which can be added/removed as desired.
 Manages user identification, navigation & global searches (Shell Bar).
 Select from ready-to-use, pre-defined, role-based tiles & groups.
 Tiles display app-specific data as well as icon/title/numbers/charts/informative text.
 Tiles can be personalized and provide direct access to apps & content.

 Displays a selection of group clustered

tiles & a collapsible group panel.
 Group panel allows for navigation between
different tile groups & tile catalog navigation.
Fiori Launchpad Behavior & Interaction

 Launchpad personalization can be done directly or via personalization mode.

 Personalization mode allows for group rearrangement & tile customization.
 Activated via action sheet or floating homepage icon.
 Changes tile behavior & makes additional group personalization functions available.
 Tile Actions
 Generic Actions – Settings/Move/Remove, etc.
 Add a tile/Move a tile/Open a tile.
 Group Actions
 Add group/Move group/Rename group/Delete group/Reset group/Hide group.
Fiori Grid Layout

 SAP Fiori utilizes the new “rem” (root em) measuring system unit.
 1 rem unit = Base size of 16 pixels.
 Allows for predictable & consistent sizing & zoom in web browsers.
 UI elements based on 1 x 1 rem (16 x 16 pixels) layout grid system (3 x 3 touch area).
 Responsive system works across all touch-operated devices.

 Fiori Responsive Grid – UI elements positioned in 12-column flow layout.

 Configured to display a variable number of columns, based on available screen size.
 Allows for flexible layouts & line breaks for small, medium, and large-sized platform screens.

1 2 3 4 5 6 7 8 9 10 11 12

Large Screen
Medium
Small
Fiori Form Factors

 Applications adhere to two different form factors to adapt to various

interaction styles.
 Cozy Form Factor – used for touch devices.
 App controls displayed w/ dimensions large enough for fingertips.

 Compact Form Factor – used for mouse & keyboard-enabled devices.

 Screen information can be increased by reducing control dimensions.
 3 rem default control area reduced to 2 rem.
Fiori Navigation

 SAP Fiori follows standard web application navigation paradigms.

 When navigating to new screens, the user’s system default
navigation is implemented.
 Depending on browser settings & functionality, new screens can be accessed in
a new browser tab or new window w/ a long tap/right mouse click.
 Hub & spoke navigation model are combined w/ an application network model.

 SAP Fiori’s launchpad homepage is the center for all navigation paths.
 Users navigate from launchpad into apps via multiple screens.
 Multiple apps form a process.
 Users can backout of apps using the back navigation function.
 A home icon allows for instant homepage access.
Page Layouts: Full Screen vs. Split Screen

 Full screen layout allows for full width use of the device screen.
 Used for apps that require the full width of the screen.
 Display large amounts of data, wide tables & large visualizations.

 Split screen layout is best suited when displaying & processing item lists.
 Best used when reviewing & processing different items quickly w/ minimal navigation.
 Left side of screen – quickly scan & navigate lists.
 Right side of screen – view selected item’s details, edit data & trigger actions.

 Avoid switching back-and-forth between full screen & split screen w/ apps.

Full Screen Split Screen

Fiori Floorplans

 SAP Fiori has several floorplans available to users:

 Initial Page – Used to navigate to a single object in order to view or edit it.
 Single input field interaction point; relies on assisted input to quickly direct users to objects.
 Used when displaying one object only- use list report floorplan for 1+ objects.
 Edit Page – Offers several different options for editing existing objects & pages.
 Used for standalone apps, full screen apps, or as part of a split screen layout format.
 List Report – Allows users to utilize & take action within large item lists.
 Combines powerful list filtering functions w/ various item list display options.
 Only available in full screen layout.

Initial Page Edit Page List Report

LUKAS THIS NEEDS

NEW SCREENSHOT
 Three additional SAP Fiori floorplans are:
 Object View – Either embedded in master detail app or displayed as full screen page.
 Offers optimal multiple device support (simple objects or complex multi-faceted objects).
 Tab container allows information to be presented in different categories.
 Recommended floorplan display option; when editing switch to Flat Object View.
 Flat Object View – Displays object information in one long scrollable page, instead of tabs.
 Layout remains the same in both display & edit modes.
 Prevents user input & validation errors from existing across multiple tabs.
 Worklist – Displays collection of items that are to be processed by the user.
 User either has to complete a work item or delegate it to another user.
Object View Flat Object View Worklist
Fiori System Requirements

 Application Reference Library – Library of current Fiori applications.

 Locate individual or group application installation & configuration technical data.
 View previous application data & filter by Line of Business (LoB) & roles.
 Navigate to related resources; Product Availability Matrix, documentation, etc.
 Help Portal – Instant access to up-to-date SAP product documentation.
 Provides software information; installation/security upgrades/availability/integration.
 Implementation Overview – Complete installation overview.
 Front-end installation components & Gateway services for back-end configuration & connection.
 Database Requirements – Database requirements for all applications.
 Includes various databases including SAP HANA.
Fiori Application Types

 SAP Fiori UX has three main application types:

Transactional Analytical Factsheet

Task-based Access Insights Search & Explore

Access to tasks such as create, Visual overview of specific topic for View important information regarding
change, or approve requests. KPI analyses (Operations insight). objects & contextual navigation
between related objects.

Runs on Any Database & SAP HANA Runs on SAP HANA Runs on SAP HANA
 Approval Application – Scan through work item lists & take action.
 Based on split screen layout & make use of master list capabilities.
 Master-Detail Application – Scan through work item lists & take action.
 Main tasks are creating & editing list items.
 Based on split screen layout & also use the master list.
 Shopping Application (Collect App) – Used to browse & collect objects.
 Allow for more complex actions or processing.
 Browse objects, collect them into online shopping cart, submit orders.
 Comprised of three general parts: Product List/ Shopping Cart/ Checkout Steps.
Approval Application Master-Detail Application Shopping Application (Collect App)
SAP Fiori Applications

 SAP Fiori applications are being created daily & can be sorted in SAP’s
Fiori Applications Reference Library by the following selections:

All Line of
Industry
Applications+ Business

Application Back-end
Roles
Component Product

Product
Version
(Front-end)
SAP Fiori Products

 SAP Fiori’s newest apps & new support package stacks for existing
Fiori products were released in July 2015. Current products include:
SAP Fiori for SAP Fiori for SAP SAP Fiori for SAP SAP Fiori for SAP
Request Approvals ERP CRM SRM

SAP Supply Network

Collaboration, User SAP Fiori for SAP
SAP Fiori for SAP SAP Fiori for SAP
Interface Add-On for Portfolio and Project
SCM GRC
Purchase Order Management
Collaboration

SAP Fiori for SAP SAP Fiori for SAP

SAP Fiori for SAP SAP Fiori for SAP
Information Lifecycle Master Data
EHS Management Event Management
Management Governance

SAP Fiori for SAP

SAP Fiori 1.0 for
SAP Fiori for SAP Simple Finance Add- SAP Fiori 1.0 for
SAP Business Suite
On for SAP Business SAP Fashion
HCM Foundation
Suite powered by Management
Component
SAP HANA

SAP Fiori 1.0 for

SAP Commercial
Project Management