Best Practices for Extending SAP Fiori Elements Apps with Custom Controls and Logic

[stefaniehager]

SAP Fiori elements enables very efficient development of consistent SAP Fiori apps through a template- and metadata-driven approach. SAP Fiori elements apps can also be extended with SAPUI5 controls and freestyle coding to give developers and designers additional flexibility. For certain use cases this is a crucial capability, but we also see many cases where extensions are created unnecessarily. This blog addresses a common request for best practices around the creation of extensions and what you can do to avoid creating unnecessary extensions. Note that, in this blog, the term ‘extension’ refers to extending SAP Fiori elements apps with SAPUI5 controls and freestyle code and not to extending standard SAP apps.

Before you read on, please don’t forget that the more you can stick to the standard SAP Fiori elements floorplans, the greater your savings in development and maintenance costs. We recommend that you avoid using an extension if you can deliver the same functionality with SAP Fiori elements. While extensions are very useful in some scenarios, they always come with a price tag - in terms of both development and maintenance effort.

Design Aspects

Before designing your app, decide if you want to try building it based on one of our five floorplans. Keep in mind that there is the great benefit of UX consistency by using SAP Fiori elements floorplans – in addition to significant savings in development time. If you find that you can stay pretty close to our templates (and for SAP S/4HANA apps, we find that this is the case in almost 80% of our use cases), please familiarize yourself with the SAP Fiori elements section of the SAP Fiori design guideline.

Note that right now, in the design guidelines, few articles highlight how SAP Fiori elements implements SAP Fiori concepts. In the next update of the design guidelines, we plan to introduce a section dedicated to SAP Fiori elements that will allow designers to quickly understand the capabilities available in our templates.

If you find that a control you want to use is not supported by our standard, check if there is a supported one that can serve the same purpose. For example, instead of introducing a switch button in a table, can you use the checkbox? You should always think about benefit vs cost

Development Aspects

The easiest way to find out if a feature is supported by SAP Fiori elements is the Feature Map. It provides an overview of the features available for each SAP Fiori elements floorplan and the ability to search, filter, and sort content by floorplan and by feature. It also contains a section listing the available documentation on extensions.

I also recommend you check this great blog by my colleague Vinod, where he explains the different kinds of extensions supported by the SAP Fiori elements framework and when to use what.

If you think that your use case is a common one and thus one that SAP Fiori elements could support with standard functionality, we would be very interested in receiving your feedback! You can write a comment in the blog with your suggestions or email me.

Thanks to feedback we have already received, we now support many features that previously would have required an extension. For example, the support of multiselect for actions (function imports) with and without parameters, inline delete, and the ability to show text and ID in object pages, in display as well as edit mode.

The rest of this blog provides some examples which we have observed. We start with examples where extensions were needed, then move on to extensions have led to an inconsistent user experience, and end with ones where extensions were not needed.

Examples of where extensions were needed.

The needed functionality could NOT have been built with standard SAP Fiori elements

This is a collection of use cases / examples where an extension with SAPUI5 freestyle code was required.

1. Graphical UI Control such as process flow or map
   If you want to include a process flow, a gantt chart or geo map control you need an extension. This can be either a custom section or a custom page.
   


2. Dynamic hiding of table columns in list reports
   While table columns (as well as data fields in facets or entire sections) can be hidden dynamically in object pages (see documentation), this is currently not supported in list reports


3. Custom Popover / Quick view
   Depending on the content required in the Popover (we call it a Quick view), an extension can be required. Check here to find out what we support in the standard beyond the most common use case of a contact quick view. You need an extension if, for example:
   
   
   
   1. A field does not support smart link
      
   
   
   2. A table or chart is needed in the popover
      
   
   
   
   


4. Custom actions in table
   You can use extension points to add custom actions to the list report and the object page. More details on custom actions can be found here.
   
   
   
   1. Use of actions the table toolbar to display additional information
      
   
   
   2. Inline actions in table rows
      
   
   
   
   

Examples of extensions that lead to inconsistent user experience (UX)

We often observe that extensions are used to bring in UI controls that are not supported by SAP Fiori elements in the required context. We strongly recommend avoiding this, because it introduces an inconsistency in user experience compared to our standard SAP Fiori apps.

1. Using different UI controls for binary decisions than SAP Fiori elements does
   For example, using switch buttons instead of checkboxes in tables. This is not consistent with the SAP Fiori UX guideline.
   


2. Highlighting fields based on criticality
   In this example, a custom column was used to show an amount of items together with the status. A UX consistent implementation would not have required an extension. How to implement the highlighting of fields based on criticality is described here.
   
   

Examples of unnecessary extensions

This is a collection of use cases / examples where extensions have been used unnecessarily. The same functionality can be achieved using standard SAP Fiori elements features.

1. Micro chart as column in a list report table
   In this example a column micro chart was added in a list report table column via an extension
   
   But this is better done leveraging standard SAP Fiori elements functionality. Details can be found in the SAP Fiori elements documentation.Alternatively you can find the documentation using the feature map:
   
   
   
   1. Search for Micro chart
   
   
   2. In “Micro chart/Smart micro chart”row click on “Micro Chart Facet”
   
   
   3. All supported micro charts are listed, you can select “Column Micro Chart” to see how is can be enabled in SAP Fiori elements
   
   
   
   


2. Adding Multiple Fields to One Column in Responsive Tables
   You can add multiple IDs, descriptions, and action buttons to one column in a responsive table by using UI.FieldGroup in the annotations. Details are mentioned in the documentation
   


3. Show ID + Description together in value help input fields
   You can configure object pages to show both text and ID for value help input fields in edit and display modes. Details are mentioned in the documentation
   


4. Semantic date range in value help of selection fields
   You can use semantic date ranges, such as Today or Last Week, on the filter bar of list report and analytical list report applications. A large variety of semantic date ranges is supported in the standard. Only if you find that your specific use case is not covered, should you leverage an extension. Check the documentation for more details.
   
   


5. Default value for a selection field
   You can specify a default value for a selection field or find it via the feature map:
   
   
   
   1. Search for “Filter Bar”
   
   
   2. In “Filter Bar” row, click on “Adapting the Filter Bar”
   
   
   3. You can refer to Setting Default Filter Value to see how this can be enabled 
   
   
   
   

Special thanks to Suneet Agarwal, Stefan Engelhardt, and Vinod S Nair for their support in creating this blog!

For the SAP Fiori element product team, stefanie.runde