Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Product and Topic Expert
Product and Topic Expert
Anyone involved in building SAP applications, including designers, product managers, product owners, and developers, should know Fiori elements capabilities, so they know when it’s appropriate to use it in their projects. SAP Fiori elements creates standard SAP Fiori applications, based on several basic page types, which are templates or floorplans for common SAP scenarios.

This blog will focus on the value of Fiori elements to user interface designers, product managers, and developers. Regardless of your role, SAP Fiori elements ensures design consistency and compliance with the latest design guidelines, while reducing the amount of front-end development needed to build SAP Fiori apps.

What is SAP Fiori elements?

SAP Fiori elements is a library of several common page types that gives you a head start on developing applications that connect to data in SAP back-end systems. SAP Fiori elements is built on top of SAPUI5, SAP’s HTML5 development toolkit. The main idea behind SAP Fiori elements is to generate an SAP Fiori app at runtime from an existing OData service (standard way to access data) with additional metadata (annotations that define attributes and relationships of the data).


Overview page created with Fiori elements.


Applications developed with SAP Fiori elements follow pre-defined patterns for the page types that are used. These patterns cover most Fiori application scenarios. For example, around 75% of all new Fiori apps in SAP S/4HANA follow these patterns and have been developed using Fiori elements.

Besides the content of the pages, SAP Fiori elements also takes care of the logic and the behavior of the application. For example, you don’t need to write UI code to manage navigation between pages or applications, to apply filters to the content of a table, or to edit and save objects. This means that standard apps require very little UI development, and sometimes no additional UI code at all.

To summarize:

  • SAP Fiori elements is a UI development library based on SAPUI5

  • App user interface is generated at runtime from metadata

  • Low code required for standard apps.


Designers - create beautiful apps, but don’t worry about interaction patterns

Designers play a role early in the application development process. A good design often determines whether people will use the app or choose an alternate approach to get their work done. Creating a design that balances aesthetics, functionality, and simplicity will result in software that satisfies user needs, while being fast and easy to develop, test, and deploy.

If designers know when to specify standard designs that follow the SAP Fiori elements page types, they can focus their efforts on higher value activities such as working on custom apps that will help their organizations differentiate their solutions.

While your first instinct might be to innovate and create a beautiful, custom design to delight your colleagues, using Fiori elements to deliver a standard layout for common page types can significantly increase the speed of development. You still can exercise some creative control over the final look and functionality of the app, but one of SAP Fiori element’s strengths lies in delivering premade and consistently designed applications.

SAP Fiori elements can make you more productive as a designer by standardizing certain common layouts and page formats. This will let you focus on the touches that matter, while also giving the page some design flair.


Product managers - accelerate time to value by following standard floorplans

Product managers and product owners often write the specifications for enterprise applications. They understand the business requirements and set priorities for developing the functionality the app needs to deliver. Knowing the capabilities of SAP Fiori elements will allow you to recommend standard apps when possible, which will minimize both development time and cost.

Your colleagues count on you to deliver applications that meet their needs and help them solve a specific business problem. Therefore, delivering the required functionality on-time and on-budget is critical.

If the business scenario permits, using pre-defined templates, whenever possible, will help you deliver apps more quickly. SAP Fiori elements significantly reduces app development time if you can follow one of the several page types included with SAP Fiori elements.


Developers - focus on the business logic and let Fiori elements generate the user interface code

Developers are the main beneficiaries of SAP Fiori elements, as it is a development tool. Using standard page types significantly reduces the amount of coding, especially for writing the user interface. Developers need to know the capabilities of the tool, so they can determine the best way to write apps that will be easy to create and maintain, even as design specifications change.

Agile development relies on creating shippable versions that you validate with users and improve with each release. Within the development timeframe, the more iterations you can complete, the more feedback you will receive and the more likely your users will use and appreciate the app you built for them.

SAP Fiori elements generates the app at runtime, based on the OData service and the metadata you use to create annotations. Using SAP Fiori elements means you can deliver a great user experience without the need to develop the user interface, since SAP Fiori elements generates it for you. If you can use one of the supported page types in Fiori elements, you will save lots of time in writing UI code.


SAP Fiori elements reduces app development and maintenance costs

Using SAP Fiori elements to build apps that rely on SAP data can save you time and money on both development and maintenance costs. SAP Fiori elements apps also ensure that business users have a consistent experience across the SAP applications they use. Consistency plays a major role in how satisfied people are with the user experience (UX).

Understanding what SAP Fiori elements does (and can’t do) will allow you to choose the right scenario to gain the advantages of using SAP Fiori elements to accelerate development.

Want to learn more? Watch the getting started with SAP Fiori elements video series.

In my next blog post, I’ll discuss some factors to consider when deciding whether to use SAP Fiori elements or build a freestyle SAPUI5 app.

Download the complete "When to use SAP Fiori elements" guide.

For SAP UX Engineering, peter.spielvogel.