Skip to Content
Product Information
Author's profile photo Dominik Konle

Easily manage your key user adaptations with SAPUI5 flexibility

A business expert – or key user – is faced with many challenges. While SAP’s standard apps cover a wide range of use cases, your end users know best how they work and will present you with various requests to adapt the user interfaces to fit their needs even better.

With SAPUI5 flexibility, you as a key user can tailor the user interfaces of SAPUI5 applications, making them more efficient, easier to use, and better accepted by end users. This video shows how key users can adapt the UI of an app for others.

But how do you keep track of all the UI changes? How do you analyze the different states of your changed UIs in case of issues? And how do you as a key user provide support for your end users?

SAPUI5 flexibility is available on various platforms. If you have worked with key user adaptation on SAP Business Technology Platform, Cloud Foundry environment (see for example Key User Adaptation in SAP Launchpad service is available out-of-the-box), you may know the following already.

 

If you create UI changes for multiple applications over a longer period, you will notice that it becomes increasingly difficult to remember all the changes as well as the earlier states of the applications. To stay in charge in such situations, SAPUI5 flexibility supports key users with helpful tools like the version history and the change visualization.

 

As of today, the version history for SAPUI5 flexibility key user adaptation is only available for SAP Fiori applications running with SAPUI5 1.84 or newer on the SAP Business Technology Platform, Cloud Foundry environment but is planned to be available in SAP S/4HANA Cloud later this year (as always, forward-looking statements are subject to change).

 

Understand the history of UI versions

  1. As a key user with the corresponding role depending on the used platform (find the relevant documentation), you have the ‘Adapt UI‘ option in your user menu and can adapt standard apps.
    Entering%20UI%20Adaptation

    Entering UI Adaptation

  2. In case the application has not been adapted yet, ‘Original App’ is shown as the version history title in the top left.
    Original%20App

    Original App without any UI changes

  3. If you open the dropdown to show the version history, you will see that no other versions exist yet.
    Empty%20version%20history

    Version history with Original App only

  4. As there are currently no UI changes present for this application let us create some, for example adding and moving a new field plus removing a section.
    Add%20a%20new%20field%20to%20the%20UI

    Adding a new field to the UI

    Removing%20a%20section%20from%20the%20UI

    Removing a section from the UI

  5. Having changed the UI, the ‘UI Adaptation’ mode has left its ‘Original App’ state and is now in a ‘Draft’ state. Draft changes are only present for key users within ‘UI Adaptation’. End users working with the application will still see the active version of its UI which is highlighted in the version history in green, here the ‘Original App’. This allows you as a key user to create UI adaptations without disrupting end users. As the draft can be changed by other key users, you can collaborate over multiple sessions before deciding to make this UI state available to end users. Draft%20mode

    Version history with the draft

  6. To finalize a set of self-contained changes and to make the UI changes available for end users the draft must be activated as a version first.
    Activate%20new%20version

    Activating the draft as new version

    Providing%20a%20title%20for%20the%20new%20version

    Providing a title for the new version

  7. The latest version automatically becomes the application’s active version and is added to the top of the version history. Every entry is made up of the title entered during its activation, which can serve as a brief description of its content, along with its creation date and the username of the key user activating it. The title is only visible in ‘UI Adaptation’ – end users do not see it. If the platform supports transporting changes to another system, activated versions can be written onto a transport request.

    Version%20history%20including%20the%20new%20version

    Version history with the activated version

  8. Having activated the version, the corresponding UI changes are now also applied for all end users. To benefit from the changed UI, end users do not have to be assigned to any specific user role.

    UI%20changes%20being%20applied%20on%20the%20application

    UI changes being applied for all end users

  9. Creating additional UI changes and activating them as new versions results in a growing version history. The active version of the application’s user interface is always shown on top of the list while the last entry is reserved for the ‘Original App’. This version history offers key users a chronological list of the various states the UI has undergone.

    Growing%20version%20history

    Version history with multiple versions

  10. The version history can even be used to display the UI state of non-active versions. Simply select the respective version in the list and the app will automatically reload and apply the corresponding changes within the ‘UI Adaptation’ mode.

    Selecting%20an%20inactive%20version

    Selecting an inactive version

  11. Key users can also select the ‘Original App’ entry from the version history to have a look at how the app looks in absence of any key user changes. Each version (including ‘Original App’) can also be reactivated. When a version is reactivated, a new version with a dedicated title will be created to keep the chronological list consistent.

    Having%20an%20inactive%20version%20selected

    Inactive version

    Reactivating%20an%20inactive%20version

    Reactivated version with a new title

  12. Once a version is activated, it cannot be changed anymore. Each version, both active and inactive, can be used as the basis for a new draft. To create changes based on an inactive version, simply select it from the version history before making the desired UI changes. As usual, these changes will be created as a new draft first, but this time based on the selected version instead of the active one. Once the draft is activated, its UI state becomes the new top entry in the version history.

 

Visualize UI changes

  1. To get even more details of what has been changed on the user interface of an application, the ‘Visualization’ mode can be selected. This mode was introduced to solve common problems key users had with adapted applications. First, it is unclear to what degree an application has changed (and which parts), and second, there is no way to get details about individual changes, e.g. to find out what a text was before it was renamed. In this mode, all UI elements being affected by at least one key user adaptation are marked with a dot, called ‘Change Indicator’. When selecting such an indicator, all details about the corresponding change(s) are displayed in a popup table.
    Change%20details%20in%20the%20Visualization%20mode

    Details about the removed section

    More%20change%20details%20in%20the%20Visualization%20mode

    Details about the added field

  2. The information contained in the ‘changes‘ table contains different information depending on the change type – ‘rename‘ changes contain the ‘before‘ state of the rename, while ‘move‘ changes show if an element was moved from a different container. To indicate that some controls have been changed more than others, the color of the change indicator will become darker as the number of changes increases to visualize the ‘change density‘ of controls and parts of the application.
    Change%20indicators%20showing%20different%20change%20density

    Change indicators with a different change density

  3. Additionally, key users can use the dropdown on the right to filter the type of changes to be visualized, e.g. when searching for a change of a particular type.
    Using%20the%20Visualization%20drop%20down%20to%20filter%20change%20types

    Visualization dropdown to filter the type of changes

    Using%20ddd

    Visualization for a filtered change type

  4. Sometimes changes cannot be visualized for several reasons – either the control to which the change belongs is not visible on the screen (for example when it is part of the List Report and the key user is currently on the Object Page, or the control belongs to a popup), or the change type is not yet supported for visualization. In this case, the dropdown will contain a hint on top to inform you that there are more changes than you can currently see visualized.
    Visualization%20dropdown%20showing%20changes%20not%20being%20visualized

    Changes not visualized

 

Try it out!

With version history and visualization, we offer a straightforward way for key users to manage their adaptations and with that to efficiently provide a tailored experience for their business users.

Try out version history and visualization with UI5 flexibility for key users or via the SAP Launchpad service on SAP Business Technology Platform, Cloud Foundry environment. The change visualization is also available for the SAPUI5 Flexibility Demo Apps in the SAPUI5 Demo Kit.

 

For your reference

For more information on UI5

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.