Personal Insights

Dilip Kumar Krishnadev Pandey

November 19, 2017 3 minute read

SAP Fiori Custom App development

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:

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

Back-End Components:

For data access from SAP System
1. RFC
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:

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:

17 Comments

You must be Logged on to comment or reply to a post.

Martin Gaievski

March 11, 2018 at 10:23 pm

Hi Dilip,

First of all - thank you for such details and helpful blog. This info and the way how you put it - it's really really awesome, appreciate it a lot.

I'm from internal SAP team. I follow your steps and created and registered an app. When I use direct URL the app works, but without the FLP header segment, exactly like you see it in Eclipse web-preview. I think that means that app is deployed and activated successfully.

Also, I've registered a tile (and all related stuff like semantic object, catalog, group etc.) in my FLP. However, I have an error while launching my app from the FLP in dev system. The pop-up says "Could not open app. Please try again later.". Following is in the dev tools console, ztaxcopilot2 is my app that I'm trying to develop:

Failed to load resource: the server responded with a status of 404 (NOT FOUND)
core-min-1.js:68 2018-03-11 15:01:50.672600 failed to load Javascript resource: ztaxcopilot2/Component-preload.js - sap.ui.ModuleSystem
c @ core-min-1.js:68
core-min-1.js:68 2018-03-11 15:01:51.385600 The issue is most likely caused by application ztaxcopilot2. Please create a support incident and assign it to the support component of the respective application. - Failed to load UI5 component with properties: '{
"name": "ztaxcopilot2",
"self": {
"name": "ztaxcopilot2"
},
"messages": [
{
"severity": "error",
"text": "App ztaxcopilot2 has errors and may not run correctly; see SAP Note 2364579"
},
{
"severity": "error",
"text": "Error in app component ztaxcopilot2: No descriptor was found"
}
],
"asyncHints": {
"libs": [
"sap.ca.scfld.md",
"sap.ca.ui",
"sap.me",
"sap.ui.unified"
],
"preloadBundles": [
"sap/fiori/core-ext-light-0.js",
"sap/fiori/core-ext-light-1.js",
"sap/fiori/core-ext-light-2.js",
"sap/fiori/core-ext-light-3.js"
],
"waitFor": []
},
"url": "/sap/bc/ui5_ui5/sap/ztaxcopilot2/~EC8FA647D524B332C22369CD20F3614F~C",
"id": "application-ztest_sem-display-component",
"componentData": {
"startupParameters": {},
"technicalParameters": {}
},
"async": true
}'. Error likely caused by:
TypeError: Cannot read property 'getMetadata' of undefined
at https://uyt902-er9500.wdf.sap.corp/sap/bc/ui5_ui5/ui2/ushell/resources/~20180309080100~/sap/fiori/core-min-2.js:24:25133
at <anonymous> ztaxcopilot2
c @ core-min-1.js:68
core-min-1.js:68 2018-03-11 15:01:51.386500 Failed to load UI5 component for navigation intent #ztest_sem-display - TypeError: Cannot read property 'getMetadata' of undefined sap.ushell.renderers.fiori2.Shell.controller

I've noticed that you are not creating manifest.json in your app. Initially I also didn't have it, later I've added one from some project from Web IDE, but still error is the same.

Do you know what can be wrong?

Thank you in advance,

Martin

Dilip Kumar Krishnadev Pandey

Blog Post Author

March 22, 2018 at 1:33 pm

Dear Martin,

Sorry for delayed response, I was too much busy in my current project….

Till this time, I hope issue, already, might get sorted out.

If not, you can consider following comments:

About manifest.json file in app
- This type of file is not present in my any of the app.
  - Instead default SAP-UI5 App project structure (using eclipse) has one folder /Project/WebContent/META-INF/MANIFEST.MF
Please try to follow SAP-UI5 app’s project structure with which I have never seen any such error as of you mentioned.
- Blog content reference: ” [I] Create UI5 Application in Eclipse“
About Error: “Could not open app. Please try again later.”
- Try to re-deploy your app in fiori server with new ui5 app name
- and post that, please cross verify app specific FLP config as below:
  - UI5 App in t-code sicf
  - Semantic object t-code /n/UI2/SEMOBJ
  - If your are using LaunchPadRole, check its details or instead 1st you try to give direct ui5 app url in target maps of tile
  - Catalog/Tile/TargetMap/Group/Role
  - then access the app, you should not get any error.

Thanks & Regards

Dilip….

SWATI KIRAN

March 8, 2019 at 6:05 am

I Created a FIORI app in SAP Web IDE full stack ( trial version on hanatrial.ondemand.com). Can I deploy that app in SAP ? I see you have given steps to Deploy an app created in Eclipse. I have app in Web Ide. I tried by right clicking on Project created on Web Ide and selecting Deply option. But I don't see any dropdown in System field.

Dilip Kumar Krishnadev Pandey

Blog Post Author

March 8, 2019 at 6:54 am

Hi Swati,

1st !! Happy Women's Day to you.......

If you want to deploy from SAP-WebIDe directly, then first you have to link it with SAP-Fiori server,

either, you can import you webContent folder in SAP-Fiori using t-code SE38 '/UI5/UI5_REPOSITORY_LOAD' (as given in above blog).....

Regards,

Dilip

SWATI KIRAN

March 12, 2019 at 7:51 pm

Thanks a Lot for your reply. I don't know why i did not get a notification email that you have replied.

So I am setting up everything in our SAP system. I created launchpad and other configurations needed. All services are active. ( we just upgraded to EHP 8 as below). And I have an app created in Web Ide. i am not able to connect both. somehow I cannot see data connection option in my Web IDe editor.

SWATI KIRAN

March 20, 2019 at 5:14 pm

I visited your blogs many times and finally able to implement a custom app. There were some config missing in Basis side, which I did by checking other sites. your blogs are very helpful and precise. So thanks a lot for posting these blogs.

Dilip Kumar Krishnadev Pandey

Blog Post Author

March 22, 2019 at 6:38 am

Nice to hear it....let me know in case of further queries....whenever I'll get time....will try to provide some input....

Regards,

Dilip

Vinod Iyer

August 5, 2019 at 11:26 am

Hi Dilip,

I have created a FIORI App as per the steps mentioned in your blog.

When I am clicking on ODataSrv button, only blank rows are coming whereas the material code values are not getting displayed.

Can you please guide on this.

Regards,

Vinod Iyer

Dilip Kumar Krishnadev Pandey

Blog Post Author

August 8, 2019 at 7:02 am

Hi Vinod,

There is data binding issue in your list. You can refer below blog:

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/

Check XML control (like below)

			<List id="idList1" mode="{device>/listMode}" items="{/listItems}">
				<StandardListItem title="{MATNR}" />
			</List>

and respective controller where you bind the item

		var list = this.getView().byId("idList1");
		list.setModel(oModel);

Here, plz note, the oModel has array listItems which has element MATNR.

Thanks & Regards,

Dilip

Vinod Iyer

August 9, 2019 at 6:41 am

Hi Dilip,

Thanks for your help.

The issue was in the Entity Type MaterialList, the field used was MATERIAL. This I changed to MATNR and then I could see the Material No's is the application.

Regards,

Vinod Iyer

Ashish Goswami

October 2, 2019 at 8:15 am

Hi Dilip,

We are facing custom apps functionality in I pads / Mobiles the app shows empty screen after calling and these same custom apps are working fine in Laptops and in desktops. Please do suggest me on this it will be very helpful to us. Kindly please provide your contact number if possible.

Regards,

Sunilkumar

7799676050

Dilip Kumar Krishnadev Pandey

Blog Post Author

October 3, 2019 at 5:22 am

Hi Ashish,

If custom apps are accessible using FLP (Fiori Launchpad) page for one user-id, then there is no issue w.r.t. app accessibility.

You may have accessibility issue of the FLP page when u try to access it on internet (outside org network). Please check this with respective NW team.

Thanks & Regards,

Dilip

Ashish Goswami

October 3, 2019 at 7:17 am

Hi Dilip,

We are accessible custom apps only in Desktops and in Laptops with in organization or outside.The issue we are facing is these custom apps what we are able to access in Laptops and Desktops na those we are unable to access from I pads and in Mobiles.

Dilip Kumar Krishnadev Pandey

Blog Post Author

October 4, 2019 at 10:30 am

Hi Ashish,

If your FLP (having custom app) is accessible over internet from any browser (of desktop/Laptop), then same can be from Mobile either via two methods:

SAP FIORI CLIENT (recommended one, can be download from 'Play Store')
or Browser

Note: Before accessing it on device using above, just make sure device has internet connection.

Thanks & Regards,

Dilip

Pavani Priya

February 8, 2022 at 8:50 am

Hi Dilip,

I am facing the error "App could not be opened because the SAP UI5 component of the application could not be loaded. Failed to load UI5 component for navigation intent "#Object-action"" when clicks on app on FLP.

Here the app is configured by using Semantic object navigation. Application type is 'SAP UI5 FIORI app'. The node is activated in SICF, but facing the above issue.

Could you please help me on this?

Best Regards,

Pavani Priya

Steven Foo

April 1, 2022 at 2:35 am

Sorry we are new to Fiori Apps development.

Could we develop Fiori Apps inside S/4 HANA instead of using business application studio @ SAP BTP ?

What are the advantages and disadvantages?

Aleksandar Mijailovic

April 1, 2022 at 3:21 pm

Dear Steven,

tricky question. Usually, one would develope Fiori apps using an IDE like SAP WEB IDE or SAP BAS, which are both cloud based (e.g. services of SAP BTP), or, for WEB IDE, there is an on-premise version to install locally, or for BAS, one could take VSCode to be installed locally, or using even Eclipse (like in the old days 2013-2015/16, before SAP River IDE or so was introduced...). So one would in general need a tool outside of the SAP-system. Having said that, I omit the following:

SAPUI5 apps are BSP applications. One can even try open them using SE80. So in principle, you could even create/edit them using SE80 (never tried that out, good luck with it to do it from scratch!)
in S/4Hana Cloud environment, you can go to custom business objects app, and create a UI, e.g. a Fiori-App. There you go: you have created an app without using an specifc IDE, from within the S/4Hana (Cloud) System
In Any-Prem: even if now the tendency is to go low-code / no-code, when you are using RAP, you still need an IDE to create an app that can be persisted. The preview itself is not suffificient.

So, in summary, usuall Fiori-app development you need an dedicated IDE, but it doesn't have to be in the cloud.

BR, Aleks

Personal Insights

SAP Fiori Custom App development

Overview:

Components of Customized Fiori apps:

Pre-requisites:

Steps to create/configure a custom Fiori App:

Testing of UI5 app in SAP-Fiori-Launchpad:

Assigned Tags