Adapting SAP Fiori UIs at Runtime

Objective

After completing this lesson, you will be able to use SAP Fiori runtime authoring

Adaptation at Runtime

Watch the video to see how SAP Fiori UIs can be adapted at runtime.

Key User Extensibility

Flowchart detailing app adaptation: Create app variant, define app descriptor, assign target mapping to role, adapt variant, and activate as new version. Steps accompanied by transaction codes like FLP, FLPAM, and FLPCM.

Since SAP S/4HANA 2023, to create an adaptation of an app as a key user, the following steps must be performed. The prerequisite is that the original app and the RTA plugin are assigned to the user master record of the key user and the key user has the authorization to create adaptations:

  1. In the FLP, start the original app and enter the adaptation mode. Then create an app variant of the original app and save the app variant ID.
  2. In the FLPAM, define an app descriptor for the app variant. You may copy the app descriptor of the original app to a standard catalog and replace the SAPUI5 component ID with the app variant ID.

    Note

    Keeping the intent of the original app, replaces the original app with the variant for all assigned users. If you still want to access the original app in the FLP, change the intent to a unique value.
  3. In the FLPCM, assign the target mapping of the app variant to a role. It is recommended to first reference the target mapping in a business catalog and assign the business catalog to the role.
  4. In the FLP, start the app variant and enter the adaptation mode. Then adapt the app variant as you like and save it.
  5. In the FLP, activate the adaptations as a new version. After that, you may publish the app variant version and assign it to a transport request.

Versions of app variants were introduced in SAP S/4HANA 2023. Before this release, the key user directly adapted the original app and then saved it as an app variant. Compared to the list above, the order was 1.→4.→2.→3.. Without a version, the app variant was directly assigned to a transport request.

Screenshots of FLP and FLPAM showing how to save an app variant. The steps include saving the variant, retrieving the app variant ID, and copying technical catalog info in the Target Application Fields section.

By choosing More Actions→App Variants→Save As, an app variant can be created. You can save multiple variants of one application and also of other variants. Each variant has an app variant ID, which can be used in the FLPAM (in older releases FLPD) to create a target mapping starting the app with this variant. The target mapping can be created by copying the original target mapping of the app and exchanging the SAPUI5 component ID with the app variant ID.

Screenshot flow about activating and publishing a new version of a variant using a customizing or workbench request in the FLP.

After the adaptations to an app have been saved in a variant, they can be activated as a new version. This sets this variant as the active version for all users in the system replacing the original app or any previously active version. You can switch to an older version by activating it as a new version.

With the active version being selected, the Publish button can be used to assign it to a transport request. A customizing or workbench request can be selected to decide, if the adaptations should be available client-specific or cross-client in the follow-up system.

Note

For more information about this topic, see:

How to Define a Target Mapping for an App Variant in FLPD

Business Example

You want to define a target mapping for an app variant using the SAP Fiori launchpad for customizing.

Prerequisites

The business catalog was created in the exercise Reference Tiles and Target Mappings and the ap variant was created in exercise Adapt SAP Fiori at Runtime.

If the SAP Fiori application manager (FLPAM) is not available in your system, watch the video to see how to create a business catalog and assign the app variant to a target mapping in the SAP Fiori launchpad designer (FLPD).

Adapt SAP Fiori at Runtime

Business Example

You want to adapt an SAP Fiori app in the SAP Fiori launchpad at runtime and save the changes as an app variant.

Note

This exercise requires an SAP Learning system. Login information is provided by your system setup guide.

Note

Whenever the values or object names in this exercise include ##, replace ## with the number of your user.

Prerequisites

The business catalog was created in the exercise Reference Tiles and Target Mappings.

Task 1: Activate Runtime Adaptation for a User

ExerciseStart Exercise

Steps

  1. In the User Maintenance (SU01) of your SAP S/4HANA (S4H) system, add the role SAP_UI_FLEX_KEY_USER to your user.

    1. In the SAP Easy Access menu of your S4H, search for User Maintenance or start transaction SU01.

    2. In the User field, enter your user.

    3. Choose Change.

    4. Choose the Roles tab.

    5. In the Role column, open the value help for an empty field.

    6. In the Single Role field, enter *ui_flex* and choose Enter.

    7. Select the Single RoleSAP_UI_FLEX_KEY_USER and choose Copy (Check mark).

    8. Choose Save.

Task 2: Create an App Variant by Using Runtime Adaptation

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad of your S4H, open the object page for the sample bank Deutsche Bank 24 using the SAP Fiori search of your S4H.

    1. Start or reload the SAP Fiori launchpad of your S4H in the client of your choice.

    2. Choose Search in the upper right.

    3. In the Search menu, choose Banks.

    4. In the Search field, enter 24 and choose Enter.

    5. Choose Deutsche Bank 24.

  2. Create the app variant Core Bank Data ## and copy the app variant ID in the clipboard.

    1. In the object page for banks, choose your user in the upper right corner.

    2. In the User Actions Menu, choose Adapt UI.

    3. Choose More Actions (Three lines).

    4. Choose App Variants→Save As.

    5. In the Save as New App Variant popup, in the Title field, enter Core Bank Data ##.

    6. Choose Save.

    7. In the Information popup, choose Copy ID and Close.

      Hint

      You may want to paste the variant ID in a text file.

Task 3: Define an App Descriptor for the App Variant in the SAP Fiori Launchpad Application Manager

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad application manager of your S4H, create the empty standard catalog Z_##_TC_FIN_ADAPTED with title Z## - Financials Adaptation as local object.

    Note

    If you do not see a list of catalogs but just two input fields, execute the last task of the exercise Create Replicable Catalogs:

    Allow Standard and Replicable Catalogs as Catalog Types in an ABAP System.

    1. In the SAP Fiori launchpad application manager, choose New Technical Catalog.

    2. In the Technical Catalog ID field, enter Z_##_TC_FIN_ADAPTED.

    3. In the Technical Catalog Title field, enter Z## - Financials Adaptation.

    4. From the Technical Catalog Type dropdown, select Standard Catalog.

    5. Select Create empty technical catalog only.

    6. Choose Local Object.

  2. Copy the Track Sales Orders app to your Z_##_TC_FIN_ADAPTED catalog using the SAP Fiori IDF1760.

    1. In the Search Term field, enter z_## and choose Go.

    2. In the Technical Catalogs table, choose Z_##_TC_FIN_ADAPTED.

    3. Choose Copy from Other Technical Catalog.

    4. In the Select Transport Request popup, choose Local Object.

    5. In the Copy from Other Technical Catalog popup, choose Adapt Filters.

    6. In the Adapt Filters popup, select SAP Fiori ID and choose OK.

    7. In the SAP Fiori ID field, enter F1760 and choose Go.

    8. Select the Semantic ObjectBank with ActiondisplayFactSheet and choose Copy.

      Result

      The warning Transaction code exists but has a different launchpad app descriptor item ID assigned in SE93. This is solved in the next steps.

    9. Close the warning message.

  3. Paste the variant ID from the clipboard in the SAPUI5 Component ID field. Change the action to displayFactSheet## and the Target Application Title to Show Bank ##.

    1. In the SAPUI5 Component ID field, paste the variant ID from the clipboard.

    2. In the Action field, enter displayFactSheet##.

    3. In the Target Application Title field, enter Show Bank ##.

    4. Choose Save.

    Result

    The changes are saved but the warning that the transaction code already exists is shown. This is solved in the next step.

  4. For the Bank app, create the transaction code Z##_F1760 with Show Bank ## as text.

    1. Choose Edit in the upper left.

    2. In the Transaction Code field, enter Z##_F1760 and choose Enter.

    3. For the Transaction Code, choose Click for creation.

    4. In the Warning popup, choose OK.

    5. In the Create / Display Transaction window, in the Transaction Text field, enter Show Bank ##.

    6. Choose Create Transaction.

    7. Close the Create / Display Transaction window.

    8. Choose Save.

Task 4: Reference the Target Mapping of the App Variant in a Business Catalog

ExerciseStart Exercise

Steps

  1. In the SAP Fiori launchpad content manager of your S4H, create a reference for target mapping of Show Bank ## of the Z_##_TC_FIN_ADAPTED catalog in your catalog Z_##_BC_EMPLOYEE.

    1. Re-/Start the SAP Fiori launchpad content manager of your S4H.

    2. In the Search Catalogs field, enter z_## and choose Go.

    3. In the Catalogs table, select the Z_##_TC_FIN_ADAPTED catalog.

    4. In the Content in Catalog Z_##_TC_FIN_ADAPTED table, select the Show Bank ## app.

    5. Choose Add Tiles/Target Mappings→Add Selected Tiles/TMs to Other Catalog.

    6. In the Search Catalogs field, enter z_## and choose Go.

    7. In the Catalogs table, select the Z_##_BC_EMPLOYEE catalog.

    8. Choose Add TM Reference.

  2. Reload your SAP Fiori launchpad of your S4H and search for the bank Deutsche Bank 24. Choose Show Bank ## in the search result.

    1. Reload the SAP Fiori launchpad of your S4H in the client of your choice.

    2. Choose Search in the upper right.

    3. In the Search menu, choose Banks.

    4. In the Search field, enter 24 and choose Enter.

    5. Choose Show Bank ##.

Task 5: Adapt the App Variant in the SAP Fiori Launchpad

ExerciseStart Exercise

Steps

  1. In the UI Adaptation mode of the object page for banks, change the Control Data group heading to Core Data, add the Bank Country and City fields to the Address group, and remove the Bank Branch and Region fields.

    1. In the object page for banks, choose your user in the upper right corner.

    2. In the User Actions Menu, choose Adapt UI.

    3. Right-click on Control Data and choose Rename.

    4. Change the heading to Core Data and choose Enter.

    5. Right-click on Address and choose Add: Field.

    6. In the Available Content: Fields popup, select Bank Country/Region and City and choose OK.

    7. Right-click on Bank Branch and choose Remove.

    8. Right-click on Region and choose Remove.

    9. Choose Save Draft (Floppy disk).

  2. Check your changes by using the Navigation and Visualization modes.

    1. Choose Navigation at the top.

      Result

      Several buttons disappeared in the header bar.

    2. Choose the House Banks tab.

    3. Choose the General Information tab.

      Result

      In Navigation mode, you can interact with the app.

    4. Choose Visualization at the top.

    5. Choose the blue marker above Core Data.

    6. Choose the blue marker above Address.

      Result

      In the Visualization mode, you can see where changes have been made.

    7. Choose UI Adaptation at the top.

  3. Activate your changes as the new version Core Bank V1.

    1. Choose Activate New Version.

    2. In the Activate New Version popup, in the Enter a version title field, enter Core Bank V1.

    3. Choose Confirm.

    4. Choose Exit.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn