Skip to Content

Overview

  • Once SAP UI5 app has been deployed in SAP Fiori (Front-End) server, we need to do some configurations for accessibility of this app in SAP Fiori Launchpad.
  • SAP Fiori launchpad is a shell that hosts SAP Fiori apps, and provides the apps with services such as navigation, personalization, embedded support, and application configuration.
  • SAP Fiori launchpad is the entry point to SAP Fiori apps on mobile and desktop devices.
  • In this blog, we will com to know about steps to configure any custom UI5 for SAP Fiori launchpad access.
  • This blog is part of below parent blog:

 

Pre-requisites:

  • 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

Steps of Configuration:

In SAP-Fiori Launchpad, a SAP-UI5 application get accessed using following flow of components:

[1] Create Semantic Object in SAP Fiori Server (Front-end) server

  • T-code:   /n/UI2/SEMOBJ
  • Steps:
    • Semantic object with which we link ‘Business Tile‘ and ‘Target Mapping‘ within ‘Business Catalog’
    • Go to t-code -> change -> click on ‘New Entries’ ->
    • enter the details like object name , description etc.
    • click on icon ‘save’ to save it.

[2] Create Launchpad Role in SAP Fiori Server (Front-end) server

  • T-code:   LPD_CUST
  • Notes:
    • We define Launchpad roles to link SAP UI5 Application with Tiles
    • One Launchpad role can have multiple SAP UI5 Application references each will be differentiated with help of Alias name.
    • Launchpad role and specific Alias combination will be referred in ‘Target Mapping’ of Catalog configuration to link one SAP-UI5 application.
    • Go to t-code -> click on button ‘New Launchpad’ ->
  • Steps:
  1. Create New Launchpad Application:
    • Go to tcode -> click on button ‘New Launchpad’ ->
    • Provide input as shown in below screen
    • Here put some namespace as ‘Z’, it is required while including this role to TR (Transport-Request)
    • Click ok icon -> Click ‘Yes’ in next window.
    • In Next window, click on ‘New Application’ to create new UI5 application link->
    • end.
  2. Create New Application which requires below details:
    • Link Text:
      • Title of Launchpad Role for fiori App
      • Note: While accessing app from Fiori Launchpad, this LPD text get appears as header title for each page in new SAP-Fiori Hana upgrade
    • Url
      • This entry is to refer SAPUI5 application path which post-deployment resides in t-code ‘SICF’ path
    • Application Alias
      • One ;Launchpad Role’ can have multiple UI5 application links, each should have unique alias
      • Launchpad role name with its Alias name identifies one application link
    • Additional Information
      • Here enter UI5 app’s component name defined in Component.js
      • Syntax: Component=<ui5 app component name>
      • For e.g. Component= ZTest_App01
      • Below ‘Component.js’ screen can be referred where component name is present
    • LPD Role’s application looks like as below after saving the details
    • Once saved we can see role in t-code ‘LPD_CUST’ as in below screen
    • end.
  3. Steps to include Launchpad role in TR:
    • We can include Launchpad roles in TRs for trasnporting it from one system to another
    • Pre-requisites: Two transport request (TR) required:
      1. One as customized request (CSR)
      2. One as workbench request (WBR)
    • To Include Launchpad role in transport request, follow steps as below
      • open Launchpad Role from t-code ‘LD_CUST’ > go to Menu ‘Launchpad’-> click on ‘Transport
      • In next window enter Package details
      • In Next window provide Customizing Request
      • In Next window enter provide Workbench Request
      • Once done below screen appears
      • end.

[3] Create Business Catalog

  • SAP Fiori Designer Url:
    • http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
  • Steps:
  • Login to above ‘SAP Fiori Designer Url’
  • To add a Catalog, in ‘Catalog’ section click on plus ‘+’ icon
  • Enter Catalog Id and title in pop-up window
  • Now once catalog gets added, we can see it left panel, now next we need to add a ‘Tile’
  • Here we can add tile as of below types:
    • Static
    • Dynamic
    • New Tile
  • select “App Launcher – Static” Tile
  • Enter Title, Subtitle, Semantic Object, Action in Tile and save it.
  • Once Tile gets added it can be seen as below:
  • Now click on icon ‘Target Mapping’ -> click on status bar button ‘Create Target Mapping’
  • Enter same Semantic Object name and action as of ‘Tile’
  • And save it.
  • Thus Tile and ‘Target Mapping’ is linked using ‘Semantic Object’ + ‘Action’
  • and ‘SAP UI5 application’ path is linked in ‘Target mapping’ via ‘Launchpad Role’
    • Catalog -> Tile -> ‘Target Mapping’  -> ‘Launchpad Role’ -> UI5 App

[4] Create Business Group

  • SAP Fiori Designer Url:
    • http://<host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html
  • Note:
    • One ‘Business Group’ can have single or multiple Tile from same Catalog or multiple Catalog
    • With this ‘Business Group’, we control app/tile accessibility to users in SAP Fiori Launchpad
  • Steps:
  • Login to above ‘SAP Fiori Designer Url’
  • Create Business Group -> go to Group -> click on ‘+’ sign to add group
  • Enter Group details
  • Once Group get added, we can assign multiple tiles from different catalogs.
  • Here select our test catalog and add tile as below
  • Open Catalog F4 help pop-up from button and search/select test-catalog
  • Once catalog is selected, all tile of this catalog can be visibl
  • We have to add catalog by selecting ‘+’ icon of Tile, which gets changed to ‘ok’ icon post addition
  • Here we can select multiple ‘Tile’ from same Catalog or from multiple Catalog
  • Thus once group has one tile assigned, it appears as below
  • end

 

[5] Create App’s PFCG Role in SAP Fiori Server (Front-end) server

  • T-code:   PFCG
  • Once ‘Business Catalog’ and ‘Business Group’ gets created, their access needs to be provided to user-id, for same we create a PFCG role specific to UI5 application which can be assigned to  user-ids
  • For customized app’s accessibility in Fiori Launchpad page, one user-id will be assigned two PFCG Roles, which are:
    1. One PFCG Role for Fiori Launchpad accessibility, which includes below default services acces
      • R3TR IWSG ZINTEROP_0001
      • R3TR IWSG ZPAGE_BUILDER_PERS_0001
      • R3TR IWSG ZTRANSPORT_0001
      • R3TR IWSV /UI2/INTEROP          0001
      • R3TR IWSV /UI2/LAUNCHPAD 0001
      • R3TR IWSV /UI2/PAGE_BUILDER_PERS 0001
      • Note: Post activation/registration of above standard services, they get renamed with ‘Z’ prefix
    2. One PFCG Role for SAPUI5 Application, which includes:
      • Business Group
      • Business Catalog
      • Odata Service accessibility
  • Steps:
  • [A] Create PFCG Role for Fiori Launchpad accessibility
    • To create PFCG roles go to t-code ‘PFCG’ -> Enter Role name -> click on button ‘Single Role’
    • Enter description
    • Go to Tab ‘Menu’ -> click on end point of button ‘Transaction’ -> select ‘Authorization Default’ ->
    • Here we add below standard registered Fiori Launchpad services with parameters as shown in screens:
      • R3TR IWSG ZINTEROP_0001
      • R3TR IWSG ZPAGE_BUILDER_PERS_0001
      • R3TR IWSG ZTRANSPORT_0001
      • R3TR IWSV /UI2/INTEROP 0001
      • R3TR IWSV /UI2/LAUNCHPAD 0001
      • R3TR IWSV /UI2/PAGE_BUILDER_PERS 0001
    • These are required for accessibility of Fiori Launchpad to any user
    • Add R3TR IWSG
    • Add R3TR IWSV
    • Now add user in tab ‘USER’, to which app access is to be given for e.g. ‘DILIPP’ and perform user comparison
    • And generate authorization profile in tab ‘Authorization’
    • Once above activities gets completed our roles looks like as below:
  • [B] Create PFCG Role for SAPUI5 Application
    • To create PFCG roles go to t-code ‘PFCG’ -> Enter Role name -> click on button ‘Single Role’
    • Enter description
    • Go to Tab ‘Menu’ -> click on end point of button ‘Transaction’ -> select ‘SAP Fiori Tile Catalog’ ->
    • Adding ‘Business Catalog’ access: In Next pop-up select ‘Business Catalog’ which we have created
    • Adding ‘Business Group’ access:
    • Go to Tab ‘Menu’ -> click on end point of button ‘SAP Fiori Tile Catalog’ -> select ‘SAP Fiori Tile Group’
    • Note: here ‘Transaction’ button get replaced by ‘SAP Fiori Tile Catalog’ because last selection was of catalog
    • Adding custom ‘Odata Service’ access:
    • If UI5 App is using Custom OData Service, then add R3TR IWSG & IWSV accessibility also
    • Go to Tab ‘Menu’ -> click on end point of button ‘SAP Fiori Tile Group’ -> select ‘Authorization Default’ ->
    • Now add user in tab ‘USER’, to which app access is to be given for e.g. ‘DILIPP’ and perform user comparison
    • And generate authorization profile in tab ‘Authorization’
    • Once above activities gets completed our roles looks like as below:
  • [C] Role assignment to user-id
    • Suppose one user-id ‘DILIPP’ needs to access our test app, then we need to assign PFCG role to this user-id
    • In SAP-fFori server, Go to t-code ‘SU01’ -> Tab ‘roles’ -> add roles
    • Now login SAP Fiori Launchpad using this user-id, we get access of UI5 app tile.

 

 

 

 

 

To report this post you need to login first.

6 Comments

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

    1. Dilip Kumar KrishnaDev Pandey Post author

      Dear Mantri,

      First confirm whether your custom app is running within Eclipse.

      For UI5 app project’s structure, you can refer below link:

      And as per your error screen, it seems to be your UI5 app doesn’t have

      • Component.js (this is required, when app accessed from Fiori-Launchpad, it searches for this file access from here next navigation continues.)
      • Component-preload.js    (it can be ignored)

      You can also ping me your LaunchPad-Role screen & UI5 App structure.

       

      Thanks & Regards,

      Dilip

      (0) 
      1. Mantri Shekar

        Dear Dileep,

        Thanks for your prompt response.

        Actually I created my App in SAP WEB IDE and am trying to deploy the application using se38 program in abap server(/ui5/ui5/repository_load).

        In my application I have component.js file.But doing a small change it is working.

         

        Regards,

        Shekar.

         

        (0) 
  1. Irfan Gokak

    Hi,

    Nice blog.

    Just a small doubt. Is it necessary to create separate Semantic Object for every application? or we can use same semantic object with different actions for different app?

    Thanks in advance.

    (0) 
    1. Dilip Kumar KrishnaDev Pandey Post author

      Dear Irfan,

      One ‘Semantic Object ‘ can be referred in two application but they should have unique action methods.

      For Example: you see example of std. Buyer apps, where

      1. Semantic object ‘PurchaseOrder’ with action ‘apporve’  is been referred to “Approve Purchase Order app
      2. Semantic object ‘PurchaseOrder’ with action ‘track’ is been referred to “Track Purchase Order app

      Here, please note, ‘semantic-object’ and ‘action’ combination should be unique, which will be used in ‘Target Mapping‘.

      Hope, above helps….

       

      Thanks & Regards,

      Dilip

      (0) 

Leave a Reply