Personal Insights
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:
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
- Business Catalog
- Tile
- Target Mapping
- Business Group
- Business Catalog
- Front-End Business Role (PFCG)
Back-End Components:
- For data access from SAP System
- RFC
- For data access from Non-SAP System
- 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:
- Semantic Object:
- Launchpad Role
- Business Catalog
- Business Group
- 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:
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
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:
Thanks & Regards
Dilip….
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.
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
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.
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.
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
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
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)
and respective controller where you bind the item
Here, plz note, the oModel has array listItems which has element MATNR.
Thanks & Regards,
Dilip
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
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
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
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.
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:
Note: Before accessing it on device using above, just make sure device has internet connection.
Thanks & Regards,
Dilip
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
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?
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:
So, in summary, usuall Fiori-app development you need an dedicated IDE, but it doesn't have to be in the cloud.
BR, Aleks
BR, Aleks