SAP Fiori Pillar

SAP Fiori

SAP Fiori is a user experience (UX) for SAP software. SAP customers can use this UX for various solutions, such as SAP S/4HANA, SAP SuccessFactors Employee Central, SAP Ariba, SAP Cloud for Customer, and more.

 

Table of Contents

  1. History of SAP Fiori
  2. Types of Applications
    1. Transactional Apps
    2. Fact Sheet Apps
    3. Analytical Apps
  3. SAP Fiori Elements
  4. SAP Fiori Launchpad
    1. End Users
    2. Administrators
    3. Developers
      1. ABAP Programming Model for SAP Fiori
      2. ABAP RESTful Programming Model
  5. SAP Fiori Design Guidelines
  6. Related SAP Technologies
    1. SAPUI5
    2. SAP Gateway and OData
    3. SAP HANA XS
  7. Other Key SAP Fiori Terms
  8. Additional Resources
    1. Blogs
    2. Books by SAP PRESS

 

History of SAP Fiori

SAP R/3 relied on the SAP Graphical User Interface (GUI) for its forward-facing presentation layer. However, with the advent of SAP S/4HANA in the 2010s a new UI was developed for the presentation layer of apps in the new suite. This was named SAP Fiori. As organizations transition to SAP HANA and SAP S/4HANA, SAP Fiori can be considered the replacement for SAP GUI. 

 

SAP GUI and SAP Fiori Comparison

 

SAP Fiori was first introduced in 2013, with a primary focus on a mobile-first display approach. It had limited content, containing only 25 apps, and was considered a simple-use solution that could be accessed across multiple devices. Since then, the functionalities have grown significantly, with over 7,500 apps available to users.

 

A major focal point of SAP Fiori is the user and how each individual user works, with the look and feel of the software driving a positive and more efficient user experience. The layout is designed for direct access to different apps and notifications, allowing users to obtain information and perform actions quicker. This creates a more productive experience over SAP GUI, which requires one to maneuver through a series of menus to accomplish a single task.

 

In 2016, it evolved into SAP Fiori 2.0, a design concept available for both SAP S/4HANA and SAP ERP. Fiori 2.0 featured a new and improved design that enhanced navigation capabilities and made it easier to manage a plethora of applications. It also included updated floorplans and provided the ability to access system events through notifications.

 

Early development of the latest version, SAP Fiori 3, was announced in 2017 with the intent of creating a more cohesive and integrated user experience across the suite. The new experience includes a better design, customization features, and the ability to be adopted across various SAP products.  

 

Some components of SAP Fiori 3 have already been released: The new Quartz theme, which welcomes a subtle aesthetic of light and neutral features, and the new shell header bar, designed to be more simplistic for all SAP products. SAP Fiori 3 was first released to SAP S/4HANA Cloud customers in the 1908 release and to on-premise users in the 1909 release.

 

UI Overview

(Back to ToC.)

Types of Applications

SAP Fiori helps users handle many different SAP business tasks, such as creating or tracking purchase orders, watching out for new business opportunities, or displaying invoices. Developers utilize SAP Fiori elements that act as design templates to create consistent applications. Each floorplan design can be categorized into a type of application: transactional, fact sheet, or analytical.

 

Transactional Apps

With transactional apps, users are able to perform activities such as creating, changing, and approving requests or orders, via guided navigation.

 

For on-premise SAP ERP and SAP S/4HANA systems, the UI layers are stored in an ABAP front-end server. It contains product-specific UI components and infrastructure components like central UI, SAPUI5 control library, SAP Fiori launchpad, and SAP Gateway with OData enablement.

 

It’s important to note that the ABAP server is only relevant in on-premise systems. In terms of cloud products and solutions, such as SAP S/4HANA Cloud, SAP SuccessFactors, SAP Ariba, etc., ABAP is not involved.

 

Fact Sheet Apps

Fact sheet apps are used to view essential contextual information or a 360-degree view of specific central objects used in business operations. You can call fact sheet apps from the search results displayed in SAP Fiori launchpad, from other fact sheets, or from transactional and analytical apps.

 

The launch request of a fact sheet is sent from the client/browser to SAP Web Dispatcher (reverse proxy). Communications between the two are made through OData HTTP/HTTPS protocols. SAP Web Dispatcher sends INA (an internal protocol used by SAP to retrieve data from SAP BW or the SAP HANA database) search protocol requests to the search models in the ABAP backend server.

 

Analytical Apps

With analytical apps, users are provided with business information and have the ability to analyze and evaluate strategic or operational KPIs in real time. This can be done on a large volume of data in a simplified front-end for enterprise control. These types of apps combine the data and analytical power of SAP HANA with the integration and interface components of SAP Business Suite.

 

When a user launches an analytical app, the launch request is sent from the client/browser to SAP Web Dispatcher, which sends the OData calls to the ABAP front-end server or SAP HANA XS. As with transactional and fact sheet apps, the ABAP front-end for analytical apps contains product-specific UI and infrastructure components. The ABAP back-end server comprises the SAP Business Suite with the business logic. SAP HANA XS also contains the following:

    • SAP Fiori app content for the different SAP Business Suite products
    • KPI modeling framework
    • A generic drill-down app
    • VDM reuse content

SAP Fiori and SAP HANA

(Back to ToC.)

SAP Fiori Elements

As mentioned above, SAP Fiori elements are low-code templates that support popular application patterns. Developers can use SAP Fiori elements to create apps based on OData services and annotations that don’t require JavaScript UI coding.

 

The predefined controllers and views help achieve design consistency and compliance with the latest SAP Fiori guidelines. The reusable common features also provide high development efficiency, relieving users of having to rebuild the UI and reducing the amount of frontend code needed to create the apps.

 

Here are some additional features SAP Fiori elements offer:

    • Message handling
    • SAP Fiori launchpad integration
    • SAPUI5 Flexibility Services support
    • SAP Web IDE wizard for app creation
    • Multi-device support
    • Criticality status indications (colors and icons)
    • Draft saving

The following list includes available SAP Fiori elements floorplans:

    • Analytical list page
    • List report
    • Object page
    • Overview page
    • Worklist

Learn more about SAP Fiori elements here.

(Back to ToC.)

SAP Fiori Launchpad

SAP Fiori launchpad is the entryway to all SAP Fiori apps. It provides different benefits for all different types of users: end users, administrators, and developers.

 

End Users

End users can easily maneuver SAP Fiori launchpad to access the applications they need. The portal is designed to make for a quick and straightforward experience through its group navigational list of tiles that provide app shortcuts and search capability to find apps or business data system wide.

 

The homepage is customizable, allowing users to add, delete, or adjust groups or apps. If an app is not visible on the homepage, it can be searched by using the app finder. SAP Fiori launchpad also features a “Me Area,” which allows end users to change settings and open recent apps.

 

SAP Fiori launchpad

Administrators

Administrators use SAP Fiori launchpad for configuration purposes. All apps must be configured in order to be accessed within SAP Fiori launchpad and this is achieved through target mapping.

 

Developers

Developers must create SAPUI5 applications that are compliant with SAP Fiori launchpad. The applications must be a UI component, as the SAP Fiori launchpad loads apps as components and not web pages. It is important not to open other apps directly through URLs, and therefore access should only happen through the SAP Fiori launchpad services. To make it easier for a code to work even when deployed on a different backend system, a user should use the many APIs, which can be called using JavaScript, that SAP Fiori launchpad offers.

 

Since building apps can be time consuming, the innovations of SAP Fiori elements help move along the creation process. If you’re an ABAP developer who has little coding experience, the premade floorplans, views, and controllers are essential for rapid app development.

 

There are two ABAP programming models which can be utilized to code SAP Fiori apps: the ABAP Programming Model for SAP Fiori and the ABAP RESTful Programming Model.

 

ABAP Programming Model for SAP Fiori

The ABAP Programming Model for SAP Fiori is the standard development model for new SAP S/4HANA applications. It supports optimized OData service development for SAP Fiori applications based on Core Data Services (CDS) views, supporting analytical, transactional, and search application scenarios.

 

When using the ABAP Programming Model, there are two possible application types that can be developed: read-only and transactional applications. Read-only applications only require an underlying CDS data model and application-specific analytics or search annotations. Transactional applications require the generation of a Business Object Processing Framework (BOPF) business object for handling operations for creations, updates, and deletion.

 

ABAP RESTful Programming Model

The ABAP RESTful Programming Model is the successor to the ABAP Programming Model for SAP Fiori. Like the previous model, the architecture and frontend supports the development of all SAP Fiori applications, based on CDS technologies for defining rich data models. It also features a service model infrastructure for creating OData services. The most significant update that this model features is it’s availability on the SAP Cloud Platform, which has been offered since August of 2018.

 

The model is integrated directly into the ABAP language core. It introduces new transportable ABAP development object types for behavior definitions, service definitions, service bindings, as well as a new Entity Manipulation Language (EML). As a part of the ABAP language, EML controls the behavior of business objects for the ABAP RESTful Programming Model.

 

The programming model can be offered in the cloud as the only ABAP language core runtime without any additional libraries and tools. There is the exception of SAP Gateway and the SADL orchestration framework dispatching requests to either the query or the business object runtime. With the previous ABAP Programming Model for SAP Fiori, this was not possible as it also relied on the BOPF for transactional processing, which is an ABAP framework and not part of the ABAP language.

(Back to ToC.)

SAP Fiori Design Guidelines

The philosophy behind setting guidelines in SAP Fiori is to ensure a harmonious and unified user experience across all devices. There are five core principles from which these guidelines are built around: role-based, adaptive, simple, coherent, and delightful.

    • Role-based – SAP Fiori is designed to fit your specific needs and adapts to the way you and your business work.
    • Delightful – SAP Fiori improves overall work experience, allowing users to effectively complete their tasks.
    • Coherent – The visual design is consistent throughout the platform, which provides regularity throughout a user’s experience, regardless of the current action being performed.
    • Simple – The functionality of SAP Fiori is basic and intuitive. Users can easily maneuver from place to place and complete tasks productively with the easy-to-use functions.
    • Adaptive – SAP Fiori is accommodating to the way an individual works. It provides instant insight on the information you care about. 

SAP Fiori Design Guidelines

 

(Back to ToC.)

 

Related SAP Technologies

The technologies related to SAP Fiori include: SAPUI5, SAP Gateway, OData, and SAP HANA XS.

SAPUI5

All SAP Fiori apps are built using SAPUI5, the UI development toolkit for HTML5 that provides a programming model for desktop and mobile applications. Its JavaScript UI control library allows developers to build applications that can run on any device.

 

SAPUI5 is made up of two components: the SAPUI5 library and the SAPUI5 core. The SAPUI5 library holds the themes and controls for both mobile and desktop, while the SAPUI5 core is the framework for various features that include:

    • Core, base, and model modules
    • Dependency/class loader to load control libraries
    • Reader manager, which creates HTML strings for the represented controls
    • SAP jQuery plug-ins

SAP Gateway and OData

SAP Gateway allows SAP applications to expose and consume data on the web through various devices, technologies, and platforms. It provides a variety of capabilities that give users a way to fully harness OData. Utilizing Representational State Transfer (REST) offerings and OData protocols allows SAP Gateway technology to operate with any programming language or model, and therefore does not require the need for SAP knowledge.

 

OData stands for Open Data Protocol and is a REST-based protocol. It’s used to expose, access, and modify information from different sources. When it was first developed by Microsoft, OData was designed to provide a RESTful API that was accessible by forming an appropriate URI (Uniform Resource Identifier) and assigning it to the corresponding HTTP header.

SAP HANA XS

SAP HANA XS is a web server within SAP HANA that provides an application development platform. As an integrated software extension, its purpose is to enhance performance activities and provide access to SAP HANA’s core features.

(Back to ToC.)

Other Key SAP Fiori Terms

In addition to the information laid out above, there are a handful of important SAP Fiori terms you should also be familiar with. Here are they are in list form:

    • BOPF – The Business Object Processing framework. It is an ABAP OO-based framework that provides a set of generic services and functionalities to speed up, standardize, and modularize your development.
    • SAP Cloud Platform – A platform that provides tools to create secure cloud-based applications.

    • SAP Enterprise Portal – A framework page that enables the use of SAP Fiori launchpad.

    • SAP Fiori Client – A native application for running the SAP Fiori launchpad that can be downloaded for iOS, Android, and Windows.
    • SAP Screen Personas – Provides the capability to transform classic SAP screens into SAP Fiori-inspired designs.
    • SAP Web Dispatcher – The entry point for HTTP requests, consisting of one or more SAP NetWeaver servers and lies between the internet and SAP system.
    • SAP Web IDE - The environment used to create and extend transactional, fact sheet, and analytical apps.

    • Target mapping – The way a user creates the tile option to select apps within SAP Fiori launchpad.

Additional Resources

Want to learn more about SAP Fiori? Additional information can be found in the blogs and books listed below.

Blogs

Books by SAP PRESS

What Next?

To continue learning even more about SAP Fiori, sign up for our weekly blog recap here: