Configuring Reference Apps (Appendix)

Objective

After completing this lesson, you will be able to configure reference apps

Relevant Repository Objects

Graphical overview of Reference Apps in SAP Web IDE

SAP offers three SAP Fiori apps as reference for customers based on demo data of the Enterprise Procurement Model (EPM). Developers are the main target group of SAPUI5 apps. Therefore, these apps are on the one hand available in the SAP Web IDE including mockup data. No back-end server is needed. On the other hand, these apps are available in every AS ABAP since 7.40 as part of the SAP_UI software component. As a result, they are also useful for administrators who want to test the system landscape without the need for business data.

Figure that shows Reference Apps – Services

You can use the SAP_FIORI_REFERENCE_APPS_SETUP task list to activate the listed ICF services and to register the listed OData services.

Screenshot from system: Task List for Reference Apps

There are three apps available:

Approve Purchase Orders
Manage Products
Shop

All three are transactional apps, so each one has an ICF node for the SAPUI5 application, which needs to be activated on the FES, and an SAP Gateway service in the BES, which needs to be registered on the FES. In addition, the /sap/public/bc/NWDEMO_MODEL ICF node should be activated to provide pictures of products for the apps.

Note

The reference apps are for demonstration purposes only – therefore, they are not listed in the SAP Fiori apps reference library.

Configure Reference Apps

Screenshot with labels of Target Mapping in the system

No SAP Fiori catalog provides tiles and target mappings for the reference apps. The following tables show all the relevant information required to create these using the SAP Fiori launchpad designer.

Target Mappings:

App	Semantic Object	Action	URL	ID
Manage Products	EPMProduct	manage	/sap/bc/ui5_ui5/sap/epmra_prodman	nw.epm.refapps.ext.prod.manage
Shop	EPMPurchaseOrder	create	/sap/bc/ui5_ui5/sap/epmra_shop	nw.epm.refapps.ext.shop
Approve Purchase Order	EPMPurchaseOrder	approve	/sap/bc/ui5_ui5/sap/epmra_poapv	nw.epm.refapps.ext.po.apv

Dynamic Tiles:

App	Semantic Object	Action	Service URL	Icon
Manage Products	EPMProduct	manage	/sap/opu/odata/sap/EPM_REF_APPS_PROD_MAN_SRV/Products/$count	sap-icon://product
Shop	EPMPurchaseOrder	create	/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/ShoppingCartItems/$count	sap-icon://Fiori2/F0406
Approve Purchase Order	EPMPurchaseOrder	approve	/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders/$count	sap-icon://Fiori2/F0402

Screenshot of system: EPM Data Generator - Standard Channel

The reference apps on an AS ABAP read data from database tables. These tables are shipped in an empty state. Demo data can be generated using the transaction SEPM_DG.

By providing reference apps in the FLP on the FES reading data from the BES, the connection and configuration of transactional apps can be tested before any productive SAP Fiori app is even installed.

Configure Reference Apps

Business Example

In this exercise, you will configure reference apps.

Note

In this exercise, when an object name or value contains ##, replace ## with the number your trainer assigned to you.

Task 1: Optional: Hostname of SAP Web Dispatcher for SAP Fiori Launchpad Designer

Steps

Launch the SAP Fiori launchpad designer using transaction /UI2/FLPD_CUST and note the generated URL.
1. Log on to your SAP system using the train-## user.
2. Enter transaction /UI2/FLPD_CUST.
3. A web browser window opens. Note the hostname and the port: the hostname belongs to your application server instance, and the port is an ICM HTTPS port – your SAP Web Dispatcher is not yet used.
In your SAP S/4HANA system, create the following entry in table HTTPURLLOC:
Field Value
Sort/Match Seq. 2
Protocol for URL HTTPS
Application Name /SAP/BC/UI5_UI5/*
Host Name
Q team: fsqhost.wdf.sap.corp
P team: fsphost.wdf.sap.corp
Port
Q team: 44320
P team: 44330
1. In your SAP system, enter transaction HTTPURLLOC.
2. Choose Edit (Ctrl+F1).
3. Choose New Entries.
4. Enter the values as listed above.
  Hint
  You may also use the Copy As... button to copy an existing table entry.
5. Save your changes.
6. Choose Back (F3) several times to leave transaction HTTPURLLOC.
Launch the SAP Fiori launchpad designer using transaction /UI2/FLPD_CUST again.
1. Enter transaction /UI2/FLPD_CUST.
2. A web browser window opens. Now the hostname and the port should belong to your SAP Web Dispatcher.

Field	Value
Sort/Match Seq.	2
Protocol for URL	HTTPS
Application Name	/SAP/BC/UI5_UI5/*
Host Name	Q team: fsqhost.wdf.sap.corp P team: fsphost.wdf.sap.corp
Port	Q team: 44320 P team: 44330

Result

Now the generated URL launches the SAP Fiori launchpad designer using your SAP Web Dispatcher.

Task 2: Configure Reference Apps using a Task List

Steps

In your SAP S/4HANA system, execute task list SAP_FIORI_REFERENCE_APPS_SETUP (transaction STC01) in dialog mode with the following parametrization:
- Deselect the Checks System-Prerequisites for Ref Apps task.
- Deselect the SAP_GW_FIORI_ERP_ONE_CLNT_SETUP task.
1. Log on to your SAP system using the train-## user.
2. Start transaction STC01.
3. In the Task List field, select SAP_FIORI_REFERENCE_APPS_SETUP and choose Generate Task List Run (F8).
4. Deselect task Checks System-Prerequisites for Ref Apps.
5. Deselect task Execute the task list SAP_GW_FIORI_ERP_ONE_CLNT_SETUP.
  The SAP_GW_FIORI_ERP_ONE_CLNT_SETUP task list has been executed previously – therefore, we do not execute it again.
6. Keep all other settings unchanged and choose Start/Resume Task List Run in Dialog (F8).

Result

The reference apps are configured, including the activation of the required SAP Gateway and ICF services.

Task 3: Maintain Target Mapping

Steps

In your SAP S/4HANA system, use the client-specific version of the SAP Fiori launchpad content manager to open your catalog Z_##_BC_UX200 within the client-specific version of the SAP Fiori launchpad designer (FLPD).
When the FLPD shows your catalog Z_##_BC_UX200, close the SAP GUI window with the SAP Fiori launchpad content manager.
1. Continue working in your SAP system using the train-## user.
2. Enter transaction /UI2/FLPCM_CUST.
3. Ensure that the Catalogs tab is selected.
4. Search for your catalog Z_##_BC_UX200, for example using the Search Catalogs field.
5. Select your catalog Z_##_BC_UX200.
6. Choose Open in Designer.
7. A new browser window is launched. Wait until the SAP Fiori launchpad designer (FLPD) is available.
8. When the FLPD shows your catalog Z_##_BC_UX200, close the SAP GUI window with the SAP Fiori launchpad content manager.
  Note
  This removes the lock on your catalog Z_##_BC_UX200.

Using the FLPD, add the following target mappings to your catalog Z_##_BC_UX200. Use the following data:

App	Semantic Object	Action	URL	ID
Shop	EPMPurchaseOrder	create	/sap/bc/ui5_ui5/sap/epmra_shop	nw.epm.refapps.ext.shop
Manage Products	EPMProduct	manage	/sap/bc/ui5_ui5/sap/epmra_prodman	nw.epm.refapps.ext.prod.manage
Approve Purchase Order	EPMPurchaseOrder	approve	/sap/bc/ui5_ui5/sap/epmra_poapv	nw.epm.refapps.ext.po.apv

Note

Note the little helper file offered at S:\Courses\UX200_24\Configure Reference Apps\Target Mappings.txt.

Hint

In case you are missing the S: drive at the WTS level, execute the Connect Training Share script (offered as a Windows tile below Initialize Environment).

Continue working with the SAP Fiori launchpad designer of your SAP S/4HANA system.
Ensure that you have opened your catalog Catalog ##.
If this is not the case, perform the following steps:
1. Choose Catalogs (at the top-left).
2. In the Search for catalogs field, enter Z_## and choose Enter.
3. Choose your catalog Catalog ##.
Choose Target Mappings at the top of the page.
Choose Create Target Mapping at the bottom of the page.
Fill in the fields as indicated in the helper file and the table above.
When done, choose Save.
Repeat the last steps for the other target mappings. If you're pressed for time, create only one target mapping (for example, EPMPurchaseOrder-create).

Using the FLPD, add the following dynamic tiles to your catalog Z_##_BC_UX200. Use the following data:

App	Semantic Object	Action	Service URL	Icon
Shop	EPMPurchaseOrder	create	/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/ShoppingCartItems/$count	sap-icon://Fiori2/F0406
Manage Products	EPMProduct	manage	/sap/opu/odata/sap/EPM_REF_APPS_PROD_MAN_SRV/Products/$count	sap-icon://product
Approve Purchase Order	EPMPurchaseOrder	approve	/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders/$count	sap-icon://Fiori2/F0402

Hint

Note the little helper file offered at S:\Courses\UX200_24\Configure Reference Apps\Dynamic Tiles.txt.

Continue working with the SAP Fiori launchpad designer of your SAP S/4HANA system.
Ensure that you have opened your catalog Catalog ##.
If this is not the case, perform the following steps:
1. Choose Catalogs (at the top-left).
2. In the Search for catalogs field, enter Z_## and choose Enter.
3. Choose your catalog Catalog ##.
Choose Tiles next to Target Mappings.
Choose Create Tile at the bottom of the page.
Select App Launcher – Dynamic.
In the table, select the line with the dynamic tile and choose Configure at the bottom of the page.
Fill in the fields as indicated in the helper file and the table above.
When done, choose Save.
Repeat the last steps for the other tiles. If you are pressed for time, create only one tile (matching the target mapping you created beforehand).

Task 4: Test the Apps

Steps

In your My Home, add some tiles of the reference apps from your catalog Catalog ## to your favorite apps and test the apps.
1. Start or reload the SAP Fiori launchpad of your SAP system in a client of your choice.
2. In your My Home, navigate to the Apps→Favorites section.
3. Choose Add Apps.
4. In the App Finder, select your catalog Catalog ## (at the left).
5. Click Add to Page "My Home" (the + sign) for one or multiple tiles of the reference apps.
6. Choose Navigate to Home (the SAP logo in the upper left).
7. Use the app(s) as you see fit.

Next lesson