You are on page 1of 16

Definition Paper

SAP Fiori
Document Version: 1.0 – 2016-07-07

Qualities of SAP Fiori apps

CUSTOMER

screen titles. menu paths. All rights reserved. 2 Example Emphasized words or expressions. messages. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system. Example Exact user entry. upgrade and database tools. Qualities of SAP Fiori apps Executive Summary . F 2 or E N T E R . names of variables and parameters. EXAMPLE Keys on the keyboard. and menu options. pushbuttons labels. transaction codes. This includes file and directory names and their paths. menu names. table names. These include report names. Textual cross-references to other documents. source text. CUSTOMER © 2016 SAP SE. <Example> Variable user entry. for example. SELECT and INCLUDE. These include field names. These are words or characters that you enter in the system exactly as they appear in the documentation. program names. EXAMPLE Technical names of system objects. and names of installation. and key concepts of a programming language when they are surrounded by body text.Typographic Conventions Type Style Description Example Words or characters quoted from the screen. Example Output on the screen. for example.

07. 3 .2016 Initial official version Qualities of SAP Fiori apps Executive Summary CUSTOMER © 2016 SAP SE. All rights reserved.0 07.Document History Version Date Change 1.

.......................... Qualities of SAP Fiori apps Executive Summary ................................. 11 Interoperable & Compatible .............................................. All rights reserved................................................................................................................................................ 5 Purpose and Scope of this Document .........................................................................................................................................................................1 SAP Fiori.......................... 10 2........1 2...............................................2 2..........1 Appendix............................................................9 Definition ...................... 8 Mobile Ready ............6.................................................. 9 2.............................................................................. 11 Extensibility & Flexibility – Manage modification free adoption ..........................12 3 3..................... 5 2 2............................ 14 4 CUSTOMER © 2016 SAP SE....................................................................................................................3 2.......Table of Contents 1 1..................... 9 SAP Fiori Release & Maintenance strategy ........................1 1.................................3 Executive Summary ..... 5 Overview of the qualities and criteria ...........................................................................2 SAP Fiori On-Premise Edition ..... 7 Cloud Ready .....................6...........................................................................................................................................12 Performance...................5 2.......................................................................................................3 General Maintenance Strategy Considerations .................................................8 2.................... 14 Abbreviation List & Glossary .. 7 SAP Fiori app Development & Architecture Paradigms .................................................................................... cloud edition ................................................................................ 10 2.........................................2 1..........................6 2.............. 7 SAP Fiori UX Paradigms . 8 SAP Fiori System Landscape ................................................................6..................................................................7 2............................4 2..........................................................................................................5 Motivation ..........................

1. these also do not fulfill all the criteria for SAP Fiori apps. The SAP Fiori visual theme can be used to enhance the overall user experience for existing applications. Cloud readiness: SAP Fiori apps need to be developed in a stack-agnostic way.e. It does not provide a comparison of SAP Fiori apps with other applications built by SAP or others. 1. SAP Screen Personas can be used by customers on top of SAP Fiori themed UIs (SAP Web Dynpro.2 Purpose and Scope of this Document This document is aimed at customers and partners. award-winning user experience for SAP software. so that expectations are consistently met when deploying and using SAP Fiori apps. i. by SAP Fiori Client and as self-contained native packaged apps. This is important in order to safeguard the SAP Fiori reputation. They can be consumed via a mobile browser. It covers design.. and also opens the door to allow individual apps to be certified as being SAP Fiori apps. defining qualities to be met beyond SAP product standards.3 Overview of the qualities and criteria Here is a brief overview of the qualities and main criteria which need to be fulfilled. adaptive. “classic” UIs etc. technical and implementation criteria. Architecture: The main aspects to highlight here are that SAP Fiori apps are platform-independent web apps built with SAPUI5. Mobile readiness: Every SAP Fiori app must run on mobile devices along the native app paradigm. 5 . Design: SAP Fiori apps need to follow the SAP Fiori user experience design principles (role-based. rather than just an app? Is it enough for an app to look like SAP Fiori. call platform capabilities in a generic way via offered unified shell services. with one dedicated OData service per app. or are there other aspects which need to be fulfilled? And why should we care? SAP Fiori is the new. for apps which do not fulfill all the criteria of SAP Fiori apps. coherent and delightful). They must run on SAP HANA Cloud Platform and hence require an app descriptor file to configure its behavior. They run in the SAP Fiori launchpad using intentbased navigation. and defines the qualities which need to be fulfilled by a SAP Fiori app. The rest of the document explains these in more detail. and can run on mobile and desktop devices. Examples of such apps are those built with SAP Web Dynpro. so it is very important to define a minimal level of qualities which an app needs to fulfill in order to be called a SAP Fiori app. Similarly. Those delivered by SAP need to follow the design-driven development process and pass design-gates. This document does not cover criteria for applying the SAP Fiori visual theme to existing applications (“classic” UIs). and only use platform-specific functions with an availability check first. Qualities of SAP Fiori apps Executive Summary CUSTOMER © 2016 SAP SE.1 Motivation When is an app a SAP Fiori app. All rights reserved.e. SAP GUI) to further simplify and enhance the user experience for customer-specific use cases. SAP GUI for HTML or SAP GUI for Windows.1 Executive Summary 1. simple. such a definition allows partners to become certified as being able to build SAP Fiori apps. i. Also.

test. 6 CUSTOMER © 2016 SAP SE.System landscape: SAP Fiori apps must run and be tested in a system landscape which fulfill the System Landscape Governance Board’s “Landscape Deployment of SAP Fiori front-end server (FES)”. Flexibility and extensibility: SAP Fiori apps allow customers to extend both the UI and the back-end. logging and tracing etc. synchronous upgrades of software component versions distributed across multiple systems are not required. Compatibility and interoperability – main aspects: Strict compatibility across versions is required. with not more than one and two round-trips respectively. All rights reserved. such as supporting staged development and transport of applications between stages (development. Qualities of SAP Fiori apps Executive Summary . productive). dependencies to other software component versions must be maintained. SAP Product Standards: Performance – the end-to-end response times must not exceed 1s for simple interactions and 3s for complex UIs. independent of the runtime environment. Release and maintenance strategy: SAP Fiori Apps support the principles of enterprise lifecycle management.

SAP Fiori apps are designed for people. at any time. SAP Fiori apps are highly interconnected so that a user will interact with several applications during the day or even within the same process. effectiveness or joy of use (Discover). 7 . and motivation as well as his work context before design starts. Technical or resource constraints can lead to a change in scope or in the way the application is implemented. This means that the scope and functionality of an application must not be determined by an existing transaction but by the informational and functional requirements of the user in a given task. Still there are many potential sources of errors or degradations in design and implementation quality that can occur during the development process. All design efforts should go into the definition of the use case and task flow to identify potential improvements of efficiency. Design guidelines and reviews. All rights reserved. and run platform and device independent.com/fiori-design/. (Design). o Delightful: Makes an emotional connection. standard controls and floor plans are means to achieve such consistency in a scalable manner. Qualities of SAP Fiori apps Definition CUSTOMER © 2016 SAP SE. o Simple: Focuses only on what’s important to the user and hides unnecessary complexities o Coherent: Provides one fluid. o Adaptive: Supports how and where you work. Users will access their apps through different devices and channels and users should have a coherent experience across all devices. intuitive experience. The SAP Fiori product line should always stand for quality in design and implementation and we need to look into every detail of the implementation to avoid errors or design glitches in the final product (Develop). with any device. Applications should therefore look and behave in a similar and predictive manner. for any business process and task.1 SAP Fiori UX Paradigms SAP Fiori apps are implemented so that they are o Role Based: Define and design as per the needs of business users and provide the person in a certain role (the persona) with the tools required to perform one’s job. 2. 2. In the following chapters key aspects are explained in detail to define what a SAP Fiori app must or should comply with. SAP Fiori apps can be built and designed in many different ways to both allow flexibility as well as support consistency.2 SAP Fiori app Development & Architecture Paradigms The following rules are fundamental for any SAP Fiori app development. Consistency across applications is essential to usability and learnability of the SAP Fiori app portfolio. admin and developer perspective. During the design phase all device form factors should be evaluated for specific requirements that should be taken into account to better adapt the design. It is essential to have a thorough understanding of the user. his needs.sap. SAP Fiori apps run in the SAP Fiori launchpad.3. For more details please refer to chapter 2. which provides a single source of entry for all applications and systems. Further information can be found in https://experience.2 Definition SAP Fiori apps need to be perceived as consistent from an end user. o SAP Fiori apps must have an approved UX design.

developers may not use platform-specific functionality without an availability check. caching or routes) of the HTML5 application on HCP. o Every SAP Fiori app must run on mobile devices along the native application paradigm. Furthermore SAP Fiori apps have the capability to make use of native features of a mobile device like camera. The only thing that needs to be done is adding an application descriptor file that configures the behavior (e. The compliance has its foundation in the architecture. Qualities of SAP Fiori apps Definition . the SAP HANA Cloud Platform (HCP) or as part of a capsulated hybrid web application without modifying the app itself. o Every SAP Fiori app must run in the SAP Fiori launchpad and use intent based navigation. An application specific app descriptor is mandatory for packaging a SAP Fiori application as a native mobile application. In order to archive this. Platform capabilities like personalization or navigation are called in a generic way via offered unified shell services.Container. Moreover. o Every SAP Fiori app must run as platform independent web app. SAP Fiori Client and as selfcontained native packaged applications.one dedicated OData service. This means. the software lifecycle of these apps can be managed. o SAP Fiori apps are based on OData services. o One SAP Fiori app . A SAP Fiori app… o Does not call directly services from sap.ui2 namespace. In order to integrate these capabilities a SAP Fiori app developer needs to adopt his front-end coding by using additional exposed APIs 8 CUSTOMER © 2016 SAP SE. location based data. offline usage and many more.Golden Rules for Implementation (ICC department) SAP Fiori Architecture for SAP S/4HANA 2. All rights reserved.ushell.g. o Interacts with the shell UI only using shell services. On mobile devices SAP Fiori apps can be consumed via a mobile browser. o Every SAP Fiori app is defined by a set of metadata. o No custom CSS is allowed for SAP Fiori Apps. tablet and smartphone device. Compliance to these rules ensures e. PIM integration assets. SAP Fiori apps using the sap.getService(“[service name]”) to get a proper instance for any shell service. Following the rules is essential to enable a sophisticated orchestration and common behavior of the various SAP Fiori apps. Innovative Smart Controls requiring the SAP Fiori Layered Repository (LRep) work here the same way along with advanced features like the embedded runtime adaptation (RTA).3 Cloud Ready SAP Fiori apps are cloud-ready by nature as they are developed in a stack-agnostic way. Hence. Extensions by partners and customers can be easily done by leveraging the integrated SAP Web IDE functionality. o Uses sap.m SAPUI5 library provide adaptivity across various form factors: the same application can run on a desktop.4 Mobile Ready SAP Fiori apps are mobile ready by nature. SAP Fiori apps .g. the cloud runtime environment behaves the same as the on premise.o SAP Fiori UIs are built with SAPUI5. the same SAP Fiori app is able to run on an SAP Fiori front-end server (FES). 2. o SAP Fiori UIs and OData services must be defined in different software components. they are built in a platform-independent way by using SAPUI5.

tracing and coherent auditability of the entire application lifecycle.g. the recommendations and also the other deployment options are updated regularly. etc. with centrally defined defaults. For proper mobile behavior every SAP Fiori app must run on mobile devices along the native app paradigm.5 SAP Fiori System Landscape From a system landscape planning and operations perspective all SAP Fiori apps must run and be tested in a system landscape which fulfill the System Landscape Governance Board’s “Landscape Deployment of SAP Fiori front-end server (FES)”. independent of the runtime environment:  Automatic creation and selection of technical artifacts. Integration of SAP Mobile Platform into SAP Fiori Landscape (on SCN) and Offline Enablement for Decision Makers (on SDN).) Qualities of SAP Fiori apps Definition CUSTOMER © 2016 SAP SE.  Implement version evolution policies. to protect against downgrades. which is officially approved by the System Landscape Governance Board (SLGB). etc.2 and Guideline Mobilizing SAP Fiori.. Please refer to chapter 2. All rights reserved. leaving no inconsistent intermediate states. These so called mobile qualities can be consumed when running inside the SAP Fiori Client or the app has to be packaged as native mobile app.from Apache Cordova & SAP Mobile SDK.  Logging. technical users. 9 . Due to the highly agile environment in this area.  Support for staged development and transport of applications between stages  Transactional consistency: a deployment either finishes successfully or fails completely (rollback). 2. The process how to obtain a recommendation or approved option is defined within the UX Explorer : Landscape Deployment of SAP Fiori front-end server (FES) 2. like technical names. and can be packaged and deployed to either on premise runtime environments as well as into SAP cloud based environments fulfilling customers demand for mission critical software in an enterprise landscape Therefore SAP Fiori apps support the principles of enterprise lifecycle management. version history.  Recoverability: resume deployment from the point of failure of a multi-step operation.  Query interface for application monitoring and support tools (application state.6 SAP Fiori Release & Maintenance strategy An SAP Fiori app is considered to be built-once. dependencies.  Software source policies: deploy only signed content from certain vendors. e.

o With the help of Maintenance Planner. The data in the Maintenance Planner allows IT to plan the changes based on the system compatibility check to update/upgrade their systems. Despite the SAP Fiori app itself. For implementation. Qualities of SAP Fiori apps Definition . The delivery is foreseen to be first done into an SAP owned SAP cloud account. All rights reserved. services and data models. I. SAP Fiori apps have to adhere to this paradigm. the corresponding back-end preparations (OData service implementation Add-Ons and the cloud connector) need to be put into consideration when talking about the SAP Fiori app life cycle. cloud edition Cloud platforms differ from traditional application servers in the flexible way they support diverse application runtime technologies. adopt your existing SAP cloud account and/or subscribe to the chosen set of SAP Fiori apps o Use Software Update Manager (SUM) to do the update/upgrade for the Business Suite back-end based system consuming the xml file and the downloaded software archives for the OData back-end add-ons. Cloud platforms hence give weight to an agnostic as well as a coherent deployment model for SAP Fiori apps:  Their dependencies are described in a platform neutral way. created with different technologies and deployed to different targets. All these parts.1 SAP Fiori. It is hosted at SAP Service Marketplace. must still run as a coherent application. UIs.6.  Developed in one coherent development system. o Apply the product change on each system represented in Maintenance Planner to generate a machine readable xml file describing the targeted systems state and to supply all required software archives to reach it.  All parts are deployed together.2 SAP Fiori On-Premise Edition In the on premise landscapes SAP Fiori apps are delivered as ABAP Add-Ons and the SAP Fiori architecture allows an upgrade of the SAP Fiori front-end server independent from the SAP Business Suite back-end. SAP Fiori apps nevertheless will require a minimum stack to run.e.  Module updates are managed without breaking the application. but with a single. the SAP Fiori app Reference Library provides in this respect a systematic overview about all SAP Fiori apps. the SAP Fiori app Reference Library provides in this respect a systematic overview about all SAP Fiori apps.6. automatically. trigger the creation a SAP cloud account. This varies from app to app. 2. The data in the Maintenance Planner allows IT to plan the changes based on the system compatibility check to update/upgrade their systems. common lifecycle. in the right order. Maintenance Planner is the tool for customers to visualize systems with the focus on installed software to plan and to simulate software changes and to analyze the system impacts. where customer accounts can subscribe to. o Select SAP Fiori apps in the SAP Fiori app Reference Library and navigate to the Maintenance Planner.2. 10 CUSTOMER © 2016 SAP SE. SAP Fiori apps are deployed as multi-target applications (MTA) addressing this life-cycle and orchestration complexity of continuous deployment for cloud platforms. A multi-target application (MTA) is comprised of multiple parts. An actual physical deployment into a customer account does not exist.

All rights reserved. As a matter of fact. 2. Here SAP delivers fixes only. their concrete software component versions (SWCVs) are not necessarily co-deployed in the same system but rather distributed across the landscape.o Apply the product change on each system represented in Maintenance Planner to generate a machine readable xml file describing the targeted systems state and to supply all required software archives to reach it. At component upgrade cross-compatibility guarantees business continuity of the regarding application. Process Development has to consider rules for evolving OData services in a compatible way.3 General Maintenance Strategy Considerations So the independence of the SAP Fiori front-end server is a big advantage especially when it comes to multiple back-end systems and the need to upgrade only one front-end server to consume the latest SAP Fiori apps and UX. Qualities of SAP Fiori apps Definition CUSTOMER © 2016 SAP SE. functions and UX. Changes are reflected in the services metadata which may be individually interpreted by the UI to establish a compatible behavior. SAP Fiori apps shall accomplish this corridor bidirectionally. For our customers it is mandatory to upgrade to the next SP level if they want to consume the Innovation code line and gain the advantages from new features. Unless synchronous upgrades can be assured (e. Ideally. but also affects the cut of software components resulting in a split of UI and back-end artefacts into different software components.and back-end co-deployment) a corridor of compatible changes has to be considered. Once developments have been carried out on the UI and/or service side cross-compatibility tests should be run to verify interoperability. For example the product UIs’ SWCVs could be deployed on a central SAP Fiori front-end server/SAP Gateway hub while each of the back-end systems connected to the Gateway relies on own software component versions. A grouping of changes is possible by using a service schema version which is again interpreted in conditional UI logic. o Use Software Update Manager (SUM) to do the update/upgrade on each NetWeaver based system (front-end server and back-end server) consuming the xml file and the downloaded software archives (SAP Fiori add-ons and OData back-end add-ons). by a cloud or customer operation model or by restriction to a single system through front. Stable Stack – Phase of a release starting after the innovation stack ends.7 Interoperable & Compatible The fundamental rules for SAP Fiori apps as described above demand a decoupling with a SAPUI5 based UI and OData services to access business data in back-end systems.g. This decoupling not only aims at software design. i. 11 . an older UI shall be interoperable with a newer service and vice versa.e. The lifecycle of SAP Fiori apps considers the following approach: Innovation Stack – Initial phase of a release with quarterly upgrades to next SP level delivering features and functions. Development artefacts and their interface may need to evolve over time. In respect of a distributed system landscape and potentially lagged deployment of either the UI or service modifications a compatibility of changes is demanded.6. 2.

g.9 Performance We use the well-known UX categorization of a user interaction step (UIS) to define o the End-to-End Response time KPIs o the number of sequential roundtrips on the critical path UIS Category End-to-End Response Time [ms] # Instant Feedback < 150 0 Typically no WAN request is possible e. 2. hiding fields.2. Typically end user expects an interaction pattern which signals continuously the progress (e. and database caches) are filled.: processing on the front-end: mouse over. In the cloud edition. intermediate caches. Some other UI controls (like Simple Form) also support this flexibility.g. End-to-End Response times and number of Roundtrips shall be met under the assumption that all caches (Client caches. the most important extensibility tasks can be realized by key user tools. highlighting of fields. via progress indicator) and which (optionally) allows to push the running execution to background (being asynchronously informed afterwards) In exceptionally cases the simple interactions “Open application” and “Save operation” may take up to 2000ms. server caches.g. SAP Fiori apps allow both an enhancement of the UI as well as back-end extensibility.: analytics. planning Exceptionally Complex Description Roundtrips KPI has to be set individually by Product Owner. adding fields or changing the terminology – all realized by runtime authoring tools directly from the SAP Fiori UI. The End-to-End Response times are defined for a desktop browser with LAN-Connectivity (minimum latency). Qualities of SAP Fiori apps Definition . This is always possible when the UI is based on Smart Controls or SAP Fiori Elements. 12 CUSTOMER © 2016 SAP SE.8 Extensibility & Flexibility – Manage modification free adoption Extensibility enables partners and customers to enhance SAP software modification free – both on premise and in the cloud edition. In environments with latency the KPIs are increased with n * latency [ms] (n = # of Roundtrips). UI extensibility means modification free changes like logo or theme changes. validations and determinations without server requests Simple < 1000 1 Majority of user interaction where the application server has to be involved are expected in this category Complex < 3000 2 Less than 20% of user interactions are expected in this category e. All rights reserved.

especially in the JavaScript code on client side. Tools like the chrome developer tool should be used to measure response time and memory consumption. Measure the response time and the number of sequential round trips. Process Classify the user interaction steps of your SAP Fiori app. 13 . Qualities of SAP Fiori apps Definition CUSTOMER © 2016 SAP SE. All rights reserved. Measure the memory consumption on client side.Very important for good SAP Fiori app is (last but not least): Check for memory leaks .

All rights reserved. Qualities of SAP Fiori apps Appendix .3 Appendix 3.1 Abbreviation List & Glossary Abbreviation Term API Application Interface BSP Business server pages CSS Custom style sheets FES SAP Fiori front-end server FC SAP Fiori Client FLP SAP Fiori launchpad GUI Graphical User Interface Technology HCP SAP HANA Cloud Platform KPI Key Performance Indicator LAN Local area network LRep Layered repository MTA Multi-target applications NW SAP NetWeaver SDK Software development kit SP Support package SUM Software Update Manager SWCV Software component version UI User Interface UX User Experience WAN Wireless area network 14 CUSTOMER © 2016 SAP SE.

.

IBM. Massachusetts Institute of Technology. UNIX. SAP Business ByDesign. iSeries. Inc. PostScript. Inc. Power Architecture. Data contained in this document serves informational purposes only. Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.. DB2 Universal Database. ByDesign. Program Neighborhood. System p. Windows. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG.com/contactsap © 2016 SAP SE. These materials are subject to change without notice. SAP NetWeaver. PartnerEdge. DB2. X/Open. and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. System x. Redbooks.S. and SAP Group shall not be liable for errors or omissions with respect to the materials. AIX. POWER6. Excel. z10. z9. POWER5+. POWER5. JavaScript is a registered trademark of Sun Microsystems. Java is a registered trademark of Sun Microsystems. MetaFrame. R/3. OS/400. RETAIN. AS/400. eServer. and MultiWin are trademarks or registered trademarks of Citrix Systems. . All other product and service names mentioned are the trademarks of their respective companies. z/OS. National product specifications may vary. xApps. Outlook. System i5. Citrix. Adobe. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services. and Motif are registered trademarks of the Open Group. Microsoft. OS/390. Parallel Sysplex.www. All rights reserved. and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE in Germany and in several other countries all over the world. These materials are provided by SAP SE and its affiliated companies ("SAP Group") for informational purposes only. GPFS. PowerVM. the Adobe logo. System z. S/390. MVS/ESA. World Wide Web Consortium. DB2 Connect. ICA. HACMP. Netfinity. POWER. and PowerPoint are registered trademarks of Microsoft Corporation. PowerPC. Duet. HTML. pSeries. without representation or warranty of any kind. used under license for technology invented and implemented by Netscape. Acrobat. i5/OS. XML. BladeCenter. System z9. zSeries. if any. S/390 Parallel Enterprise Server. Nothing herein should be construed as constituting an additional warranty. OpenPower. Linux is the registered trademark of Linus Torvalds in the U. and other countries. xApp. Intelligent Miner. xSeries. The information contained herein may be changed without prior notice. SAP. System Storage. WinFrame. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. BatchPipes. Inc. VideoFrame. System ads.sap. XHTML and W3C are trademarks or registered trademarks of W3C®. System z10. z/VM. RACF. WebSphere. System p5. OS/2. Oracle is a registered trademark of Oracle Corporation. POWER6+. OSF/1.