Adapting SAP Fiori UIs at Runtime

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Create an app variant

SAP Fiori Runtime Authoring

With UI adaptation at runtime (RTA), SAP Fiori apps based on SAPUI5 that support RTA can be changed directly and intuitively in the SAP Fiori launchpad, without developing any source code. Changes done via RTA apply to the entire app and, therefore, to all users of the app, system-wide. All changes to an app can be undone or even discarded to reset the UI to the default app. Apps based on SAP Fiori elements support RTA by default.

The UI adaptation mode can be accessed via the Adapt UI button in the User Actions Menu for the running app. This displays a new header bar with actions around RTA. When you are in the adaptation mode, you can edit all UI elements, such as fields, groups of fields, or sections, that get highlighted when you hover over or select them. Here's what you can do, among other things:

  • Drag and drop
  • Remove
  • Add
  • Rename
  • Combine and split fields

The header bar of the UI adaptation mode contains the following basic functions:

  • Toggle between adaptation and navigation mode
  • Undo and redo changes
  • Overview of existing app variants
  • Discard all changes and reset the app to the original version
  • Save the changes to an ABAP transport
  • Exit the UI adaptation mode and return to the running app
  • Create a new app variant

By choosing Save As, the changes can be saved as an app variant. It is possible to save multiple variants of one application and also of other variants. Each variant has an app ID, which can be used, in the SAP Fiori launchpad designer, to create a target mapping starting the app with this variant. The target mapping can be created by referencing the original target mapping of the app and exchanging the ID with the app ID of the app variant.

Create an App Variant

Business Scenario

In this demonstration, you will adapt the UI of an SAP Fiori app at runtime. The UI changes are saved as an app variant and made available to your user via the SAP Fiori launchpad using an appropriate target mapping.

Result

Now you know how to create an app variant.

Save progress to your learning plan by logging in or creating an account