Skip to Content

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:

  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/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

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

To report this post you need to login first.

2 Comments

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

  1. Former Member

    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

    (0) 
    1. Dilip Kumar KrishnaDev Pandey Post author

      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:

      1. 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
      2. 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
      3. 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….

       

      (0) 

Leave a Reply