Creating Target Mappings

Objectives

After completing this lesson, you will be able to:

  • Create target mappings

SAPUI5 Mapping Elements

In this example from the SAP Fiori apps reference library, you see the technical name of the SAPUI5 application, the ICF-path, and the SAPUI5 component. The semantic object and action form the intent.

SAPUI5 apps may consist of multiple SAPUI5 components. One central component is the core of the app and represents the starting point. All other components are referenced or reused in this central component. The idea is that these other components consist of features and functions also valid or even needed for other apps. Therefore these component are called reuse components.

Hint
The SAP Fiori apps reference library offers an own filter for reuse components.

In the SAP Fiori launchpad designer (FLPD), the intent can be found in the target mapping of the catalog. The application type SAPUI5 Fiori App is set as target. The URL holds the ICF-path and the ID holds the SAPUI5 component.

Note
The transaction LPD_CUST was the first way to map an intent-based navigation to the implementation of an app before the FLPD fully took over. URL and ID were defined in an LPD_CUST instance of an LPD_CUST role and referenced in the FLPD via an application alias.

An SAPUI5 app is saved as a Business Server Page (BSP) in the FES. The central file of an SAP Fiori app based on SAPUI5 is Component.js. To start the app, the path to this file is visible in the statement jQuery.sap.declare.

In this example, the BSP holding the SAPUI5 app has less files than usual. This is a sign for an SAPUI5 extension, which reuse other SAPUI5 components. This also applies if a customer extends an SAPUI5 app delivered by SAP. In this case, the extension only consists of the changes to the original app.

Checking the content of the Component.js, there is no statement jQuery.sap.declare. To start an SAPUI5 extension, return U.extend provides the path to the Component.js.

Create SAPUI5 Target Mappings

Business Example

You want to use information from the SAP Fiori apps reference library to create a dynamic tile and target mapping for an SAPUI5 app.

Solution:
SAP_UX100_BC_S_EMPLOYEE (Business Catalog)
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

Steps

  1. In the SAP Fiori apps reference library, search for the My Benefits (Version 3) app for the release of your SAP S/4HANA (S4H) system and note down the name of the SAPUI5 application, path to ICF node, OData service, SAPUI5 component, semantic object, and action.

    SAPUI5 application:__________________________________________________________

    Path to ICF node:____________________________________________________________

    SAPUI5 component:___________________________________________________________

    OData service:_______________________________________________________________

    Semantic object:_____________________________________________________________

    Action:______________________________________________________________________

    1. In the SAP Fiori apps reference library, choose All Apps.

    2. In the Search by App name field, enter benefits.

    3. Choose My Benefits (Version 3).

    4. In the Product Suite menu, choose SAP S/4HANA.

    5. In the Back-End Version menu, choose the release of your S4H.

    6. Choose the Implementation Information tab.

    7. Expand the Configuration node.

    8. In the SAPUI5 Application pane, note down the Technical NameHCMFAB_BENF_MON, the Path to ICF Node/sap/bc/ui5_ui5/sap/hcmfab_benf_mon, and the SAPUI5 Componenthcm.fab.mybenefits.

    9. In the OData Service(s) pane, note down the OData ServiceHCMFAB_MYBENEFITS_SRV.

    10. In the Target Mapping(s) pane, note down the Semantic ObjectBenefitPlan and Actiondisplay.

  2. In the SAP Fiori launchpad designer for customizing your SAP S/4HANA (S4H) system, create a target mapping to the My Benefits app in the Z_##_BC_EMPLOYEE catalog. Use the SAPUI5 application name, ICF, component path, and semantic object you noted down. Set My Benefits ## as title and display## as action.

    1. In the SAP Fiori launchpad designer of your S4H, in the Search for catalogs field , enter z_##.

    2. Choose Employee ## from the list of catalogs.

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

    4. Choose Create Target Mapping.

    5. In the Intent pane, enter the following values:

      FieldValue
      Semantic ObjectBenefitPlan
      Actiondisplay##

    6. In the Application Type menu, choose SAPUI5 Fiori App.

    7. In the Target pane, enter the following values:

      FieldValue
      TitleMy Benefits ##
      URL/sap/bc/ui5_ui5/sap/hcmfab_benf_mon
      IDhcm.fab.mybenefits

    8. Choose Save.

  3. In the Z_##_BC_EMPLOYEE catalog, create the dynamic tile My Benefits ## with the subtitle SAPUI5. Use the semantic object you noted down and the action display##. For the service URL, use the OData service you noted down and add the entity set Summary to the request.

    1. Choose Tiles next to Target Mappings.

    2. Choose Create Tile.

    3. Choose App Launcher – Dynamic.

    4. In the General pane, enter the following values:

      FieldValue
      TitleMy Benefits ##
      SubtitleSAPUI5
      Icon<your choice>

    5. In the Service URL field, enter /sap/opu/odata/sap/HCMFAB_MYBENEFITS_SRV/Summary.

    6. In the Navigation pane, enter the following values:

      FieldValue
      Semantic ObjectBenefitPlan
      Actiondisplay##

    7. Choose Save.

  4. In the SAP Fiori launchpad spaces of your S4H, add the My Benefits ## tile from the Z## - Employee catalog to the My Home page and test it.

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

    2. Choose your user in the upper right corner.

    3. In the User Actions Menu, choose App Finder.

    4. In the list of catalogs on the left, choose Z## - Employee.

    5. Choose the plus of the My Benefits ## tile

    6. In the Add to Page popup, select My Home and choose Add.

    7. Choose Navigate to Home Page.

    8. Operate the apps as you wish.

Log in to track your progress & complete quizzes