Adaptation at Runtime is the name of a prominent example for UI flexibility.
Flexible UIs mean that the UI of your app can be changed when you see it in your browser, at runtime.
Why would a customer want to use Adaptation at Runtime (RTA)? To empower their business users! Non-developers can change the front end: You want to change a field label? Rename it! A certain field is missing? Add it! You’d like to have a field at a different position? Move it! You need a new section? Create one! This is powerful as the same app can cover more than one business scenario with similar but different data - and you don’t need to bother your developers with requests for minor changes.
What does this look like in real life? Imagine John, the manager of the purchasing department of a large company, reporting this:
“At our company, we have an application that everyone uses to order products they need. However, as the manager of the purchasing department, I would like to make some changes to the user interface of the application to make it more streamlined and intuitive for the buyers in my department. Right now, the process to get the UI changed is to work with our IT department and go through a long process of
Telling them our needs,
Waiting for them to code the changes,
Test the work and eventually
Roll it out.
I hear SAP has made something that does that faster and easier. In addition, it doesn’t require coding and doesn't actually change the code of the application. How do I get access to this?”
Access is easy as we have several resources helping managers, developers and any interested people to evaluate this powerful functionality. The flexibility master-detail demo app in our Demo Kitis probably the best starting point to get to grips with the topic by just trying it out.
When you click on the link above, click first on the "Go" button on the top right side of the screen to populate the list in the center of the page with data. Then, click on one product in the list to display the product details on the screen.
Next, you can enter the adaptation mode by clicking on the user icon in the top left corner - that's the so-called Me Area. Then, click on Adapt UI. Now, you are in change mode. When you move your mouse around, you can see frames appear around the text areas that the mouse hovers over. When you click them, you can see a context menu appear, offering actions you can perform; for example, Rename, Add Field, Remove. When you press Ctrl+Z or choose the respective button in the top right corner of the screen you undo your last change. With the Reset button, you undo all changes you made in the app.
This first hands-on experience can give you these insights:
You do not have to be a developer to change the UI – changes are made at runtime via the UI adaptation mode in a WYSIWYG fashion so that you see the changes immediately.
The artefacts of the base application are not changed – changes are stored separately in the SAPUI5 Flexibility Services repository and are applied at start-up of the application. This is especially handy for cloud based environments; If the base application is updated/upgraded by your IT department at some point, the UI changes will simply be applied at start-up using the updated/upgraded base application, and the changes will still work.
Changes to the UI made via RTA will not break the existing application, meaning that less time, if any, is needed for QA testing.
If you are curious now to see the code, the demo app can be downloaded from the demo apps page(press the "Download" button and select app "UI Adaptation at Runtime for SAP Fiori Elements").
In the App
Speaking about coding: What are the technical prerequisites an app needs to meet for Adaptation at Runtime enablement?
The most fundamental steps are the following:
SAPUI5 needs to be used, including only the compatible controls (see link below)
Stable IDs need to be set for all controls, views and the app itself. Stable IDs are used to identify the controls that a key user can adapt using Adaptation at Runtime
SAP Fiori Launchpad (FLP) needs to be used
The SAPUI5 application is deployed to FLP for launching FLP resources, such as the Me Area
Note: If your app is based on SAP Fiori elements, it automatically supports Adaptation at Runtime.
The key user comes into play in this chapter as the main coordinator and technical facilitator. This is a business expert who has deep understanding the business process and needs of application end users. It is also someone who knows about the SAP transport system, as it is possible to transport the final UI of an app from a Q-System to a productive system. This means that the key user should also have the authorizations for the quality system and the transactions for conducting the transport(s).
In addition to the key user, there's also the end user and the developer as characters in the flexibility story:
As FLP is touched, it is important to know what the FLP admin needs to do to enable the “Adapt UI” button within the Me Area:
Assign the key user to the authorization role SAP_UI_FLEX_KEY_USER. (Note: If you want to define your own roles, make sure to copy the SAP_UI_FLEX_KEY_USER role and create them based on this role.)
In addition, the FLP admin should also ensure that the key user
Uses the new FioriLaunchpad.html page.
Has the required authorizations for transports.
The required ICF nodes are activated. (For more information, see SICF Services.
You may wonder how the changes are stored? A layering concept allows changes to be stored separate from the original app.
To summarize, we can say that if more freedom is needed for users and business experts to tailor the frond-ends of applications, this feature is of high interest. You learned in this blog post what the benefits are and how to enable applications to use Adaptation at Runtime. In addition, you now know about the demo app so you can see this useful topic in action.
Jessica is the Product Manager for SAPUI5 flexibility services and is always looking for ways to improve the user experience of SAPUI5 based applications. With a background of nearly 20 years of user research and UX design, she enjoys helping people make their applications intuitive and delightful.
Annette is a UI5 developer at SAP who loves to be creative and produce sophisticated Web front ends. Always in pursuit of the optimal user experience, she’s supporting UI5 communities, happy to share success and grateful for learning something new every day.