Key User Adaptation for SAPUI5 Applications - Introduction
Adapt the user interface of an SAPUI5 app for other users with the key user adaptation feature of SAPUI5 flexibility.
Overview
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.
Prerequisites
Steps
Intro
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.
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 John Doe).
User actions menu Choose Adapt UI. In real apps, only key users with specific authorization see this option.
UI Adaptation 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.
UI Adaptation started
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.
Right-click on a field.
Select Rename
Rename Enter the new text and press OK
Overwrite text
You can easily move fields by using drag and drop. Move the field Company Name to the end of the group as shown below.
DragDrop 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.
Cut 
Paste
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.
Save Enter a name for your version, e.g. “My First Version” and press Confirm.
Enter Version Name 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.
Exit
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.
Start key user adaptation again (like in Step 1).
On the Version drop down (left side of the toolbar), select Original App.
Original App Now press Activate New Version, enter a suitable name like “Back to Original App” and press Confirm.
Reset 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.
Resources
Discussion
Share feedback on this tutorial or join the conversation in SAP Community.