Products and TechnologyGroupsDevelopersPartnersEventsHelp Center​Topic PagesExplore SAPProducts and TechnologyGroupsDevelopersPartnersEventsHelp Center​Topic PagesExplore SAP

SAP Fiori elements is a UI development library based on UI5. It provides a collection of building blocks that you can use to build SAP Fiori apps. Building blocks 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. Examples of building blocks, along with sample code, are in the SAP Fiori Development Portal.

You can combine building blocks into your own layouts or use pre-defined floorplans that we offer. Building blocks and 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.

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 building blocks and floorplans themselves continue to be maintained and enhanced by SAP, ensuring that they comply with the latest version of the SAP Fiori design system.

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:

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, using SAP Fiori elements building blocks and floorplans also creates a consistent user experience, allowing developers to scale development more efficiently throughout their organization.

SAP develops and maintains the building blocks and floorplans 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 your SAP Fiori elements project, we highly recommend that you research the available building blocks and 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 the building blocks do not meet your needs and/or you require heavy modification to the standard floorplans, 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:

Follow Us