Building SAP Fiori apps at scale using SAP Fiori elements and SAP Fiori tools
Improve developer productivity while delivering a consistent user experience in your enterprise-scale apps
To remain agile and respond to rapid changes in market conditions, every organization will need the ability to build apps quickly. The capacity to scale in a cost-effective way requires a new way of thinking about app development. SAP Fiori elements offers development teams a way to create intuitive apps with a consistent user experience by leveraging a proven framework that relies on metadata, rather than traditional coding methods, to generate the user interface.
The challenges of developing enterprise software
Enterprise software only has value if people use it as the system of record. Driving adoption is much easier if the software is easy to use with a quick learning curve. A consistent user experience plays a major role in determining usability.
In addition to increasing adoption, UX consistency improves business user productivity, decreases training time, improves data quality, and enhances user satisfaction. UX consistency includes the fonts and colors, the layout of information on the screen, and all the interaction patterns. Even with a robust UX design specification, it can be hard to align large groups of developers to follow the same UX standards. SAP had this same issue several years ago; this is why we created SAP Fiori elements.
When building enterprise applications, developers typically focus on either the back end or front end.
Back end
The foundation of any enterprise app is the back end. Apps needs a way to read, edit, create, or delete entries in some database. This is also where the business logic (algorithms and business rules) of the app resides. SAP has invested heavily in this area for all lines of business across many industries.
SAP Fiori elements apps rely on OData as the standard to access data in the back-end ERP system, which is typically SAP S/4HANA, but does not have to be. To take full advantage of the power of SAP’s back ends, we recommend using either the ABAP RESTful Application Programming Model (RAP) or the Cloud Application Programming Model (CAP).
Front end / User interface
This is how users interact with the app. To many people, the app is the user interface (UI). Creating a good UI requires design resources and specialized skills in writing UI code. Users of enterprise apps expect functionality such as accessibility, internationalization, and mobile compatibility, in addition to high performance and strong security. SAP Fiori elements generates the UI for you based on your data structures and metadata, so you can focus on the business logic.
Quick links
Services Portfolio
Contact Us
Head office address – Bangalore:
#48, 1st & 2nd Floor, Kudlu Gate Signal, Hosur Road,
Bangalore – 560068, Karnataka, India.
Phone – +91 80 41116927
Call for help :
Sales : +91 80 49549020
Operations : +91 80 49549020
Mail for information :
How SAP Fiori elements accelerates development and enforces UX consistency
What is SAP Fiori elements?
To simplify the process of creating hundreds (now thousands) of SAP Fiori apps with a consistent user experience (UX), SAP needed a framework that makes it easy to scale development. SAP Fiori elements is a UI library that provides several standard floorplans that significantly boost developer productivity by reducing the amount of user interface (UI) code they need to write and maintain.
You choose an SAP Fiori elements floorplan based on the requirements of your app. While the floorplan determines the overall layout of your app, metadata allows you to fine-tune what information is displayed within the floorplan. You use metadata to describe the semantics, so you can create SAP Fiori apps with minimal coding. This metadata-driven approach to application development boosts your development efficiency since you focus only on the business logic. SAP also maintains this UI layer, so as the SAP Fiori design evolves, your SAP Fiori elements apps can inherit these updates. SAP Fiori elements uses SAPUI5 technology as its foundation.
SAPUI5 is a modern Web framework that makes it easy to create cross-platform SAP Fiori apps with a single code line. Using SAPUI5 for your Web apps:
- Gives you the SAP Fiori user experience today and as the design system evolves
- Includes built-in support for SAP’s enterprise-grade product standards such as security, integration, and accessibility
- Allows you to write your apps once and use them on desktop as well as mobile devices
Business benefits
SAP Fiori elements templates reduce the amount of front-end development required to create your application. This allows you to focus on the back-end services while leveraging our proven UI concepts. SAP Fiori elements includes simple operations, such as navigation between pages or between apps, along with searching, sorting, and filtering capabilities in lists. It also contains more complex functionality such as draft and variant management.
Getting all your developers aligned on design specifications is difficult without a robust set of standards. The SAP Fiori elements floorplans enforce UX consistency across custom and standard SAP apps, which reduces the time spent on design reviews to ensure that your apps follow the guidelines you have set.
UX consistency drives user adoption, since end users feel confident that they will be able to use a new app if it is similar to apps they’re already using. UX consistency covers:
- Look and feel: color, fonts, etc.
- Layout: how the different controls are positioned on the screen. End users expect to find similar functions at the same position on the screen (e.g. the ribbon with Microsoft Office) so that they won’t have to look for it.
- Behaviors: consistency is not only about visual characteristics, but also how people interact with the app. For example, end users expect the same confirmation dialog when cancelling changes, with the same message and the same buttons. They don’t want to read the message each time to understand which button to click (this would lead to lots of errors). They have similar expectations for filtering capabilities on lists.
SAP Fiori elements includes all these dimensions as part of its floorplans.
Since the SAP Fiori elements floorplans are developed and maintained by SAP, you get the same user experience we ship with our standard SAP Fiori apps. It also means that your development investment is protected going forward. SAP handles the UI updates, so your apps always comply with the latest SAP Fiori design standards.
Furthermore, apps that are built using SAP Fiori elements are automatically enterprise-grade apps. Our framework ensures high quality, stable, optimized UI code. It also provides many features out of the box that are expected in the enterprise space but are typically expensive to implement, for example: accessibility, internationalization, and mobile compatibility.
Five floorplans cover most business scenarios
Most scenarios in the enterprise involve some combination of providing an overview of business data, various types of lists of data, and managing the data. We developed the SAP Fiori elements floorplans to cover the majority of these use cases. There are five distinct floorplans that SAP Fiori elements provides.
The overview page provides an overview of a certain business area or role. This overview is the starting point for a business process and allows the user to navigate to other apps.
The list report allows the user to filter and sort a large set of items and drill down for more information on a single item.
The object page contains details about a business object. This might consist of text, charts, graphs, images, or other forms of information.
The analytical list page is a specialized form of list report. It has additional analytics capabilities to visualize the data and allows you to filter using interactive charts.
The worklist page is a simplified version of list report, optimized for processing a list of tasks.
These five floorplans cover most business scenarios that customers encounter with SAP. In fact, SAP uses these SAP Fiori elements floorplans to create roughly 80% of new SAP S/4HANA apps. If these floorplans do not meet your needs, we have other options, such as SAPUI5 freestyle, that allow you to extend the functionality of your app or to modify how objects appear on the screen.
OData connects the app to the database
SAP Fiori elements uses OData to connect to a data source. OData is an industry-standard protocol that sits on top of HTTP and defines how apps exchange data with the back end. Instead of learning new APIs to access data specific to each application, OData provides a common way to query, read, and update data.
OData allows you to define how to filter and extract the data your app needs. OData metadata is a machine-readable description of the data model of the APIs. SAP Fiori elements connects with OData out of the box and takes advantage of its metadata.
The SAP Fiori elements framework supports both OData Version 2 and OData Version 4. OData V4 has an ISO certification, which is one of several reasons why some companies prefer to work with OData V4. For end-users, there is no visual difference between an app built with SAP Fiori elements floorplans for OData V2 or V4. We support both versions of the protocol, so apps will look and feel the same, whether they are based on OData V2 or V4.
There are currently some functionality gaps between the two versions, since we have had OData V2 support for several years. We plan to narrow the feature gap over time. Right now, the OData V4 stack supports list report / object page apps. You can add certain OData V4 cards to overview pages. The Flexible Programming Model in V4 makes it easier to build and maintain extensions.
Annotations adjust the UI to your business requirements
The OData protocol allows you to annotate metadata, which provides information that describes exactly how your app will interpret the data. SAP Fiori elements relies on metadata annotations rather than traditional coding to define the screen layout. For example:
- You can provide semantics that specify two specific fields should always be displayed together, such as an amount with its respective currency.
- An annotation can specify that a specific string is not just a collection of characters, but an email address. SAP Fiori elements will render this as a clickable mailto: link.
- Annotations can also define behavior, such as whether a business object is editable or not. They can also give consumption hints, like if a field is clickable or not.
- Which tooling you prefer:
- Both XML and CAP CDS annotations are supported by SAP Fiori tools. SAP Fiori tools makes it easy and convenient to define UI semantics.
- ABAP CDS annotations for UI semantics are maintained in the ABAP Development Tools (ADT), together with annotations for other domains such as search or analytics.
- Where you want to manage the lifecycle of your app:
- XML annotations follow the lifecycle of your app (local project).
- CDS annotations follow the lifecycle of your OData service.
- Whether you need the latest annotation features:
- Due to different release cycles, some new annotations might be available later in ABAP CDS.
- For on-premise SAP systems, upgrade cycles can further impact the availability of new features for ABAP CDS annotations.
Extend SAP Fiori elements applications with SAPUI5
Extensions allow you to go beyond what SAP Fiori elements provides out of the box. They can be very useful if you require certain features that SAP Fiori elements does not offer, for example, including process diagrams or maps. The content and behavior of a “pure” SAP Fiori elements application are completely controlled by annotations. Extensions allow a developer to add specific UI controls or behaviors using the standard UI5 programming model based on HTML5 and JavaScript.
This flexibility comes with a cost. It takes significantly more development effort to develop and maintain extension code than to use only annotations. An app with extensions will have some parts that are controlled by annotations and leverage the standard controls, layout, and behaviors from SAP Fiori elements. Other parts will be controlled by custom JavaScript code and can leverage the full-fledged UI5 programming model to have more flexibility.
Using custom code in your SAP Fiori elements apps means your extensions may not be consistent with the SAP Fiori design guidelines. You will also have to make sure your extensions remain aligned with the evolving SAP Fiori design specification, whereas the parts generated by annotations will automatically be updated if the standard changes.
Speeding development with SAP Fiori tools
As SAP Fiori elements usage grew, we found that we needed a way to make SAP Fiori elements app development easier, so developers did not need to memorize the many annotations that can fine-tune the layout and behavior of the app. This was the trigger to create SAP Fiori tools. SAP Fiori tools is a set of extensions for SAP Business Application Studio and Visual Studio Code that provide many capabilities to increase the efficiency of developing SAP Fiori elements applications. SAP Fiori tools simplifies the end-to-end app development process with wizards, step-by-step instructions, modeling tools, and code completion.
For example, SAP Fiori tools generates the structure of the app so it is always the same, simplifying development and maintenance, especially with large development teams. There are several ways that SAP Fiori tools reduces the amount of coding. It can complete annotations for you using an XML annotation language server or it can inject code into the app, based on the information you enter into a wizard. The result is that both the effort and the skill level required to create annotations is drastically reduced.
Here is a short summary of the SAP Fiori tools extensions:
SAP Fiori tools extension
What it does
Application generator
The application generator creates all your project files.
- Uses a wizard-style approach
- Combines data with a floorplan
- Generates the app with a few clicks
- Ensures consistent app structure
- Simplifies maintenance
Application modeler
The application modeler manages the structure of your app.
- Visualizes and lets you change the page structure of your app
- Configures individual pages using easy-to-understand JSON files
- Enables adding new pages to the application structure
- Previews your application with mock or live data
Service modeler
The service modeler visualizes OData services and their annotations.
- Visualizes entities, relations, properties, and annotations for the OData services that provide data to your apps
- Displays back-end and local annotations
- Copies back-end annotations to a local file so you can modify
- Allows you to prioritize local annotation files for your app
Guided development
Guided development gives instant help and code snippets.
- Provides step-by-step development instructions
- Generates code snippets in-line, based on your parameters
- Inserts code directly into the right place in your application
XML annotation language server
The XML annotation language server helps manage annotations.
- Offers code completion, micro-snippets, and diagnostics
- Delivers a language server protocol for EDMX annotations
- Validates annotation files against OData definitions
- Reduces effort and skill level required for creating annotations
- Improves code consistency
When to use SAP Fiori elements
There are many ways to develop Web apps that connect to SAP data sources. Doing so without SAP Fiori elements is referred to as “freestyle” development. With SAPUI5 freestyle development, you have complete flexibility about how your app will look and perform.
Using SAPUI5, developers can specify the layout, flow, menu structure, colors, fonts, interaction patterns, etc. – anything and everything about the app. Of course, there are tradeoffs between the flexibility you gain and the extra time it takes to develop custom apps. For a custom app, you must write the UI code for each screen.
The decision on whether to use SAP Fiori elements or SAPUI5 freestyle depends on your business needs. How do you decide when to use which? The quick answer is that with SAP Fiori elements you are exchanging flexibility for efficiency.
If you are in a situation where your needs are mostly covered by the available SAP floorplans, you can use SAP Fiori elements to build your applications efficiently. You are responsible for the annotations, but the UI development, including the UI logic, is already handled by SAP. This streamlined process reduces the time and cost of development and maintenance.
If you are in a scenario that is not covered by these floorplans, or extending them would be too time consuming, SAPUI5 freestyle development is likely to be a better choice for you. While you will be fully responsible for the UI development, you have complete flexibility with your designs. This generally leads to higher total cost of development and maintenance.
We're ready to share our advice & experience in SAP Enterprise Solutions
Read the insights of our 12 years of the successful business journey, to know how we helped our customers in their IT achieving their goals.
