SAP Fiori Elements FAQ

SAP Fiori elements is a UI development library based on UI5. It provides a collection of SAP Fiori app templates – called floorplans – that are based on the most common use cases for SAP Fiori apps. These floorplans provide for the both the user interface and related logic. For example: navigation, search, filtering, multi-device support, edit mode, and draft control, and more. This means that the developer can simply connect data sources and have a running app much faster than custom UI5 development.

SAP Fiori elements began as internal solution at SAP. We needed it to ensure consistency among apps as we scaled the number of SAP Fiori apps we were building from 10s to 100s to the 1000s that exist today in SAP S/4HANA. In fact, SAP Fiori elements is used to create approximately 80% of the apps for SAP S/4HANA. The floorplans themselves continue to be maintained and enhanced by SAP, ensuring that they comply with the latest version of the SAP Fiori design system.

SAP Fiori elements streamlines the development of the most common SAP Fiori app scenarios. In many cases, this is some sort of list. The currently available floorplans are:

1. Overview page: Provides a page filled with cards summarizing a business scenario. The cards can be used as a jumping-off point for accessing further information.
2. List report page: Provides a page where users can view and interact with a large set of items. These typically accompanied by an object page, used to view details about an item. This combination is sometimes referred to as an LROP (List Report Object Page) app.
3. Analytical list page: Provides a page where users can access KPI information and visualizations of data alongside a list.
4. Worklist page: Provides a page where users can process a list of work items or processes.
5. Object page: Provides details about a single item. Users typically navigate to object pages from any of the above floorplans. Object pages can also be nested, allowing users to continue drilling down for further information.

SAP Fiori elements reduces the amount of time developers need to spend on UI development. In addition to accelerating app development, the use of SAP Fiori elements floorplans also creates a consistent user experience, allowing developers to scale development more efficiently throughout their organization.

The floorplans available in SAP Fiori elements are developed and maintained by SAP. Further updates and improvements to the SAP Fiori design system will be automatically reflected in the apps upon the next UI5 update. Developers do not have to manually implement improvements as SAP Fiori continues to evolve.

Yes. It is possible to add/modify the functionality of an SAP Fiori elements app, either through the use of UI5 flexibility features or custom code at extension points. For a quick look at what is possible, see this blog: Extending SAP Fiori elements Applications - What you need to know.

Before beginning you SAP Fiori elements project, we highly recommend that you research the available floorplans to ensure they meet your needs. The use of too many extensions can increase maintenance and development requirements, negating the benefits of development efficiency, UX consistency, and scalability of SAP Fiori elements.

SAP Fiori elements apps suit the majority of your use cases with little to no modification. In cases where heavy modification to the floorplans might be required, it may be better to create a custom application. The SAP UX Engineering team has created a guide to help you decide if SAP Fiori elements is right for you: When to Use SAP Fiori elements.

There are a variety of resources available if you would like to dive a little deeper with SAP Fiori elements. Here are a few to get you started:

• SAP Fiori elements topic page: This page on the SAP Community website will give you a quick overview of SAP Fiori elements, as well as provide links to other learning resources.
• Getting Started with SAP Fiori elements: This video series walks you through the different floorplans available in SAP Fiori elements (What they can be used for and how to create them), as well as the role OData plays in the app development process.
• SAP Fiori Development newsletter: Provides updates on the latest in SAP Fiori development, including SAP Fiori elements, SAP Fiori tools, UI5, and SAP Business Application Studio.
• Create a List Report Object Page App with SAP Fiori tools: Get hands-on experience building an SAP Fiori elements app with the all-new SAP Fiori tools.
• Developing and Extending SAP Fiori Elements Apps course has in-depth information about SAP Fiori elements and SAP Fiori tools. Learn the theory and put it into practice by building an app in the optional exercises. 

• Developing an SAP Fiori Elements App Based on a CAP OData V4 Service guides developers, architects and consultants through the process of building and enhancing an application based on SAP Fiori elements, using SAP Fiori tools and the SAP Cloud Application Programming Model(CAP).

• SAP TechEd 2021 hands-on exercise gives you step-by-step instructions to build an app using the latest innovations in the product, including the flexible programming model.