Skip to Content

Overview

Here we will try to summarize standard Fiori App implementation step by step.

SAP Fiori is a new user experience (UX) for SAP software and applications. It provides a set of applications that are used in regular business functions like work approvals, financial apps, calculation apps and various self-service apps.

SAP Fiori Apps can be accessed on desktops, Mobile or tablets. These are web-based applications hosted on SAP-Fiori server (front-end system) and access business data from SAP-ECC (back-end system).

Please note: In case of SAP-Hana server, Back-end/front-end system is same system.

There are two types of SAP-Fiori app implementations:

  1. Standard Apps
    • Implementation of those business apps, which are released by SAP. These are categorized as Transnational, Fact-sheets and Analytical apps etc.
  2. Customized Apps

Pre-requisites:

  1. SAP ECC Server (Back-end)
  2. SAP Fiori Server (Front-end)
  3. SAP Fiori Launchpad Url:
    • http://<host>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
  4. SAP Fiori Designer Url:
    • http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
  5. Important T-codes
    • SrNo 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 /n/iwfnd/maintain_service Odata Service Registration
      4 /n/UI2/SEMOBJ_SAP Semantic objects by SAP
      5 /n/iwfnd/error_log Error Log
      6 LPD_CUST Launchpad Role
      7 PFCG PFCG Role

 

Standard SAP Fiori App implementation steps:

Source of App Implementation Details:

Each standard Fiori app consist of below components:

  1. Software Components
    • Back-End Software Components
    • Front-End Software Components
  2. Back-End Components
    • Odata Service
    • Back-End Authorization Role (PFCG)
  3. Front-End Components
    • SAP UI5 Application
    • Odata Service Registration
    • Business Catalog
      1. Tile
      2. Target Mapping
      3. Semantic Object
      4. Launchpad Role
    • Business Group
    • Front-End Business Role (PFCG)
  • Relationship between Front-end components can be understood with help of below image:

 

Example: App Implementation: “Approve Purchase Order”

Lets take an example of standard App Implementation: “Approve Purchase Order”

  1. Get Component details from below implementation link of app “Approve Purchase Order”
    • https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/index.html#/detail/Apps(‘F0402’)/W13
    • or if older version required
    • https://help.sap.com/fiori_bs2013/helpdata/en/57/7F3C52C638B610E10000000A44176D/frameset.htm
    • As per older version reference, below objects found, which needs to be configured in respective systems:
    • Component-Name Technical Name System
      1 Front-End Software Cmp UIX01EAP 100 (0008 ) Front-end
      2 Back-End Software Cmp GBAPP002 600 (0010 ) Back-end
      3 SAP UI5 Application MM_PO_APV Front-end
      4 OData Service GBAPP_POAPPROVAL Back-end
      5 PFCG Role SAP_MM_PO_APV_APP Back-end
      6 Business Catalog SAP_MM_BC_BUYER_X1 Front-end
      7 Business Group SAP_MM_BCG_BUYER_X1 Front-end
  2. Software Component installation

    • Get front-end/back-end software component details of app and take help of Basis team to install in respective system
    • Post-installation cross check software component availability in respective system:
      • Go to SAP Logged in main page -> Menu ‘System’ -> ‘Status’ -> ‘SAP System Data’ -> ‘Product Version’ click on button ‘Component’ -> Check Component
  3. Enable App for Access in SAP Fiori Launchpad

    • Front-End Server: Activate ICF Services

      • Activate SAP UI5 Application
        • T-code: SICF
        • Path:     /sap/bc/ui5_ui5/sap/mm_po_apv
      • Activate Odata Service
        • T-code:  SICF
        • Path:     /sap/opu/odata/sap/gbapp_poapproval/
      • Go to respective paths -> right click -> Activate
    • Front-End Server: Register Odata Service

      • Pre-requisites: System Alias Maintainance
        • In SAP-Fiori (Front-End) System, configure ‘system alias‘ Alias for SAP-ECC (Back-End) System.
          • Go to T-code ‘SPRO’ -> ‘SAP Reference IMG’ -> SAP Customizing Implementation Guide -> SAP NetWeaver -> SAP Gateway -> OData Channel -> Configuration -> Connection Settings -> SAP Gateway to SAP System -> Manage SAP System Aliases
          • Enter RFC-Destination and check boxes ‘Local GW’ & ‘For Local App’ should be unchecked
          • RFC-Destination should have enabled ‘Current-User’ logon settings
      • Odata Service registration:
        • T-Code:  /n/iwfnd/maint_service
        • Steps to register:
          • Go to above t-code -> click on button ‘Add Service’ ->
          • in next window select Back-end system alias -> click on display button ‘Get Service’
          • To add service, select service row from grid -> click on button ‘Add Selected Service’
          • Next One pop-up comes, where select package as $TMP -> click ok
        • Once service gets registered, we can see it in registered service list of t-code ‘/n/iwfnd/maint_service’ havine zprefix in name as ‘ZGBAPP_POAPPROVAL’
    • Front-End Server: Fiori Designer object verification
      • Go to Fiori Desginer url
        • http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
      • Checking Business Catalog, Tile and Target Mapping
        • Check availability of ‘Business Catalog and Tile ‘Approve Purchase Orders’
        • Click on Tile ”Approve Purchase Orders’,
        • next window has configured semantic object as ‘PurchaseOrder‘ with action ‘approve
        • Target Mapping’
        • click Tab icon ‘Target Mapping’ -> select entry with semantic object ‘PurchaseOrder‘ and action ‘approve’
        • Click on status bar button ‘Configure‘ to view configured details in selected target mapping
        • Here we can see configured Launchpad Role ‘UIX01MM’ having alias ‘ApprovePurchaseOrders’
    • Checking Launchpad Role
      • we can verify from SAP-Fiori’s t-code LPD_CUST
      • As we can seen UI5 Application path in abaove screen
      • Thus we can summarize, how objects linking as:
      • Business Catalog -> Tile -> Semantic Object -> Target Mapping -> Launchpad Role -> UI5 Application
    • Checking Semantic Object
      • Semantic Object availability can be check in front-end server t-code ‘/UI2/SEMOBJ_SAP ‘
  1. Role assignment to user-id

    • Back-End Authorization Role
      • In sap-ecc assign role ‘SAP_MM_PO_APV_APP’ to user-id for e.g. ‘user1’
    • Front-End Authorization Role
      • Here user-id ‘user1’ will have access to two PFCG role, which are:
        1. App’s Front-End Business Role ‘SAP_MM_BCR_BUYER_X1’
        2. A custom PFCG Role named as ‘Common_FioriApp_Role’, which is required for FioriLauchpad page accessibility, having below object access:
          • R3TR IWSV /UI2/PAGE_BUILDER_PERS 0001
          • R3TR IWSG ZPAGE_BUILDER_PERS_0001
          • R3TR IWSV /UI2/INTEROP 0001
          • R3TR IWSG ZINTEROP_0001
          • R3TR IWSV /UI2/LAUNCHPAD 0001
          • R3TR IWSG ZTRANSPORT_0001
        3. Some times, while accessing app, we got Odata Service error, which can be checked in t-code ‘/n/iwfnd/error_log’, if this case arises, then we need to create a pfcg role which will have TADIR Service access of app “Approve Purchase Order”
          • To create a new PFCG role, Go to T-code PFCG -> Enter name -> Tab ‘Menu’ -> click on button ‘Transaction’ -> ‘Authorization Default’ –
          • -> in new pop-up window select ‘TADIR Service’ -> R3TR -> IWSG SAP Gateway: Service Groups Metadata -> Service from F4 help
  2. Apart from this, perform configuration tasks in the back-end system as mentioned in document link:

    • https://help.sap.com/fiori_bs2013/helpdata/en/57/7F3C52C638B610E10000000A44176D/frameset.htm

 

To report this post you need to login first.

8 Comments

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

      1. Former Member

        hi dilip,

        nice  documentation.

        its kind request that can you please help in activate application named : F0348A (Purchase Order ).

        i read your document but i have some question regarding  F0348A (Purchase Order ).

        (0) 
        1. Dilip Kumar KrishnaDeo Pandey Post author

          Hi,

          For  F0348A (Purchase Order ), you can get component details from following link:

          Regards,

          Dilip

           

          (0) 
  1. aye chan moe

     

    Hi Dilip,

    I am new to SAPUI5 for my application.I’ve already created Login Form using Eclipse. But, in my Login.controller.js, I just only display logon information with MessageBox. I tested like this because this is my first time experience with sapui5 application. But now, I want to fetch a data from HANA database. I mean when I enter username and password in login must much with Hana database field value.If match, I’ll go to next page.I learned some blog posts using HANA OData Services to retrieve and update data my Hana Database. But, I didn’t get clear for login handling.Could you please give me the tutorials or right directon to achieve this login handling in sapui5 application with Hana Database. If asking for tutorials is off topic, I’m really sorry. I’m urgently need to solve this.
    Best Regards,
    Chan

    (0) 
    1. Binh Thai

      Hi Chan, I understand that you want to get to know more about UI5 but you won’t learn anything with that path.

      I recommend you to attend some course in Open SAP, to learn at least the concept and how UI5 and HANA work.

      For your specific question, if the database is HANA then you can use SQLScript to do the user/password check procedure. OData service is like ABAP View, a data model.

      And yes, to know that, you should read or attend some course. There is no short path IMHO.

      Regards,

      Binh

      (2) 
  2. AC M

    Hi Binh Thai,

    Thank you very much for your quick response.

    When I learn some blog post during last two weeks, I found that SAPUI5 application use OData to

    display and update data in backend.

    I understood like that If I want to validate the logon credential, I have to develop a service to hand that request.

    According to MVC architecture, Model can be three services (OData Abap Service, OData Hana Services and OData External Services).

    So that’s why I talked about Hana OData Service.

    You’re right. I need to attend some course to learn the concept how UI5 and HANA work.

    Now I’m ambiguous.Am I missing something.

    If I can use SQLScript to do the user/password check procedure, I’ll have to learn more about using sqlscript.

    I really appreciate your help.

    Best Regards,
    Chan

    (0) 

Leave a Reply