1 of 58

SAP

S/4 HANA

​

GUI

Fiori HTML of GUI

Fiori UX

ICF Node

OData Service

Fiori Catalog

Fiori Group

2 of 58

S/4HANA

S/4HANA

  1. GUI of MM03.
  2. Fiori App “Display Material” (HTML of MM03).
  3. Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  4. Check Fiori Component ID/App ID “MM03” in Fiori Library.
  5. Fiori App “Manage Product Master Data” (UX).
  6. Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  7. Check Fiori App ID “F1602” in Fiori Library.
  8. SAP UI Application ICF Node Activation overview.
  9. SAP UI Application OData Activation overview.
  10. Assign Fiori Catalog to Role.
  11. Assign Fiori Group to Role.

3 of 58

Display Material

using GUI access

via Transaction code MM03

4 of 58

Goto “Basic Data 1” view for Material T-F100 to check the UOM

5 of 58

Base UOM is mandatory

6 of 58

Alternative UOM with its conversion factors

7 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

8 of 58

Fiori App “Display Material” (HTML of MM03)

9 of 58

Enter Material T-F100 and click Continue

10 of 58

11 of 58

Base UOM of “PC”

12 of 58

13 of 58

Alternative UOM with its conversion factors

14 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

15 of 58

Goto Profile of the User

16 of 58

17 of 58

18 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

19 of 58

20 of 58

Search by entering Fiori App name “Display Material” or the AppID and press ENTER.

21 of 58

22 of 58

This APP is available in this SAP S/4HANA Deployment

23 of 58

this App is available since 1610 (ie 2016 October)

24 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

25 of 58

Fiori UX App “Manage Product Master Data”

26 of 58

Enter

Product (Material)

T-F100 and press ENTER

27 of 58

28 of 58

29 of 58

Scroll down

30 of 58

UOM Conversion table

31 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

32 of 58

Goto Profile of the User

33 of 58

34 of 58

35 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

36 of 58

Search by entering Fiori App name “Manage Product Master Data” or the App ID F1602 and press ENTER

37 of 58

38 of 58

this Fiori UX App is available for these SAP S/4HANA Deployments

39 of 58

this Fiori UX App was available since 1610 (ie: 2016 October)

40 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

41 of 58

in the “Implementation Information” Tab, click to “Configuration” section

42 of 58

An ICF node is an active, or "live," configuration within the SAP Internet Communication Framework (ICF) that enables specific web services or applications to be accessed over the internet or intranet using standard protocols like HTTP(S). These nodes act as specific entry points within the ICF, which serves as the bridge between the SAP kernel and ABAP applications. Activating an ICF node, often done through the SICF transaction, makes an associated service accessible to external systems and users, such as a web browser or a Fiori app.

43 of 58

To activate an ICF node in SAP, use transaction SICF (Maintain Services) to find the specific service path, then select it and choose Service/Host Activate to enable it for use. Alternatively, for OData services, use Tcode /N/IWFND/MAINT_SERVICE to find and activate the service's ICF node. ICF services are disabled by default for security reasons, so you must activate them for the applications you intend to use.

44 of 58

45 of 58

Refer to Netweaver Consultant to properly Activate the relevant ICF Nodes

46 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

47 of 58

SAP OData for Fiori is the standard data protocol that allows SAP Fiori apps to communicate with back-end SAP systems to display and update business data. OData uses REST principles and HTTP to provide a consistent, standardized interface for data exchange, making it easier for developers to build user-friendly Fiori applications that access information from various sources.

48 of 58

To activate an OData service in an SAP S/4HANA system, go to transaction /IWFND/MAINT_SERVICE, click Add Service, and select your backend system's alias, such as 'LOCAL'. Enter the technical name and version of the service, then click Get Services and Add Selected Services. Finally, assign a package (or select Local Object) and execute to save the service, ensuring the ICF node is active to complete the activation.

49 of 58

Step-by-Step Activation

  1. Open SAP GUI: and navigate to transaction /IWFND/MAINT_SERVICE.
  2. On the Service Catalog screen, select Add Service.
  3. In the System Alias field, enter the alias of your backend system (e.g., LOCAL) and click Get Services to find available services.
  4. Filter: the services to locate the desired OData service by its technical name (e.g., API_BUSINESS_PARTNER, ZZ1_CUSTOMERRECORD_CDS).
  5. Select the service and click Add Selected Services.
  6. On the next screen, specify a Package Assignment by entering a package name or selecting Local Object ($TMP).
  7. Execute: the changes to save the service.
  8. Check the Service Status: On the Service Catalog screen, find your service and ensure the ICF Node column shows as green (activated). If not, select the service, click on ICF Node, and activate it.

​

Post-Activation Steps

  • Test the Service: You may need to call the OData service once to complete the activation process and ensure it is working correctly, as mentioned in the SAP Help Portal.
  • Create Technical User and Assign Roles: For access, a technical user with the appropriate authorizations needs to be created in the SAP system using transactions like SU01 and PFCG.
  • Verify in SICF: In the ABAP front-end server, you can also check the status of the OData service's ICF node by navigating to transaction SICF and following the appropriate path to your service.

50 of 58

  • On the Service Catalog screen, select Add Service.
  • In the System Alias field, enter the alias of your backend system (e.g., LOCAL) and click Get Services to find available services.
  • Filter: the services to locate the desired OData service by its technical name (e.g., API_BUSINESS_PARTNER, ZZ1_CUSTOMERRECORD_CDS).
  • Select the service and click Add Selected Services.
  • On the next screen, specify a Package Assignment by entering a package name or selecting Local Object ($TMP).
  • Execute: the changes to save the service.
  • Check the Service Status: On the Service Catalog screen, find your service and ensure the ICF Node column shows as green (activated). If not, select the service, click on ICF Node, and activate it.

51 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

52 of 58

The Fiori App can be found in these Fiori Catalogs

53 of 58

Assign the Catalog to the Uer Role

54 of 58

Assign the Catalog to the User Role

55 of 58

S/4HANA

S/4HANA

  • GUI of MM03.
  • Fiori App “Display Material” (HTML of MM03).
  • Identity the Fiori Component ID/App ID for Fiori App “Display Material”.
  • Check Fiori Component ID/App ID “MM03” in Fiori Library.
  • Fiori App “Manage Product Master Data” (UX).
  • Identity the Fiori App ID for Fiori App “Manage Product Master Data”.
  • Check Fiori App ID “F1602” in Fiori Library.
  • SAP UI Application ICF Node Activation overview.
  • SAP UI Application OData Activation overview.
  • Assign Fiori Catalog to Role.
  • Assign Fiori Group to Role.

56 of 58

Determine the Launchpad Group via Fiori Group or

Space and Pages where the Fiori App is assigned, to be Assign the the User Role

57 of 58

In this example, a User defined Launchpad Group “Z_S4H01_Master Data” with Folder name “Master Data” was designed to contain the relevant Fiori Apps which is assign to the User Role

58 of 58

the User defined Launchpad Group “Z_S4H01_Master Data” contains 2 Fiori Apps