Introducing SAP Fiori

Objectives

After completing this lesson, you will be able to:
  • Describe the Concept and Design principles behind the SAP Fiori
  • Understand the Technology behind SAP Fiori
  • Access the SAP System using SAP Fiori and the Fiori Launchpad

SAP Fiori: Concept and Design Principles

SAP Fiori User Experience

SAP Fiori is the user experience for SAP software. SAP Fiori 3 was first released in 2019 with one central motivation: the development of a design that could be adopted across all SAP products and lead to a more consistent and integrated experience across the SAP portfolio.

This is an introductory image that sets up our discussion of the concept and design principles of SAP Fiori.

SAP Fiori is the design language that brings great user experiences to enterprise applications within the SAP portfolio. To do this, SAP has identified three separate dimensions which guide the development of the SAP Fiori interface. These dimensions are as follows:

  1. SAP Fiori Concept
  2. SAP Fiori Design
  3. SAP Fiori Technology

Let's explore each of these dimensions to better understand the Fiori interface and the benefits it brings SAP customers.

Manage Products App

The SAP Fiori concept is fundamentally a simplification of the user experience relying on modern design principles such as role-based, adaptive, simple, coherent, and delightful. It represents a paradigm shift in user experience for SAP applications. SAP Fiori offers a set of applications that cover frequently used SAP software functions, thus enabling users to perform various tasks such as approvals, information lookups, and self-service tasks with ease and efficiency.

This image is a screenshot of a product management interface. The interface is used to manage and view details of various products.

Unlike its predecessors, SAP Fiori is guided by these principles, with an emphasis on simplifying the work process for each end-user.

Gone are the dense and monolithic screens of SAP's legacy systems, providing a streamlined interaction with SAP's powerful backend functionalities. The Manage Products app is but one example of this simplification of SAP business functionality.

This design methodology adheres strictly to the Fiori Design Guidelines, which advocate for a user-centered approach with a strong focus on the '5-1-2' screen principle - five user interactions to view important tasks, one primary action per screen, and maximization of the two-second rule for system feedback.

For another example, consider the SAP Fiori 'Approve Purchase Orders' application, which streamlines the approval process by providing purchasers with a swift overview of the most critical information. Where traditional SAP GUI transactions may have required navigation through multiple tabs and fields, Fiori's targeted application facilitates quick, informed decisions with minimal interaction.

For further information on the SAP Fiori Design Guidelines, visit

SAP Design - SAP User Experience Community.

Now, let's explore these principles and see how they influence SAP Fiori Design.

SAP Fiori Design

At its core, SAP Fiori delivers a modern design philosophy that aims to provide a coherent and comprehensive user experience across all SAP products.

This image describes the key principles of SAP Fiori Design. The key principles revolve around a focus on user-centric design, flexibility, and a seamless user experience.

SAP Fiori's design philosophy is grounded in the five core principles outlined above: role-based, adaptive, simple, coherent, and delightful. Using these principles, SAP Fiori facilitates the creation of applications that are tailored to the tasks and responsibilities of individual users, thereby enhancing efficiency and ease of use. Now, let's take a look at each principle in more detail.

Role-Based

This figure illustrates the transition from functional-based applications to role-based applications in software design. We see functional-based applications on the left and role-based applications on the right.

The principle of role-based access is anchored in the understanding that the relevance and efficiency of a user's interaction with an enterprise system is significantly heightened when tailored to their specific role within an organization.

By adopting a focus on roles, SAP Fiori diverges from the monolithic and transaction-centric interfaces of traditional SAP GUI applications and instead offers a personalized, task-oriented experience that aligns with the unique responsibilities and authorizations of each user.

Watch the following video to learn more about the benefits of role-based access.

You will now examine the SAP Fiori launchpad.

The SAP Fiori Launchpad

Obviously, the implementation of a role-based approach in SAP Fiori necessarily involves the careful design and assignment of Fiori apps to user roles within the enterprise. Each app is conceived to deliver a streamlined workflow, catering to the tasks and data that are pertinent to the user's role.

This figure gives you an overview of the functionality of the SAP Fiori launchpad.

The Fiori Launchpad is a role-based, personalized, real-time interface that provides contextual access to applications and business information. It is the users' point of entry to SAP Fiori apps on desktop and mobile devices. It provides access to all business apps, features a "search and explore" bar, and can be accessed across devices.

As part of the launchpad configuration, roles are defined within the SAP system, and through the assignment of these roles, users are granted access to a curated set of applications that perform specific business functions. This context-driven availability not only simplifies the user experience but also enhances data security by ensuring that users access only the data and functions necessary for their job functions.

For example, a procurement manager in an organization may have role-based access to Fiori apps such as 'Manage Purchase Orders,' 'Approve Requisitions,' and 'Monitor Supplier Deliveries.' These apps consolidate all relevant information and tasks into a coherent and accessible suite, thus empowering the procurement manager to execute their responsibilities more effectively without the distraction of extraneous system functionality.

Similarly, a maintenance technician within the same organization may encounter a vastly different set of Fiori apps appropriately aligned with their role. This could include 'Report Malfunction,' 'Track Maintenance Requests,' and 'Approve Repair Costs,' each one providing the precise tools and information necessary to resolve maintenance issues promptly and efficiently.

Adaptive

Adaptive designs ensure that SAP Fiori applications can function seamlessly across devices and contexts, embodying a responsive framework that adjusts to varying screen sizes, resolutions, and orientations. As you can see in the previous slide entitled SAP Fiori User Experience, this innate adaptability allows for continuity of user experience, whether an employee is interacting with the application on a desktop, a tablet, or a smartphone.

For example, a field service technician can begin reporting on a maintenance task at the site using their mobile device, then later complete more detailed documentation on a desktop without loss of functionality or efficiency.

Coherent Harmonized Design

Coherency within SAP Fiori enables users to quickly grasp the operation of diverse applications throughout the SAP ecosystem. This principle dictates that common tasks should have consistent interactions and visual design across all applications. By doing so, when a user becomes familiar with one application, they can transfer their understanding efficiently to new applications.

This figure outlines the design principles and features of a user interface that emphasizes coherent harmonized design based on principles such as the use of common visual design elements across products and the deployment of a flexible content structure through sites to provide multi-level navigation.

For instance, navigational elements such as the 'SAP Fiori Launchpad' deliver a synchronized user experience, presenting users with tiles representing different applications, all adhering to uniform design language and behavior.

One of the most important considerations was how to provide more information on home pages. SAP studied how aspects of intelligence such as natural language interaction and machine intelligence can become a key part of the overall experience. SAP integrated these into the foundation of the design and provided the following features:

  • A new theme for a fresh, modern look and feel
  • Intelligent home pages showing everything the user should focus on
  • Digital assistant with fully integrated conversational user experience
  • Active business situation handling, with explanations, insights, and proposed actions
  • Dynamic content to support intelligent apps with embedded artificial intelligence (AI)
  • Improved search previews, results pages, and result visualizations
  • A central inbox, also integrated with the digital assistant

Simple

In SAP Fiori, simplicity is achieved through an intentional focus on clarity and the reduction of unnecessary complexity within the user interface. SAP Fiori applications are designed to prioritize essential information and frequent tasks, promoting ease of navigation and a reduced cognitive load for users.

This design principle is exemplified in the Fiori "role-based" approach, where a user's interface and the accessible functions are tailored specifically to their job role, displaying only the tools and data required to perform their tasks effectively and avoiding the clutter of irrelevant information.

Delightful

Lastly, the principle of delight is meticulously woven into SAP Fiori through engaging interactions, aesthetically pleasing visual designs, and personalization features that resonate with users. The goal is to transform routine business tasks into engaging experiences that promote user satisfaction and loyalty.

For example, the inclusion of smart insights using machine learning to assist users in making data-driven decisions, or the option to personalize their Fiori experience.

Technology Components and Tools behind SAP Fiori

SAP Fiori: Concept and Design Principles

SAP Fiori is a collection of technology components and tools that reflect the evolving digital workplace.

This image provides an overview of the key technology components of SAP Fiori.

The figure above provides you with an overview of the key technology components of SAP Fiori. These technology components include the following:

  • SAPUI5

    SAPUI5 is a UI technology based on JavaScript, CSS, and HTML5.

  • SAP Fiori Front-end Server

The SAP Fiori front-end server is an add-on product for ABAP Platform. This product delivers the service pack stack definition (stack.xml) suitable for the SAP Fiori app deployment in an on-premise scenario for the respective ABAP Platform version. With this, the SAP Fiori front-end server decouples the user interface software updates that you need for SAP Fiori from your back-end system.

  • SAP Gateway and OData

    The SAP Gateway connects devices, environments, and platforms to SAP systems efficiently and securely. By using OData, the SAP Gateway is open to any programming language or model to connect to SAP and non-SAP applications.

  • SAP Fiori Launchpad

    The SAP Fiori Launchpad is the main entry point to SAP Fiori apps on mobile and desktop devices.

  • SAP Business Application Studio

    Note

    The SAP Business Application Studio provides the platform for end-to-end application lifecycle: development, packaging, deployment, and customer extensions for SAPUI5 and SAP Fiori applications. This includes support for developing applications that are deployed to SAP BTP environments based on Cloud Foundry technology, as well as applications for browser and mobile devices. For more information visit: SAP Business Application Studio | SAP Help Portal (

    SAP Business Application Studio

  • SAP Analytics

    SAP Fiori analytics refers to the use of data analysis and visualization tools within the SAP Fiori user interface. This allows users to gain insights from their data, make informed decisions, and monitor key performance indicators in real-time. SAP Fiori analytics enables users to interact with their data and create customized reports and dashboards to support their business processes.

Note

We will discuss the SAP Fiori Front-End Server, as well as the SAP Gateway and Open Data Protocol (OData) in an upcoming unit.

SAPUI5

The SAP Fiori design philosophy employs the SAPUI5 framework, a robust toolkit that facilitates the development of feature-rich, responsive, and adaptive user interfaces.

SAP Fiori Clients and Device Types

SAPUI5 ensures cross-platform compatibility with support for a range of clients, thus enabling a seamless user experience across various devices including desktops, tablets, and smartphones.

There are three clients available to access SAP Fiori:

  1. Web Browser

    Any HTML5-ready browser can be used.

  2. SAP Business Client

    As of SAP Business Client 6.0, you can create SAP Fiori launchpad system connections.

  3. SAP Mobile Start

    You can access SAP Launchpad service web sites providing apps based on cloud and on-premise SAP solutions.

This figure lists SAP Fiori Clients and Device Types.

Moreover, SAP Fiori adheres to the OData protocol for its data services. The lightweight nature of OData is adept at handling vast streams of enterprise data, effectively channeling them into actionable insights within the Fiori applications. As mentioned above, the OData protocol will be discussed more fully in a later unit.

HTML5 is critical in the architectural design of SAP Fiori as it provides a semantic-rich framework that enhances the accessibility and discoverability of content within enterprise applications. Its flexibility and cross-platform support ensure that SAP Fiori applications are universally accessible.

The utilization of HTML5 in SAP Fiori is made possible through the SAPUI5 framework, a robust, developer-friendly toolkit designed to create applications that adhere to HTML5 standards. This framework leverages HTML5's comprehensive set of APIs and elements, enabling the creation of enterprise-grade applications that offer functionalities such as offline storage, multimedia integration, and document editing, without reliance on proprietary plug-ins or additional software.

For example, an SAP Fiori application such as the Approve Purchase Orders app employs HTML5 to provide a seamless user experience across devices. By making use of HTML5's canvas element and SVG support, the app is capable of rendering complex graphics and interactive visualizations that aid approvers in making informed decisions quickly and efficiently.

For more information on SAPUI5, visit: SAPUI5 | SAP Help Portal (https://help.sap.com/docs/SAPUI5)

Usage of SAP Fiori Launchpad to Access your S/4HANA system

Now that you have discovered the design principles and technologies that make the SAP Fiori User Experience possible, let's turn to the practical exercise of using the SAP Fiori Launchpad to access your S/4HANA system and learn how to navigate and personalize your interface.

Summary

After this lesson you can describe SAP Fiori, including the concepts, design principles and technology behind it. Also you can now access your SAP System using SAP Fiori and the Fiori Launchpad.

Log in to track your progress & complete quizzes