Rapid app development is one of the most attractive benefits of SAP Fiori elements for customers. But what do we really mean by this? Imagine you’re an ABAP developer with little experience coding JavaScript. If you’re developing freestyle, building an app from scratch can be time-consuming. Consider, for example, the design of a 
By now, you’ve surely heard of SAP Fiori elements. It’s an SAP Fiori app development tool based on SAPUI5 that provides users with pre-made user interfaces (UIs) for the most common SAP Fiori application scenarios. As part of a suite of tools created to deliver the SAP Fiori user experience (UX), SAP Fiori elements can be used for all backend systems that offer OData services — such as SAP S4/HANA and SAP Business Suite powered by SAP HANA. All you need to do is plug in your backend services and you’re ready to start building an app end-to-end with minimal coding.
SAP Fiori elements has been around since 2015, originally released under the name smart templates. Over the last four years of talking and working closely with users, we’ve noticed a few consistently-mentioned benefits. Here are our top three reasons why SAP Fiori elements is a smart choice for SAP Fiori app development:
1. SAP Fiori elements speeds up development: Build apps in hours, not days or weeks
All of these functions are crucial to delivering a good user experience and require you to consider both the SAPUI5 technical guidelines and the SAP Fiori design guidelines to deliver the standard SAP UX. With SAP Fiori elements,you can fulfill all of these guidelines and have an app up and running in a matter of hours. This is because SAP Fiori elements handles UI development, connecting the predefined and SAP Fiori design-compliant page types to your backend data in the form of OData (Open Data Protocol) services. As a developer, all you need to do is expose the required business and metadata.
For an example of how simple it is to develop with SAP Fiori elements, take a look at the list report page shown below. The developer selected the list report page type, exposed the business data that should be displayed, and then specified the filters, actions and columns that should be available to the end-user with OData annotations. The layout of the app, as well as its behavior, were automatically defined by SAP Fiori elements.
SAP Fiori elements automatically defines the layout and behavior of SAP Fiori apps using a variety of available page types. Developers connect the required business data and configure how it should be displayed. For example: as a column in a list.
The plug and play nature of SAP Fiori elements is especially beneficial for providing more technically complicated features, such as draft handling for end-users or a flexible column layout (used to display several different page types on the same screen). You could spend time developing this functionality freestyle or you could configure an app with SAP Fiori elements and free up time for innovation elsewhere.
2. SAP Fiori elements provides scalable and centrally-managed app maintenance
As an example, let’s say that you’ve built your app or – even better – a set of apps (by simply reusing the common features provided by the SAP Fiori elements page types) and then your users request some sort of change. When you’re developing freestyle apps, changes such as bug fixes or even simple stylistic changes can be time consuming, as Stefan, lead development architect for SAP Fiori elements explains:
“Let’s say one of your stakeholders decides, after a user feedback round, to implement a flexible column layout. When you’re developing freestyle, you’ll likely spend an average of 5 days per app to make that improvement. With a set of 30 apps, you’re soon up to 150 person-days. The good news is that using SAP Fiori elements reduces your time to mere minutes by allowing you to centrally apply improvements, allowing you to get those changes done across apps just before you go off to lunch.” That’s the magic of using a scalable app development framework: it significantly reduces the time you need to spend on app maintenance by providing a centrally-managed user experience for developers.
3. SAP Fiori elements ensures UX and design consistency
Should you use emphasized or semantic buttons? How do you structure a list report? To deliver a good user experience, it’s crucial that you stay up-to-date on the latest coding and design standards.
The standardized page types provided by SAP Fiori elements are based on proven UI concepts and have been thoroughly researched and developed by our leading UX and UI designers at SAP. SAP Fiori elements was designed to ensure that different applications provide a similar experience across the board, defining consistent locations, forms, and functions for controls and providing universal screen styling.
It’s also easy to keep apps created with SAP Fiori elements up-to-date, as they are automatically adapted to the most recent design guidelines. This means that you can trust the design decisions that are predefined for each page type and focus on executing the business logic, integrating the backend services, and making final touches. This makes SAP Fiori elements a cost-effective way to improve the design consistency and overall user experience of your SAP applications.
Determining if SAP Fiori elements is a good fit
When it comes to deciding if SAP Fiori elements is a good fit for your development scenario, there are a few factors that should be considered:
Onboarding: Like any new development environment, SAP Fiori elements can take some time to get used to. “If you’re coming from the ABAP world, you’ll see it’s not your usual coding framework,” says Stefan Engelhardt, lead development architect for SAP Fiori Elements. “With SAP Fiori elements, you essentially tell the program in an abstract way what you’d like to have and let the framework build it for you.” To help you along in this new development environment, SAP Fiori elements uses the SAP Web IDE wizard for app creation, with a plug-in available for overview pages.
Customization and Extensibility: SAP Fiori elements can be further customized or extended. You always have the option to personalize and customize your app with some additional coding. For example, if you want to add new actions or filters. The same is true for building extensions, which are also available and documented in addition to the standard capabilities of SAP Fiori elements. These do require a little bit of extra effort on behalf of the developer, but allow you to deliver the additional functionality you need while ensuring that you have a consistently-designed app.
Coverage: SAP Fiori elements covers around 80% of the most common use cases for application development, with support for the following page types:
- List reports: for displaying large sets of information
- Object pages: for displaying detailed information about a single item
- Overview pages: for gaining a comprehensive look at a business scenario
- Analytical list pages: for providing insights and visualization to business data
- Worklists: for processing items
If your scenario is not covered by these page types or your desired functionality cannot easily be added through extensions, freestyle development may be a better option. In most cases, however, SAP Fiori elements streamlines SAP Fiori app development and allows you to focus on the business logic and meeting your users’ needs.
Try it out today to boost your enterprise readiness
Scaling applications across your organization can be expensive and time-consuming. SAP Fiori elements enables you to scale your app creation across your organization in a fast, convenient, centrally-managed and expertly-designed way. If you are ready to get started, there are many resources available to help you. We recommend taking a look at the Introduction to SAP Fiori Elements page on the SAP Fiori design guidelines site for an overview of the topics discussed in this article, as well as the official Technical Documentation for an in-depth look at the tool.
For a quick onboarding, check out the SAP Fiori elements video series.
You can also find an up-to-date overview of all the resources available on the SAP Fiori elements Community Wiki.
- SAP Managed Tags:
