SAP Fiori – Custom App Implementation

Overview SAP Fiori – Custom App Implementation

We can develop a complete customized Fiori Apps as per client’s custom business requirements

Customized App is been hosted on SAP-Fiori server (front-end system).

And for business data accessibility, it integrates with SAP or Non-SAP system.

For standard SAP Fiori App implementation, one can refer below blog:

• SAP Fiori – Standard App Implementation

Components of Customized Fiori apps:

Below components needs to be developed and configured:

Front-End Components:

1. SAP UI5 Application
2. Odata Service definition & its registration
3. Semantic Object
4. Launchpad Role
5. App accessibility in Fiori Launchpad
   1. Business Catalog
      1. Tile
      2. Target Mapping
   2. Business Group
6. Front-End Business Role (PFCG)

Back-End Components:

1. For data access from SAP System
   1. RFC
2. For data access from Non-SAP System
   1. Web-services etc.

Pre-requisites:

• SAP or Non-SAP system’s data interchange technique like RFC, webservice etc.
• Eclipse with SAP UI5 Development Tool Kit
• SAP Fiori Server (Front-end)
• SAP Fiori Launchpad Url:
  • https://:/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
• SAP Fiori Designer Url:
  • https://:/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
• Important T-codes of SAP Fiori Server

  • 	Front-End server (T-code)	Description
    1	SICF  (Path: /sap/bc/ui5_ui5/sap/)	UI5 Application Path
    2	SICF  (Path: /sap/opu/odata/sap/)	Odata Service Path
    3	SEGW	Create Odata Service
    4	/n/iwfnd/maintain_service	Odata Service Registration
    5	/n/iwfnd/gw_client	Test Odata Service
    6	/n/iwfnd/error_log	Error Log
    7	SE38 (Report: /UI5/UI5_REPOSITORY_LOAD)	To upload/Download/Delete UI5 Application
    8	/n/UI2/SEMOBJ	Semantic objects by SAP
    9	LPD_CUST	Launchpad Role
    10	PFCG	PFCG Role

Steps to create/configure a custom Fiori App:

To create a custom Fiori app, we need to create and configure below components in SAP-Fiori (front-end) server:

[I]    Create UI5 Application in Eclipse

• We create a sap UI5 application using Eclipse, detailed steps can be referred from following blog link:
• Create a Fiori app using Eclipse
• SAP Fiori – Consume OData Service, CSS, i18n properties in UI5 Application

[II]   Deploy UI5 Application in SAP-Fiori (front-end) server

• Once SAP-UI5 application ‘ZTEST_UI5’ gets developed, we need to host this app in SAP-Fiori (front-end) server, which detailed steps can be referred from following blog link:
• Deploy a Fiori app in SAP Fiori Server

[III]  Create custom Odata Service

• A custom Odata Service for business data interchange between UI5 App and SAP or Non-SAP system, can be created in SAP-Fiori server.
• Its detailed steps can be referred from following blog link:
• Create OData Service

[IV] Register custom Odata Service in SAP-Fiori (front-end) server

• Once custom Odata service gets created, we need to activate and register this service for accessibility in UI5 application.
• Its detailed steps can be referred from following blog link:
• Register OData Service

[V]   App access configuration in SAP-Fiori-Launchpad

• To access ui5 app in SAP-Fiori-Launchpad, below configurations needs to be done:
  1. Semantic Object:
  2. Launchpad Role
  3. Business Catalog
  4. Business Group
  5. App’s PFCG Role
• A detailed steps to configure above objects for app accessibility, can be referred from following blog link:
• Fiori app configuration in SAP Fiori Launchpad

Testing of UI5 app in SAP-Fiori-Launchpad:

Login to SAP-Fiori-Launchpad using below details

• Url:        https://:/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
• user-id   for e.g. ‘DILIPP‘ which has app specific role

SAP-Fiori-Launchpad url can be accessed

• from desktop or any device’s internet browser (like Internet Explorer, Google Chrome, Mozilla etc.)
• from mobile device using SAP-Fiori-Client, which can be downloaded from Mobile’s Play-Store app

Once we access url in browser, we see below login page, where credentials need to be provided:

Click on ‘Log On’ button, which opens SAP-Fiori’s Launchpad page, where we can see our configured ‘Tile’ of UI5 application:

When we click on Tile ‘Test App‘, it opens SAP-UI5 application as below: