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
This blog picks up where the previous posts left off, covering how and when to extend SAP Fiori elements apps, now that you know when to use SAP Fiori elements to reduce development time, whether you are a developer, designer, or product manager. Extensions do exactly what you would expect – extend SAP Fiori apps to add functionality or visual enhancements that are not available from any of the standard SAP Fiori elements page types. Extensions provide more flexibility when developing Fiori elements applications. You’re not limited to annotations but have access to all the functionalities and controls provided by SAPUI5.

This flexibility comes with a cost, however. It takes significantly more development effort to develop and maintain extension code than to just leverage annotations. The resulting UX may not be consistent and compliant to Fiori guidelines. You will also have to make sure the extensions stay aligned with the Fiori guidelines over time, whereas the parts generated from annotation will automatically be updated.

Therefore, use app extensions with caution and only if you cannot produce the required behavior by other means, such as manifest settings or annotations. Your role will determine what you need to know about using extensions (or not) when building apps with SAP Fiori elements.

Designers: Get familiar with Fiori elements and the typologies of design you can achieve with them. Try to design your apps within the Fiori elements boundaries and consider extensions only when necessary as there’s an associated development and maintenance cost.

Product managers: Fiori elements cover many use cases for Fiori applications. SAP Fiori is a paradigm shift away from big and complex applications towards light-weight apps tailored to the users’ tasks. Keep your apps simple and focused on a specific use case, as Fiori elements facilitates the development of such simple apps.

Developers: Always favor standard Fiori elements functionalities based on OData annotations. You will be more productive, and the maintenance effort will be significantly reduced. Consider using extensions only when necessary, and to a reasonable extent. For example, we recommend you use no more than 10 extensions in an app.


Annotations and extensions

The content and interactions of each page is supported by SAP Fiori elements through annotations. You can support additional controls and behaviors using extensions, but these should be used carefully. Extensions allow you to go beyond what Fiori elements provides out of the box. The content and behavior of a “pure” Fiori elements application are completely controlled by annotations, and extensions allow a developer to add specific UI controls or behaviors using the standard UI5 programming model based on HTML5 and JavaScript.

You end up with an app where some parts are controlled by annotations and leverage the standard controls, layout and behaviors from Fiori elements, and where other parts are controlled by custom JavaScript code and can leverage the full-fledged UI5 programming model to have more flexibility. How to find the balance between these 2 models will be discussed below.

Extension points

Fiori elements apps can be extended only in certain ways and in specific areas, called extension points.

In a list report, worklist or analytical list page, you can create custom columns in the table (i.e. use other UI controls to display specific data in a column), create custom filters (i.e. use other filtering mechanisms and interactions to filter the table content) and create custom actions.

In an object page, you can create custom columns in a table section, display custom fields in forms, display custom controls in the header (header facets extensions), create custom actions, and create custom sections (i.e. display something else than a table, a form, a chart or a contact list in a section).

In an overview page, you can create custom filters and define specific filtering behavior for some cards, create custom actions, create custom cards to display custom information relevant to your overview page, and modify how navigation is managed when clicking on card content.

Only if the target design cannot be achieved with extensions, should you go for freestyle SAPUI5.

Figure: If you add too many extensions to a Fiori elements app, it could end up taking more time than developing a freestyle app.


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


For SAP UX Engineering, peter.spielvogel.