Fiori app configuration in SAP Fiori Launchpad

 

Overview

• After the SAP UI5 app has been deployed in the SAP Fiori (Front-End) server, various configurations must be made in order for the app to be accessible in SAP Fiori Launchpad. 
• SAP Fiori launchpad is a shell that hosts SAP Fiori apps and provides features like navigation, personalization, embedded support, and application configuration to the apps. 
• On mobile and desktop devices, SAP Fiori launchpad is the access point to SAP Fiori apps. 
• We will learn how to configure any custom UI5 for SAP Fiori launchpad access in this blog. 
• This blog is a child of the following parent blog:
  • SAP Fiori – Custom App Implementation

 

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:

A SAP-UI5 application is accessed in SAP-Fiori Launchpad using the components listed below:

[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:
  • To connect SAP UI5 Application with Tiles, we build Launchpad roles.
  • A single Launchpad role can have numerous SAP UI5 Application references, each of which is distinguished by an Alias name.
  • To link one SAP-UI5 application, the ‘Target Mapping' of Catalog configuration will refer to the Launchpad role and specified Alias combination.
  • 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 Fiori App Launchpad Role
     • Note: In the latest SAP-Fiori Hana upgrade, this LPD content appears as the header title for each page when accessed via Fiori Launchpad.
   • Url
     • This entry refers to the SAPUI5 application path, which is located in the t-code ‘SICF' path after deployment.
   • Application Alias
     • Multiple UI5 application links can be added to a single Launchpad Role, each with its own alias.
     • One application link is identified by the Launchpad role name and its Alias name.
   • 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:
   • For transporting it from one system to another, we can incorporate Launchpad roles in TRs.
   • Two transport requests (TR) are required as pre-requisites:
     1. One as customized request (CSR)
     2. One as workbench request (WBR)
   • Follow the procedures below to include the Launchpad role in your transport request.
     • 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 the ‘Target Mapping' icon, then on the ‘Create Target Mapping' status bar button.’
• 
• Enter same Semantic Object name and action as of ‘Tile’
• 
• And save it.
• 
• As a result, ‘Semantic Object' + ‘Action' is used to connect Tile and ‘Target Mapping.'’
• 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:
  • A single or several Tiles from the same Catalog or various Catalogs can be included in a single ‘Business Group.'
  • In SAP Fiori Launchpad, we use this 'Business Group' to govern app/tile accessibility for users.
• 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
• 
• Search/select test-catalog in the Catalog F4 help pop-up from the button.
• 
• When a catalogue is selected, all of the tiles in that catalogue become visible.
• We must pick the ‘+' icon of Tile to add a catalogue, which then changes to the ‘ok' icon after the catalogue is added.
• 
• We can choose numerous ‘Tiles' from the same Catalog or from different Catalogs.
• As a result, once a group has been given one tile, it will look like this.
• 
• end

 

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

• T-code:   PFCG
• Once the ‘Business Catalog' and ‘Business Group' have been formed, access to them must be granted to user-ids. To do so, we create a PFCG role specific to the UI5 application that can be assigned to user-ids.
• One user-id will be assigned two PFCG Roles for customizable app accessibility in Fiori Launchpad page:
  1. There is just one PFCG Role for Fiori Launchpad accessibility, which provides access to the services listed below.
     • 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. For SAPUI5 Application, there is only one PFCG Role, 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’ ->
  • 
  • Below are the standard Fiori Launchpad services with the parameters shown in the 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 Fiori Launchpad to be accessible 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’
  • Because the last option was of a catalogue, the ‘Transaction' button has been replaced by ‘SAP Fiori Tile 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, in the tab ‘USER,' create a user for whom app access is to be granted, such as ‘DILIPP,' and compare users.
  • And generate authorization profile in tab ‘Authorization’
  • Once above activities gets completed our roles looks like as below:
  • 
• [C] Role assignment to user-id
• If one user-id ‘DILIPP' requires access to our test app, we must assign the PFCG role to this user-id.
• In SAP-fFori server, Go to t-code ‘SU01’ -> Tab ‘roles’ -> add roles
• 
• We can now access the UI5 app tile by logging into SAP Fiori Launchpad with this user-id.