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.

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.

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.

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

On App Details, select PRODUCT FEATURES and check if the app fits your business requirements.

On App Details, select IMPLEMENTATION INFORMATION.

Select Important SAP Notes and check related notes carefully.

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

Select Configuration and check the technical details. You must keep this page opened for reference when implementing the app.

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

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

   

Configuring a Login Screen for the Launchpad

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.

4. Testing the Fiori Launchpad URL:
https://<hostname>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html

Clearing All Fiori Caches

1. Run transaction /UI2/INVAL_CACHES to invalidate all UI2 caches.
   
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.
   

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

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

3. In the Select System Alias for Activation task, enter the System Alias. Example: LOCAL
4. 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.
5. 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.

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

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

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
   
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.
   
3. Enter Title and ID for the new catalog and choose Copy.
   Title: My Inbox
   Id: ZSAP_FND_BC_MANAGER_T
   Note: 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.
   Using 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
   
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.

3. 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.
   
2. Add SAP Fiori apps from your catalogs to the group. Filter by the catalog ZSAP_FND_BC_MANAGER_T_GRP.

3. Add the app My Inbox - Approve Purchase Requisitions.

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.

   

   To automatically enter the OData services, if available:

   • Select the Local Front-End Server radio button.
   • Mark the Include Applications checkbox.
     
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.

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.

Launch Fiori Launchpad

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

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.