Optimization user interface Fiori apps

More and more organizations are using SAP Fiori to unlock SAP functionality through user-friendly apps. Not only within SAP S/4HANA, but also for SAP ECC systems there are countless standard SAP Fiori apps available. Next to that, more and more SAP partners are developing SAP Fiori apps that can be installed as SAP Add-on. For example, externally developed Fiori apps are available for approving invoices, placing orders and booking goods receipts, even if the backend system is SAP ECC.

Business software must adapt easily to rapidly changing environments. Customers need apps that can be deployed without long running IT projects. Management organizations, on the other hand, want unambiguous software to lower the TCO. Do you think that customizing the user interface of SAP Fiori apps (for example by adding, hiding or rearranging fields) is a complex process? That is not so bad nowadays!

UI Adaptation at Runtime (RTA) offers upgrade-safe and modification-free user interface (UI) changes that can be implemented by different user groups such as end users, key users and developers.

What is UI Adaption at runtime?

With UI Adaptation at runtime (RTA), for example, key users can adjust the user interface of Fiori apps to their specific requirements. For example, you can:

  • Delete fields that are not needed;

  • Add new fields based on the OData service;

  • Rename UI elements such as fields or group titles;

  • Optimize the overview by changing the layout of the screen.

See below a YouTube video in which this functionality is illustrated.

 
 

Every user can adjust the user interface intuitively and without customization, simply while using the app. With UI Adaptation, the system administrator can make adjustments that are made active for the entire app. The changes then apply to all users. When an individual user personalizes an app, the adjustment only applies to this individual user. This is of course only possible if you are authorized to do so.

Adapt+UI.gif

Reasons to use UI Adaptation

There are four reasons why you want to use UI Adaptation:

It allows modification-free user interface changes

Changes to the user interface made with UI Adaption are not modifications. This means stability, even after upgrades. This is because the original app remains untouched and the changes are only applied at runtime. This is achieved by saving the changes for the different users in separate layers.

It saves time and money

In the past, changing the user interface was a complex, time and money-consuming process. This function also allows users without technical knowledge to easily make changes to the user interface itself.

Ease of use

The use of UI Adaptation makes customizing the user interface of apps simple and intuitive. There are WYSIWYG (what you see is what you get) functions and tools available in the context in which the user works. End users personalize object pages of their apps and key users customize apps for their teams. Developers can use a special editor in SAP Web IDE.

Performance is retained

This flexibility is not at the expense of performance. Caching changes to the user interface guarantees performance so that your apps continue to work smoothly.

Try UI Adaption yourself

You can experiment online with adjusting the Fiori user interface with SAP UI Adaptation via a SAP Cloud demo app. Open the SAPUI5 Demo Kit in Google Chrome, select DEMO APPS and choose the Runtime Adaptation tile. Then choose the icon in the upper left corner and then the Adapt UI button.

 
Activeren+UI+Adaption+at+Runtime+(RTA).jpg
 

This takes you to the Adapt UI editor mode and allows you to try the following options:

  • Adding new fields;

  • Adding new groups;

  • Adding sections to an object page;

  • Rename fields and groups;

  • Moving fields, groups, and object page sections;

  • Cut and paste fields and groups;

  • Combining fields;

  • Split combined fields;

  • Delete fields, groups and object page sections;

  • Undo and redo changes.

How do I activate UI Adaptation as a developer?

To enable apps for UI Adaptation, supported controls must be used. Currently these are for example the SmartForm or ObjectPage controls. Only these controls can be edited at run time. They also must have stable IDs. UI Adaption uses stable IDs to ensure that the changes made are retained and can be applied again, for example after the app has been updated. Stable IDs are based on SAPUI5 static IDs and should not be changed to prevent inconsistencies or errors. See the developer documentation for more information.

UI Adaptation at Runtime is available from UI add-on 2.0 SP00 and SAP NetWeaver AS for ABAP component SAP_UI 7.50 (see also SAP Note 2217489). Depending on the version of SAPUI5 on which the app is running, there are more or fewer options available in Adaptation mode. The higher the version, the more options are available.

Thanks to Sander van der Wijngaart for writing this article.

For questions or additional information about this subject, please contact Wouter Van Peteghem