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 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.

In addition to floorplans, the flexible programming model within SAP Fiori elements also provides building blocks, which are reusable artifacts that are consistently orchestrated by the framework, so you automatically benefit from SAP Fiori compliance and standard application behavior like draft handling and side effects.

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 Cloud and SAP S/4HANA. In fact, SAP uses SAP Fiori elements to create approximately 80% of the apps for SAP S/4HANA Cloud. The floorplans and building blocks 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.

If one of the standard floorplans does not meet your exact needs, you can create your own using building blocks. Using building blocks gives you the advantages of SAP Fiori elements with some of the flexibility of freestyle SAPUI5. Using building blocks, similar to using floorplans, reduces the development and maintenance costs of developing applications. The building blocks that SAP provides include:

• Field
• Form
• Form Element
• Table
• Filter Bar
• Filter Field
• Micro Chart
• Chart
• Flexible Column Layout Actions
• "Share" Functionality
• Paginators
• Tree Tables
• Variant Management
• Rich Text Editor

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

SAP develops and maintains the floorplans and building blocks in SAP Fiori elements. 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 building blocks or 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 and building blocks 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 you require heavy modification to the floorplans and the building blocks do not meet your needs, 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).

• TechEd 2023 hands-on session: Boost Your Productivity In Developing SAPUI5 apps With SAP Fiori Tools