Back to blog
Posted November 19 2020
Written by Rinaldo Morais

How to Implement an SAP Fiori App in S/4HANA

What Is SAP Fiori?

SAP Fiori technology was introduced in 2013 and since then a large collection of apps has been developed into the new user experience for SAP software. Indeed, SAP Fiori is a collection of apps that represents the new user experience from SAP.

  • SAP Fiori is the new design of SAP User Experience. One hundred percent focused on business users, SAP Fiori ensures that people have a consistent, coherent, simple, and intuitive user experience across multiple devices.
  • SAPUI5, a JavaScript package for user interface development, is the technology behind SAP Fiori apps for web and iOS native applications.
  • SAP Fiori apps adopt the user management and authorization concepts provided by AS ABAP.

SAP provides different deployment options for SAP Fiori. In this article you will find steps to activate the app My Inbox - Approve Purchase Requisitions for S/4HANA 1809 SP Stack 02 (05/2019) FP On-Premise with embedded SAP Fiori, and to configure the SAP Fiori Launchpad to launch and run the app.

As you can see in Figure 1, I have highlighted two important components and the Fiori app itself:

  • SAP Fiori Front-End Server: Delivers the technology software components for the front-end that are required to run SAP Fiori apps and provides the user interface and the connection to the back-end.
  • Gateway and OData Services: Retrieve and update the business data for use in the SAP Fiori apps from the back-end system. Gateway is used to set up and activate the OData services.

2 SAP Fiori Deployment Options_What is SAP Fiori_How to Implement an SAP Fiori App in S4HANA_Createch

Figure 1. SAP Fiori Deployment Options.

You may want to check All Things SAP Fiori website at:

https://help.sap.com/viewer/a3a20aacd1484c8a976f71054a3bf860/5_OVERVIEW/en-US/4c1048feb4ea4f7d81ccbc47233a0d68.html

Refer to SAP Fiori guidelines at: https://experience.sap.com/fiori-design/
More about S/4HANA? See our page: https://www.createch.ca/products/sap-s4hana.

Planning the Implementation

The first step is to plan the SAP Fiori app implementation. SAP provides tools, such as SAP Fiori Reference Library, Innovation Discovery, and Maintenance Planner. Within this blog article, we will focus on SAP Fiori Reference Library since we will explore, plan and implement a specific SAP Fiori app in an existing SAP S/4HANA 1809 system.

3 Planning the implementation_Finding information about SAP fiori app_How to Implement an SAP Fiori App in S4HANA_Createch

Figure 2. SAP Fiori Apps Reference Library.

Finding Information About SAP Fiori App

Access the SAP Fiori App Reference Library at http://www.sap.com/fiori-apps-library and collect technical details to implement your SAP Fiori app (My Inbox - Approve Purchase Requisitions). Select SAP Fiori apps for SAP S/4HANA and All apps.

4 Finding Information About SAP Fiori APP_How to Implement an SAP Fiori App in S4HANA_Createch

5 Finding information about sap fiori app_my inbos approve purchase requisitions_How to Implement an SAP Fiori App in S4HANA_Createch

Search for the Fiori app My Inbox - Approve Purchase Requisitions for S/4HANA 1809.

6 finding information about sap fioro app_product features_How to Implement an SAP Fiori App in S4HANA_CreatechOn App Details, select PRODUCT FEATURES and check if the app fits your business requirements.

7 finding information about sap fioro app_implementation information_How to Implement an SAP Fiori App in S4HANA_Createch

On App Details, select IMPLEMENTATION INFORMATION.

8 finding information about sap fioro app_important sap notes_How to Implement an SAP Fiori App in S4HANA_CreatechSelect Important SAP Notes and check related notes carefully.

9 finding information about sap fioro app_notes number_How to Implement an SAP Fiori App in S4HANA_CreatechSAP Notes contain special requirements to implement the Fiori app. In this article we will not focus on these activities. However, you must review them very carefully.

Select Installation and check the prerequisites for this app implementation. Make sure the Front-End and Back-End Components are compatible with the Fiori app.

10 finding information about sap fioro app_installation front-end back-end components_How to Implement an SAP Fiori App in S4HANA_Createch

11 finding information about sap fioro app_configuration_How to Implement an SAP Fiori App in S4HANA_CreatechSelect Configuration and check the technical details. You must keep this page opened for reference when implementing the app.

12 finding information about sap fioro app_configuration_How to Implement an SAP Fiori App in S4HANA_CreatechSetting Up System Landscape

There are a few configuration steps to perform before you start implementing an app for S/4HANA 1809 On-Premise with embedded SAP Fiori.

  1. Connect to the SAP system and execute transaction STC01 with task SAP_GW_FIORI_ERP_ONE_CLNT_SETUP to configure SAP Gateway and SAP Fiori on the same client where the S/4HANA system is located. It consists of tasks that are available with the following task lists:
  • SAP_GATEWAY_BASIC_CONFIG;
  • SAP_FIORI_LAUNCHPAD_INIT_SETUP;
  • SAP_GATEWAY_ACTIVATE_ODATA_SERV;
  • SAP_BASIS_ACTIVATE_ICF_NODES.

13_setting up system landscape_taks list runs_How to Implement an SAP Fiori App in S4HANA_Createch

Adapting Features of the SAP Fiori Launchpad

The SAP Fiori launchpad can be adapted according to your business requirements. For an overview of the options, go to http://help.sap.com/s4hana_op_1809, enter SAP Fiori Launchpad into the search bar, press Enter, open the search result with that title, and navigate to Administration Guide -> Configuring the Launchpad. Use the same search to get details about the features below:

  • Notifications in the launchpad: The SAP Gateway Notification Channel, a framework for applications to deliver notifications to end users through various channels which is part of the SAP_GWFND software component, can notify the SAP Fiori launchpad.
  • In-Place Navigation for Classic UIs: Configure applications based on Web Dynpro ABAP or SAP GUI for HTML to open in the same browser window and tab.
  • Improved performance for launching SAP GUI for HTML apps: To improve the performance when navigating to an SAP GUI app, you can activate the stateful application container for SAP GUI apps. After you have done this, when navigating from an SAP GUI app to another app, the container that contains the SAP GUI app will be kept alive. As a result, any subsequent navigation to an SAP GUI app on the same back-end system is faster.

Activating Fiori SICF Service

  1. Ensure the SICF service /sap/bc/ui2/nwbc is activated.
    14 Activating fiori sicf service_How to Implement an SAP Fiori App in S4HANA_Createch
  2. If you use SAP GUI for HTML Apps on your SAP Fiori launchpad, check if the ICF node /sap/public/bc/its and all its sub-nodes are activated (use transaction SICF).

    15 Activating fiori sicf service_How to Implement an SAP Fiori App in S4HANA_Createch

Configuring a Login Screen for the Launchpad

The SAP Fiori login page is a customized standard ABAP login page.
  1. In transaction SICF, go to the external alias that refers to the ICF node /sap/bc/ui2/flp:
    SICF -> External Aliases -> default_host -> /sap/bc/ui5_ui5/ui2/ushell/shells/abap (alias /sap/bc/ui2/flp) -> Change -> Error Pages Tab -> System Logon Configuration
  2. Navigate to Error Page -> Logon Errors tab.
  3. Select the System Logon radio button and choose the Configuration button.
    A System Logon Configuration dialog box appears. Enter the following:
  • Under Settings Selection section, select the Define Service-Specific Settings radio button.
  • In the Logon Layout and Procedure section, select the Custom Implementation radio button and enter /UI2/CL_SRA_LOGIN in the ABAP Class field.
  • Save.

16 configuring a login screen for the launchpad_display service_How to Implement an SAP Fiori App in S4HANA_Createch17 configuring a login screen for the launchpad_select display_How to Implement an SAP Fiori App in S4HANA_Createch4. Testing the Fiori Launchpad URL:
https://<hostname>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html

18 configuring a login screen for the launchpad_login_How to Implement an SAP Fiori App in S4HANA_CreatechClearing All Fiori Caches

  1. Run transaction /UI2/INVAL_CACHES to invalidate all UI2 caches.
    19 global cache invalidation_clearing all fiori cahches_How to Implement an SAP Fiori App in S4HANA_Createch
  2. If you are using the SAPUI5 cache busting mechanism for your SAP Fiori launchpad, run the report /UI2/INVALIDATE_CLIENT_CACHES to invalidate the client caches by using transaction SE38.
    20 client cache invalidation_clearing all fiori cahches_How to Implement an SAP Fiori App in S4HANA_Createch

3. Run the report /UI2/DELETE_CACHE_AFTER_IMP. It clears the UI2 cache on the front-end server.

21 delete ui2 cache after import of a support package_clearing all fiori cahches_How to Implement an SAP Fiori App in S4HANA_Createch

Activating OData Services

Now you are ready to start configuring the app. You have already collected technical details of the SAP Fiori app you want to implement. Collect the names and version numbers of the OData services related to the app.

  1. Start task list SAP_GATEWAY_ACTIVATE_ODATA_SERV via transaction STC01. Select all tasks to be executed.
    22 task manager for technical configuration_Activating odata services_How to Implement an SAP Fiori App in S4HANA_Createch23 Maintain task list run_Activating odata services_How to Implement an SAP Fiori App in S4HANA_Createch
  2. In the Define OData Services for Activation task, enter the OData services you want to activate. You can see the relevant services for this app in the SAP Fiori App Reference Library. Enter the external service name or the technical service name. To use a version other than 1, enter a blank value and then the version number behind the service name.
  • /IWPGW/TASKPROCESSING         0002
  • C_PURREQUISITION_FS_SRV      0001

24 define odata services_Activating odata services_How to Implement an SAP Fiori App in S4HANA_Createch3. In the Select System Alias for Activation task, enter the System Alias. Example: LOCAL
25 edit variants_Activating odata services_How to Implement an SAP Fiori App in S4HANA_Createch4. In the Select OData Services for Activation task, make sure that all services you want to activate are selected. You can exclude services that you do not want to activate.
26 select to be activated odata services_Activating odata services_How to Implement an SAP Fiori App in S4HANA_Createch5. Choose Generate Task List Run. The system creates the OData service, assigns the system alias to the OData service, and activates the related ICF nodes.

27 maintain task list run sap_Activating odata services_How to Implement an SAP Fiori App in S4HANA_Createch

Activating ICF Services of SAPUI5 Application

  1. On the front-end server, start transaction Maintain Services (SICF). Press F8.
  2. Navigate to default_host -> sap -> bc -> ui5_ui5 -> sap.
  3. In this node, navigate to the SAPUI5 application for your app.
  4. To activate the service (SAPUI5 application), choose Service/Host -> Activate.
    • /sap/bc/ui5_ui5/sap/ca_fiori_inbox

28 activate service_activating icf services of sapui5 application_How to Implement an SAP Fiori App in S4HANA_Createch

New call-to-action

Adding SAP Fiori apps to a Transport Request

  1. Create a new Customizing TR (stands for Transport Request) in your development system:
    <SID>K9<number> BC: Fiori app My Inbox - Approve Purchase Requisitions
    29 approve purchase requisitions_adding sap fioro apps to a transport request_How to Implement an SAP Fiori App in S4HANA_Createch
  2. Launch the SAP Fiori Launchpad Designer in customizing scope by opening the following URL:
    http://<hostname>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?scope=CUST
  3. Select Settings and assign the TR to SAP Fiori Launchpad Designer. Releasing the TR, customizations can be imported into the SAP landscape.

30 assign transport request_adding sap fioro apps to a transport request_How to Implement an SAP Fiori App in S4HANA_Createch

Maintaining Business Catalogs

Catalogs and Groups organize the displayed apps on the SAP Fiori launchpad.

Catalogs are the smallest entities that define the apps you want to assign to your users for selection and authorization. Catalogs contain the following sub-entities:

  • Tiles – they define the appearance of an app launcher tile in the SAP Fiori launchpad;
  • Target Mappings – they define the app to be launched, including any parameters to be passed on.

Create custom catalogs by copying the business catalogs delivered by SAP as templates or samples and adjust them to your needs. You can see the relevant catalogs for this app in the SAP Fiori App Reference Library. For more information, go to http://help.sap.com/s4hana_op_1809, enter Copying Catalogs into the search bar, press Enter, and open the search result with that title.

  1. Launch the SAP Fiori Launchpad Designer in configuration or customizing scope by opening the following URL in your web browser:
    http://<hostname>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?scope=CUST
    31 sap fiori launchpad designer_maintaining business catalogs_How to Implement an SAP Fiori App in S4HANA_Createch
  2. Drag and drop the catalog SAP_FND_BC_MANAGER_T from the left-hand side panel into the copy zone (blue in color). A Copy Catalog dialog box appears.
    32 copy catalog_maintaining business catalogs_How to Implement an SAP Fiori App in S4HANA_Createch
  3. Enter Title and ID for the new catalog and choose Copy.
    Title: My Inbox
    Id: ZSAP_FND_BC_MANAGER_T
    33 copy catalog_maintaining business catalogs_How to Implement an SAP Fiori App in S4HANA_CreatechNote: If you use more than 35 characters, you will get an error. Use transaction for analysis /IWBEP/ERROR_LOG.

  4. A new catalog with the updated details appears on the left-hand side panel, and the tiles of the copied catalog displays in the content area.
    34 my inbox_maintaining business catalogs_How to Implement an SAP Fiori App in S4HANA_CreatechUsing the Launchpad Designer, you can add apps (tiles and target mappings) to your catalogs. You can as well adapt the tiles and target mappings delivered by SAP.
  1. Open the SAP Fiori Launchpad Designer: http://<hostname>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?scope=CUST
    35 my inbox_maintaining business catalogs_How to Implement an SAP Fiori App in S4HANA_Createch
  2. Select the Catalogs view in the top left corner and choose the technical catalog ZSAP_FND_BC_MANAGER_T that contains the app My Inbox - Approve Purchase Requisitions. Drag and drop apps you want to remove from this catalog, from the work area to the top area, where you will see the options to create or remove the apps from the catalog.

36 catalogs_maintaining business catalogs_How to Implement an SAP Fiori App in S4HANA_Createch3. If you need to adjust the appearance of a tile, or other settings of a target mapping, you can use the Configure option.

Maintaining Business Groups

Catalogs and Groups organize the displayed apps on the SAP Fiori Launchpad.

Business Groups define the grouping, sorting order, and general appearance (tile or link) of apps that are initially displayed on the SAP Fiori launchpad entry home page for a user.

  • Groups can reference multiple apps from one or more catalogs;
  • Groups do not grant authorizations;
  • If a user is not authorized for an app provided by the group, the unauthorized app will not appear on the user’s home page.

Groups contain the optional sub-entities:

  • Tiles – the apps that should appear as tiles on the home page, in the order in which they will appear;
  • Links – the apps that should appear as links on the home page, in the order in which they will appear.
  1. Create the new Group ZSAP_FND_BC_MANAGER_T_GRP. Title My Inbox.
    37 create new group_maintaining business groups_How to Implement an SAP Fiori App in S4HANA_Createch38_create group_maintaining business groups_How to Implement an SAP Fiori App in S4HANA_Createch39_create group_maintaining business groups_How to Implement an SAP Fiori App in S4HANA_Createch
  2. Add SAP Fiori apps from your catalogs to the group. Filter by the catalog ZSAP_FND_BC_MANAGER_T_GRP.

40_create group_maintaining business groups_How to Implement an SAP Fiori App in S4HANA_Createch3. Add the app My Inbox - Approve Purchase Requisitions.
41 add title to group my inbox_maintaining business groups_How to Implement an SAP Fiori App in S4HANA_Createch

42 create group_maintaining business groups_How to Implement an SAP Fiori App in S4HANA_Createch

Creating and Assigning Launchpad Catalogs and Groups

In order to provide the user with the UI access to apps and the start authorizations for the activated OData services, this task must be executed on the front-end server as well as the following authorization- and role-related tasks.

  1. Open transaction Role Maintenance (PFCG). Create new single role (FR_FIORI_MYINBOX) and assign the following in the role menu by selecting Add Transaction ->
    • SAP Fiori Tile Group;
    • Catalog Provider Fiori Launchpad Catalogs;
    • Group ID: ZSAP_FND_BC_MANAGER_T_GRP;
    • Optional (if the users should see the tiles in a group already on the SAP Fiori launchpad start page): Type Group, Group ID.

    Alternatively, you can copy the template business role delivered by SAP, which already contains the catalog and group, as sample content to your customer namespace.

    43 role maintenance_creating and assigning launchpad catalogs and groups_How to Implement an SAP Fiori App in S4HANA_Createch44 change roles_creating and assigning launchpad catalogs and groups_How to Implement an SAP Fiori App in S4HANA_Createch

    To automatically enter the OData services, if available:

    • Select the Local Front-End Server radio button.
    • Mark the Include Applications checkbox.
      45 change roles_creating and assigning launchpad catalogs and groups_How to Implement an SAP Fiori App in S4HANA_Createch
  2. Save the role menu, and go to the role authorization, change the authorization data, and adapt the generated authorizations accordingly. Generate the authorization profile and save it.

46 authorization_creating and assigning launchpad catalogs and groups_How to Implement an SAP Fiori App in S4HANA_Createch

Assign Roles to Users

  1. In transaction Role Maintenance (PFCG) on the User tab, assign the role containing the catalogs, groups, and OData start authorizations to a user by specifying the user ID. Thereby, the user has UI access to the apps in the catalogs and the start authorizations for the respective OData services on the front-end server. Execute the app, check missing authorization objects via transaction SU53 and adapt the role by adding missing ones.

47 user comparison_assign roles to users_How to Implement an SAP Fiori App in S4HANA_CreatechLaunch Fiori Launchpad

https://<hostname>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html

48_sap fiori launchpad_launch fiori launchpad_How to Implement an SAP Fiori App in S4HANA_Createch

Figure 3. SAP Fiori Launchpad.

Conclusion

In this article, we looked at how you can plan, configure, and activate an SAP Fiori app and its related OData services. You also learned how to set up the SAP Fiori launchpad to provide user access to the app.

By following this procedure and using the SAP Fiori apps Reference Library you will be able to activate the proper app to tend to your users’ needs and business requirements.

These Articles Could Also Interest You
Author slug - sébastien-castonguay
Sébastien Castonguay
 
Sébastien Castonguay
Posted October 6 2020
Author slug - guillaume-thomas
Guillaume Thomas
 
Guillaume Thomas
Posted August 27 2020
Author slug - omar-olwan