introduction into sap fiori

Blackvard Management ConsultingIntroduction Into SAP Fiori

Copyright © Blackvard Management Consulting – All rights reserved www.blackvard.com

http://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/32005 – 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 increaseend-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

CSSFluid

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 ScreenMedium

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 AccessAccess to tasks such as create, change, or approve requests.

InsightsVisual overview of specific topic for KPI analyses (Operations insight).

Search & ExploreView 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: [email protected]

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

[email protected]

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

Software