Optimization user interface Fiori apps

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

Enterprise software needs to adapt easily to rapidly changing environments. Customers need apps that can be deployed without long IT projects. Management organizations, on the other hand, want unambiguous software to reduce TCO. Do you think adapting the user interface of SAP Fiori apps (e.g. by adding, hiding or rearranging fields) is a complex process? That's not so bad these days!

UI Adaptation at Runtime (RTA) provides upgrade-safe and modification-free user interface (UI) changes that can be performed 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 adapt the user interface of Fiori apps to their specific needs. One can, for example:

  • Remove 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 movie that illustrates this functionality.

 
 

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

 
Adapt UI.poison
 

Reasons to use UI Adaptation

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

It enables modification-free user interface changes

User interface changes made with UI Adaption are not modifications. This means stability even after upgrades. This is because the original app remains unmodified and the changes are only applied at runtime. This is achieved because the changes are stored in separate layers for the different users.

It saves time and money

In the past, changing the user interface was a complex, time- and money-consuming process. With this feature, even users without technical knowledge can easily make changes to the user interface themselves.

Ease of use

Using UI Adaptation makes customizing the user interface of apps simple and intuitive. WYSIWYG (what you see is what you get) functions and tools are 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 maintained

This flexibility is not at the expense of performance. By caching the changes in the user interface, performance is guaranteed to keep your apps running smoothly.

Try UI Adaption yourself

You can experiment online with customizing 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.

 
 

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

  • Add new fields

  • Add new groups

  • Add sections to an object page

  • Renaming of fields and groups

  • Moving fields, groups and object page sections

  • Cutting and pasting fields and groups

  • Combining fields

  • Splitting of combined fields

  • Remove fields, groups and object page sections

  • Undo and reapply changes

How to activate UI Adaptation as a developer

To enable apps for UI Adaptation, supported controls must be used. Currently these controls include SmartForm or ObjectPage. Only these controls can be edited at runtime. They must also 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 static IDs from SAPUI5 and should not be changed to avoid inconsistencies or errors. Refer to 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, more or less options are available in Adaptation mode. The higher the version, the more options are available.

For questions or additional information on this subject you can contact recording with Sander van der Wijngaart.