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:
Standard Apps
Implementation of those business apps, which are released by SAP. These are categorized as Transnational, Fact-sheets and Analytical apps etc.
Customized Apps
As per business requirement, a complete custom fiori app can be implemented which combines below object development:a UI5 application (Java-script/Xml-view based )
Odata Service for data interchange between app (front-end system) and sap-ecc(backend)
App configuration objects like Catalog/Title/Group/PFCG-roles on front-end system for accessibility in SAP Fiori Launchpad
A detailed blog will be updated soon for customized apps
Pre-requisites:
SAP ECC Server (Back-end)
SAP Fiori Server (Front-end)
SAP Fiori Launchpad Url:
http://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
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:
Fiori Apps Library
Each standard Fiori app consist of below components:
Software ComponentsBack-End Software Components
Front-End Software Components
Back-End ComponentsOdata Service
Back-End Authorization Role (PFCG)
Front-End ComponentsSAP UI5 Application
Odata Service Registration
Business CatalogTile
Target Mapping
Semantic Object
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”
Get Component details from below implementation link of app “Approve Purchase Order”Fiori Apps Library
or if older version required
https://help.sap.com/fiori_bs2013/helpdata/en/57/7F3C52C638B610E10000000A44176D/frameset.htm
As per older version reference, below objects found, which needs to be configured in respective systems:
Component-Name Technical Name System
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
Enable App for Access in SAP Fiori Launchpad
Front-End Server: Activate ICF Services
Activate SAP UI5 ApplicationT-code: SICF
Path: /sap/bc/ui5_ui5/sap/mm_po_apv
Activate Odata ServiceT-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 verificationGo 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 MappingGet 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
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:App’s Front-End Business Role ‘SAP_MM_BCR_BUYER_X1’
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
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
Apart from this, perform configuration tasks in the back-end system as mentioned in document link:
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:
Standard Apps
Implementation of those business apps, which are released by SAP. These are categorized as Transnational, Fact-sheets and Analytical apps etc.
Customized Apps
As per business requirement, a complete custom fiori app can be implemented which combines below object development:a UI5 application (Java-script/Xml-view based )
Odata Service for data interchange between app (front-end system) and sap-ecc(backend)
App configuration objects like Catalog/Title/Group/PFCG-roles on front-end system for accessibility in SAP Fiori Launchpad
A detailed blog will be updated soon for customized apps
Pre-requisites:
SAP ECC Server (Back-end)
SAP Fiori Server (Front-end)
SAP Fiori Launchpad Url:
http://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
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:
Fiori Apps Library
Each standard Fiori app consist of below components:
Software ComponentsBack-End Software Components
Front-End Software Components
Back-End ComponentsOdata Service
Back-End Authorization Role (PFCG)
Front-End ComponentsSAP UI5 Application
Odata Service Registration
Business CatalogTile
Target Mapping
Semantic Object
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”
Get Component details from below implementation link of app “Approve Purchase Order”Fiori Apps Library
or if older version required
https://help.sap.com/fiori_bs2013/helpdata/en/57/7F3C52C638B610E10000000A44176D/frameset.htm
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
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
Enable App for Access in SAP Fiori Launchpad
Front-End Server: Activate ICF Services
Activate SAP UI5 ApplicationT-code: SICF
Path: /sap/bc/ui5_ui5/sap/mm_po_apv
Activate Odata ServiceT-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 verificationGo 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 MappingGet 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
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:App’s Front-End Business Role ‘SAP_MM_BCR_BUYER_X1’
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
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
Apart from this, perform configuration tasks in the back-end system as mentioned in document link: