Introduction Into SAP Fiori

Blackvard Management Consulting
Introduction Into SAP Fiori
Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com

Agenda
What Will Be Covered:
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.
1999 – R/3
2005 – ALV Grid
2010 – Web Dynpro 2014 – Fiori
What is SAP Fiori?

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.
UX Design Services
NEW RENEW ENABLE
SAP Fiori UX
New
Applications
Existing
Applications

https://en.wikipedia.org/wiki/Representational_state_transfer
What is SAP Fiori?
 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.
http://scn.sap.com/docs/DOC-61828
 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.
http://help.sap.com/fiori-client

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.).
https://uxexplorer.hana.ondemand.com/_item.html?id=10667#!/overview

Fiori Design Principles
 Focused applications are designed based on how people work & the most
common/critical activities.
SAP Fiori’s
5 Main
Design
Principles.
Role-based
• Designed for specific
business roles, needs
& work requirements.
• Provides pertinent
information at the
correct times.
Responsive
• On-demand user
support.
• Allows for instant
insight, regardless of
devices being used.
Simple
• Focuses on
importance.
• Personalize your
experience to your
specific tasks &
activities.
Coherent
• Fluid & seamless user
experience.
• Adheres to consistent
interaction & visual
design language.
Delightful
• Secures emotional
connection.
• Allows you to do your
job.

Multi-Device Support: Responsive vs Adaptive
 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:
 Applications manually define different
designs across different form factors.
 Applications adhere to adaptive design.
 Mobile first design approach.
 Responsive & adaptive
methods can be mixed.
Responsive
Mobile
CSS
Fluid
Cross-
platform
Desktop
Framework

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.

Application Responsiveness
 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.
https://experience.sap.com/fiori-design/ui-components/analytical-table-alv/

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.
For more information visit: http://help.sap.com/saphelp_uiaddon10/helpdata/en/13/e6f3bfc54c4bd7952403e20ff447e7/content.htm
 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.
For more information visit: http://experience.sap.com/fiori-design/concept/navigation/
 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.
For more information visit: http://experience.sap.com/fiori-design/floorplans/split-screen/
 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.
For more information visit: http://experience.sap.com/fiori-design/floorplans/full-screen/
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.
Edit PageInitial Page List Report
LUKAS THIS NEEDS
NEW SCREENSHOT

Fiori Floorplans
 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
Access to tasks such as create,
change, or approve requests.
Insights
Visual overview of specific topic for
KPI analyses (Operations insight).
Search & Explore
View important information regarding
objects & contextual navigation
between related objects.
Runs on Any Database & SAP HANA
(Exceptions for Financials & MRP)
Runs on SAP HANA Runs on SAP HANA

Fiori Application Types
 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)

All
Applications+
Line of
Business
Industry
Roles
Application
Component
Back-end
Product
Product
Version
(Front-end)
 SAP Fiori applications are being created daily & can be sorted in SAP’s
Fiori Applications Reference Library by the following selections:
SAP Fiori Applications
http://sap.com/fiori-apps-library

http://help.sap.com/fiori_products
SAP Fiori for
Request Approvals
SAP Fiori for SAP
ERP
SAP Fiori for SAP
CRM
SAP Fiori for SAP
SRM
SAP Fiori for SAP
SCM
SAP Supply Network
Collaboration, User
Interface Add-On for
Purchase Order
Collaboration
SAP Fiori for SAP
Portfolio and Project
Management
SAP Fiori for SAP
GRC
SAP Fiori for SAP
Information Lifecycle
Management
SAP Fiori for SAP
Master Data
Governance
SAP Fiori for SAP
EHS Management
SAP Fiori for SAP
Event Management
SAP Fiori for SAP
HCM
SAP Fiori 1.0 for
SAP Business Suite
Foundation
Component
SAP Fiori for SAP
Simple Finance Add-
On for SAP Business
Suite powered by
SAP HANA
SAP Fiori 1.0 for
SAP Fashion
Management
SAP Fiori 1.0 for
SAP Commercial
Project Management
 SAP Fiori’s newest apps & new support package stacks for existing
Fiori products were released in July 2015. Current products include:
SAP Fiori Products

Have Additional Questions?
Want to get FIORI for your own SAP
applications?
Please Set Up A Consultation.
Email: info@blackvard.com
Require A Consultation?

 Technical project lead and ABAP architect responsible for quality in technical scope and budget in a global
roll-out of SAP Logistics applications (SAP LE / LO)
 Conducting multiple SAP ABAP and SAP HANA® trainings for various US companies
 Implementation of a standard SAP software solution for Spend Management within SAP AG & ARIBA (annual
spend volume 3 Bill. EUR) which can be used in all SAP systems
 Improved claims management using SAP FS-CM which is generating annual savings of 15 Mio € for a huge
German public healthcare organization
 Implemented a global solution for procurement processes at BMW AG using SAP SRM / B2B
 Blueprinting and implementation of SAP software for banking credit cancelations for VOLKSWAGEN
Key Achievements of Blackvard Management Consulting in Previous Projects
What We’ve Accomplished

Blackvard Management Consultants
www.blackvard.comCopyright © Blackvard Management Consulting – All rights reserved
Short Bio:
Lukas M. Dietzsch is managing director at Blackvard
Management Consulting, LLC. He is holding a Master’s
degree in Information Technology and is an experienced IT
solution architect and project lead.
His strong background in adapting to requirements and
standards in different industries and on various platforms are
valuable assets for Blackvard customers.
He is repeatedly commended by customers for driving
efficient solutions for complex problems in globally
distributed team environments and meeting tough deadlines.
For further information please visit:
www.blackvard.com
Lukas M. Dietzsch
lukas@blackvard.com
Copyright © Blackvard Management Consulting- All rights reserved www.blackvard.com
Managing Director

An overview of current and previous customers:
Customers That Recommend Blackvard

Introduction Into SAP Fiori

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction Into SAP Fiori

Similar to Introduction Into SAP Fiori (20)

More from Blackvard

More from Blackvard (11)

Recently uploaded

Recently uploaded (20)

Introduction Into SAP Fiori