SAP Fiori Custom App development

[dilipkkp2412]

Overview:

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:
  
  
  
  • 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
  
  
  
  


• 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/maint_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:        http://<host>:<port>/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: