Key User Adaptation for SAPUI5 Applications - Introduction

Beginner

10 min.

SAPUI5, Beginner, SAP Fiori, Tutorial

Adapt the user interface of an SAPUI5 app for other users with the key user adaptation feature of SAPUI5 flexibility.

You will learn

How to change the UI of an SAPUI5 Fiori app.
How to activate a new app version with your changes.
How to restore the original app.

Vitor SeifertJune 23, 2025

Created by

December 10, 2024

Contributors

Different users work with SAPUI5 applications differently - e.g. depending on which role they have. Ideally, an end user should only see what is relevant for their work in the most intuitive way possible. Since this can greatly vary for each business, key users can tailor an app according to different needs. They know what the end users need from the application but don’t necessarily have a technical background. With key user adaptation, they can change the user interface of SAPUI5 Fiori apps directly in the Fiori launchpad intuitively and without having to write new code. In this tutorial you will get to try out key user adaptation in a demo app.

Step 1
Go to the SAPUI5 Demo Kit, and open the Key User Adaptation demo app under SAPUI5 Flexibility Demo Apps.

Go to the user actions menu of the app (in this demo app you are the Default User).

Choose Adapt UI. In real apps, only key users with specific authorization see this option.

Well done! Your app is now ready to be adapted. Make sure that Original App is selected on the top left (in the toolbar) - if you never made any adaptations to this app, this will be the default case.

On real SAPUI5 applications, this flow is the same - but to enable Adapt UI some conditions need to be fulfilled. Please follow this link to find the right documentation for your platform.

In the SAP Fiori launchpad, where do you have to look for the Adapt UI option?
There is no such option.
It's in the Settings menu.
The location always changes.
It's in the user actions menu.
Step 2
Right-click on a field.

Select Rename

Enter the new text and press OK
Step 3
You can easily move fields by using drag and drop. Move the field Company Name to the end of the group as shown below.

Many types of controls can be moved using drag & drop (the mouse cursor changes when you hover over them).

You can also move controls using Cut and Paste on the context menu.
Step 4
Press the Activate New Version button in the toolbar.

Some systems do not support versioning. In this case, just press Save, and exit key user adaptation.

Enter a name for your version, e.g. “My First Version” and press Confirm.

If you just want to save your changes without making them visible to other users yet, simply press Save on the toolbar. The changes will then be saved to the Draft.

Now press the Exit button in the toolbar to leave key user adaptation.

Congratulations! You just made your first key user adaptations and activated your first version. In a real system, all end users would see your version of the app: a tailored UI of the Manage Products app to work more efficiently.

Notice that, if you reload the app, your changes will still be there.
Step 5
Start key user adaptation again (like in Step 1).

On the Version drop down (left side of the toolbar), select Original App.

Now press Activate New Version, enter a suitable name like “Back to Original App” and press Confirm.

Finally, press the Exit button in the toolbar to leave key user adaptation.

Now the application is back to how it originally was. Feel free to try out other functions before moving to the next tutorial, where you will learn more details on how key user adaptation works and what it can achieve.

For the SAPUI5 Demokit apps, the key user changes are saved in your browser’s local storage. If you create too many versions and want to get a clean state, you can remove all entries starting with sap.ui.fl from your browser’s local storage.