Adapting SAP Fiori UIs at Runtime

Objectives

After completing this lesson, you will be able to:

  • Use SAP Fiori runtime authoring

Adaptation at Runtime

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.

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

SAPUI5 flexibility demo apps are available for testing in the SAPUI5 homepage: https://ui5.sap.com/#/demoapps.

Note

More information about this topic can be found in S4D425 (Extensibility for SAP S/4HANA):

https://training.sap.com/course/s4d425

In addition, check out the learning journey Getting Started with In-App Extensibility in SAP S/4HANA:

https://learning.sap.com/learning-journey/get-started-with-in-app-extensibility-in-sap-s-4hana

Runtime Authoring Plugin

To adapt SAP Fiori apps at runtime, the user needs a target mapping to the runtime authoring plugin. No additional parameters are necessary to activate the Adapt UI button in the User Actions Menu.

SAP ships the /UIF/SAP_RTA_PLUGIN catalog with a pre-configured target mapping. The SAP_UI_FLEX_KEY_USER user role includes this catalog and the authorization object /UIF/FLEX for creating detailed authorizations.

Adapt SAP Fiori at Runtime

Business Scenario

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

Note
This exercise requires an SAP Learning system. Login information are 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

Business catalog was created in exercise Reference Tiles and Target Mappings.

ExerciseStart Exercise

Task 1: Activate Runtime Adaptation for a user.

Steps

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

    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.

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

    7. Select the Single RoleSAP_UI_FLEX_KEY_USER and choose Copy.

    8. Choose Save.

Task 2: Create an app variant by using Runtime Adaptation.

Steps

  1. 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. By using Runtime Adaptation (RTA), 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 in the object page for banks.

    1. 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 dialog box, 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.

  3. Save your changes as app variant Core Bank Data ## as Local Object and copy the app ID in the clipboard.

    1. Choose Save As.

    2. In the Title field, enter Core Bank Data ##.

    3. Add an icon of your choice.

    4. Choose Save.

    5. In the Information dialog box, choose Copy ID and Close.

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

Task 3: Define a target mapping for the app variant in the SAP Fiori launchpad designer.

Steps

  1. In the SAP Fiori launchpad designer of your S4H, create a reference for the target mapping with semantic object Bank and action displayFactSheet of the SAP: Financials - Cash Management Apps (SAP_TC_FIN_CM_COMMON) catalog in your catalog Employee ##.

    1. In the SAP Fiori launchpad designer of your S4H, choose Catalogs.

    2. In the Search for catalogs field, enter fin_cm and choose Enter.

    3. Choose SAP: Financials - Cash Management Apps (SAP_TC_FIN_CM_COMMON) from the list of catalogs.

    4. Choose Target Mappings at the top of the page.

    5. In the Search field on the top right, enter factsheet and choose Enter.

    6. Select the Semantic ObjectBank with ActiondisplayFactSheet .

    7. Choose Create Reference.

    8. In the Search for catalogs field, enter z_## and choose Enter.

    9. Choose your Employee ## catalog.

  2. Paste the app ID of your app variant from the clipboard in the ID field of the target mapping with semantic object Bank and action displayFactSheet of your catalog Employee ##. Change the title to Show Bank ## and the semantic action to displayFactSheet##.

    1. In the Search for catalogs field, enter z_## and choose Enter.

    2. Choose your Z## - Employee catalog.

    3. Select the Semantic ObjectBank with ActiondisplayFactSheet .

    4. Choose Configure.

    5. In the ID field, paste the app ID from the clipboard.

    6. In the Title field, enter Show Bank ##.

    7. In the Action field, enter displayFactsheet##.

    8. Choose Save.

    9. In the dialog box to confirm the break of the reference, choose OK.

Task 4: Test the app variant in the SAP Fiori launchpad.

Steps

  1. Reload your SAP Fiori launchpad of your S4H and search for banks. Choose Show Related Objects For Banks in the search result and check your app variant.

    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 ##.

    6. Check if your changes are visible.

Log in to track your progress & complete quizzes