SAP Fiori App Implementation: Standard apps

Overview
Here we will try to summarize standard Fiori App implementation step by step.

SAP Fiori is a new user experience (UX) for SAP software and applications. It provides a set of applications
that are used in regular business functions like work approvals, financial apps, calculation apps and various
self-service apps.
SAP Fiori Apps can be accessed on desktops, Mobile or tablets. These are web-based applications hosted on
SAP-Fiori server (front-end system) and access business data from SAP-ECC (back-end system).

Please note: In case of SAP-Hana server, Back-end/front-end system is same system.

There are two types of SAP-Fiori app implementations:
1. Standard Apps
 Implementation of those business apps, which are released by SAP. These are categorized as
Transnational, Fact-sheets and Analytical apps etc.
2. Customized Apps
 As per business requirement, a complete custom fiori app can be implemented which combines below
object development:
1. a UI5 application (Java-script/Xml-view based )
2. Odata Service for data interchange between app (front-end system) and sap-ecc(backend)
3. App configuration objects like Catalog/Title/Group/PFCG-roles on front-end system for accessibility
in SAP Fiori Launchpad
4. A detailed blog will be updated soon for customized apps

Pre-requisites:
1. SAP ECC Server (Back-end)
2. SAP Fiori Server (Front-end)
3. SAP Fiori Launchpad Url:
 http://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
4. SAP Fiori Designer Url:
 http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
Standard SAP Fiori App implementation steps:
Source of App Implementation Details:

 SAP provides a complete implementation information for each standard app, which details can be
found in below SAP-App Library link:
 https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/index.html#/home

Each standard Fiori app consist of below components:

1. Software Components
 Back-End Software Components
 Front-End Software Components
2. Back-End Components
 Odata Service
 Back-End Authorization Role (PFCG)
3. Front-End Components
 SAP UI5 Application
 Odata Service Registration
 Business Catalog
1. Tile
2. Target Mapping
3. Semantic Object
4. Launchpad Role
 Business Group
 Front-End Business Role (PFCG)

 Relationship between Front-end components can be understood with help of below image:

Example: App Implementation: “Approve Purchase Order”

Lets take an example of standard App Implementation: “Approve Purchase Order”

1. Get Component details from below implementation link of app “Approve Purchase Order”
 https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/index.html#/detail/Apps(‘F0402’)/
W13
 or if older version required
 https://help.sap.com/fiori_bs2013/helpdata/en/57/7F3C52C638B610E10000000A44176D/frameset.ht
m
 As per older version reference, below objects found, which needs to be configured in respective
systems:



Component-Name Technical Name System

1 Front-End Software Cmp UIX01EAP 100 (0008 ) Front-end

2 Back-End Software Cmp GBAPP002 600 (0010 ) Back-end

3 SAP UI5 Application MM_PO_APV Front-end

4 OData Service GBAPP_POAPPROVAL Back-end

5 PFCG Role SAP_MM_PO_APV_APP Back-end

6 Business Catalog SAP_MM_BC_BUYER_X1 Front-end

7 Business Group SAP_MM_BCG_BUYER_X1 Front-end

2. Software Component installation

 Get front-end/back-end software component details of app and take help of Basis team to install in
respective system
 Post-installation cross check software component availability in respective system:
 Go to SAP Logged in main page -> Menu ‘System’ -> ‘Status’ -> ‘SAP System Data’ -> ‘Product
Version’ click on button ‘Component’ -> Check Component

3. Enable App for Access in SAP Fiori Launchpad

 Front-End Server: Activate ICF Services
 Activate SAP UI5 Application
 T-code: SICF
 Path: /sap/bc/ui5_ui5/sap/mm_po_apv
 Activate Odata Service
 T-code: SICF
 Path: /sap/opu/odata/sap/gbapp_poapproval/
 Go to respective paths -> right click -> Activate
 Front-End Server: Register Odata Service
 Pre-requisites: System Alias Maintainance
 In SAP-Fiori (Front-End) System, configure ‘system alias‘ Alias for SAP-ECC (Back-End) System.
 Go to T-code ‘SPRO’ -> ‘SAP Reference IMG’ -> SAP Customizing Implementation Guide -> SAP
NetWeaver -> SAP Gateway -> OData Channel -> Configuration -> Connection Settings -> SAP
Gateway to SAP System -> Manage SAP System Aliases


 Enter RFC-Destination and check boxes ‘Local GW’ & ‘For Local App’ should be unchecked
 RFC-Destination should have enabled ‘Current-User’ logon settings



 Odata Service registration:
 T-Code: /n/iwfnd/maint_service
 Steps to register:
 Go to above t-code -> click on button ‘Add Service’ ->


 in next window select Back-end system alias -> click on display button ‘Get Service’

 To add service, select service row from grid -> click on button ‘Add Selected Service’


 Next One pop-up comes, where select package as $TMP -> click ok


 Once service gets registered, we can see it in registered service list of t-code ‘/n/iwfnd/maint_service’
havine zprefix in name as ‘ZGBAPP_POAPPROVAL’


 Front-End Server: Fiori Designer object verification
 Go to Fiori Desginer url
 http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
 Check availability of ‘Business Catalog and Tile ‘Approve Purchase Orders’


 Click on Tile ”Approve Purchase Orders’, next window shows this Tile having semantic object
‘PurchaseOrder’ with action ‘approve’



 Check availability of ‘Target Mapping
 Get TargetMapping details which is having same semantic object & action

 Click on status bar button ‘Configure’ to open configured details in selected target mapping


 Here we found Launchpad Role ‘UIX01MM’ having alias ‘ApprovePurchaseOrders’
 which we can verify from SAP-Fiori’s t-code LPD_CUST


 As we can seen UI5 Application path in abaove screen
 Thus we can summarize, how objects linking as:
 Business Catalog -> Tile -> Semantic Object -> Target Mapping -> Launchpad Role -> UI5
Application

4. Role assignment to user-id
 Back-End Authorization Role
 In sap-ecc assign role ‘SAP_MM_PO_APV_APP’ to user-id for e.g. ‘user1’
 Front-End Authorization Role
 Here user-id ‘user1’ will have access to two PFCG role, which are:
1. App’s Front-End Business Role ‘SAP_MM_BCR_BUYER_X1’
2. A custom PFCG Role named as ‘Common_FioriApp_Role’, which is required for FioriLauchpad page
accessibility, having below object access:
 R3TR IWSV /UI2/PAGE_BUILDER_PERS 0001
 R3TR IWSG ZPAGE_BUILDER_PERS_0001
 R3TR IWSV /UI2/INTEROP 0001
 R3TR IWSG ZINTEROP_0001
 R3TR IWSV /UI2/LAUNCHPAD 0001
 R3TR IWSG ZTRANSPORT_0001


3. Some times, while accessing app, we got Odata Service error, which can be checked in t-code
‘/n/iwfnd/error_log’, if this case arises, then we need to create a pfcg role which will have TADIR
Service access of app “Approve Purchase Order”
 To create a new PFCG role, Go to T-code PFCG -> Enter name -> Tab ‘Menu’ -> click on button
‘Transaction’ -> ‘Authorization Default’

–
 -> in new pop-up window select ‘TADIR Service’ -> R3TR -> IWSG SAP Gateway: Service Groups
Metadata -> Service from F4 help


5. Apart from this, perform configuration tasks in the back-end system as
mentioned in document link:
 https://help.sap.com/fiori_bs2013/helpdata/en/57/7F3C52C638B610E10000000A44176D/frameset.ht
m