Dilip Kumar Krishnadev Pandey

November 19, 2017 8 minute read

Fiori app configuration in SAP Fiori Launchpad

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

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:

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

52 Comments

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

Mantri Shekar

November 22, 2017 at 2:44 am

HI Dileep,

I am trying to Configure Custom UI5 App to FIORI Launchpad am getting below error.

Please fin ethe screen shot below for detailed error.

Dilip Kumar Krishnadev Pandey

Blog Post Author

November 22, 2017 at 7:40 am

Dear Mantri,

First confirm whether your custom app is running within Eclipse.

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

https://blogs.sap.com/2017/11/19/sap-fiori-ui5-application-creation/

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

Mantri Shekar

November 23, 2017 at 4:28 am

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.

Dilip Kumar Krishnadev Pandey

Blog Post Author

November 23, 2017 at 7:05 am

Dear Mantri,

Good to hear, your issue has been resolved..

Thanks & Regards,

Dilip

ARCHANA KUMARI

November 6, 2018 at 7:34 pm

Hello Shekar,

I am also getting the same error as you mentioned in last screenshot. Could you please help me to resolve the same. What small changes are needed in Component.js ?

Regards,

Archana

Mantri Shekar

November 8, 2018 at 5:13 am

Hi Archana,

May i know how you created your custom App and how you are deploying this app.

Regards,

Shekar.

ARCHANA KUMARI

November 8, 2018 at 10:36 am

Hello,

I created my App in SAP WEB IDE and am trying to deploy the application on abap server using WEB IDE only.

Regards,

Archana

Mantri Shekar

November 8, 2018 at 12:32 pm

Hello,

Could you Please share the screenshots of SAP WEB IDE Folder and the eror you are facing.

Regards,

Shekar.

mantrishekar951@gmail.com

ARCHANA KUMARI

November 9, 2018 at 8:09 am

Hello,

Please find my screenshots for WEBIDE project folder structure and error screenshot.

Regards,

Archana

sarazu cotrina cristian

July 17, 2020 at 12:18 am

I have a similar problem can help me the version of fiori is 1.0

detination%20IP%20public%20server

detination with ip public

I%20execute%20the%20project%20where%20I%20use%20the%20created%20destination

I execute the project where I use the created destination


Proyect ok get data


deploy proyect in scp

download proyect deploy


unzip downloaded project

upload poryect in fiori server



in sicf   sap/bc/ui5_ui5/zlistaoc test aplication

It does not bring me the data of the service when I test the application in sap

Irfan Gokak

November 23, 2017 at 7:44 am

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.

Dilip Kumar Krishnadev Pandey

Blog Post Author

November 23, 2017 at 9:45 am

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

Semantic object 'PurchaseOrder' with action 'apporve' is been referred to "Approve Purchase Order app"
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

Naoto Amari

February 26, 2018 at 5:01 pm

Hello, i made two applicaitons one in sap web ide and anothe in eclipse and neither of them works, can you give the link to donwload your app ? my syntax it's a little different i don't know if that's the reason ...

Dilip Kumar Krishnadev Pandey

Blog Post Author

March 22, 2018 at 11:12 am

Dear Naoto,

Sorry for delayed response, I was too much busy in my current project….

I'll try to make a google drive link soon to refer a test app (which is been developed using Eclipse)

Thanks & Regards

Dilip

Naoto Amari

March 22, 2018 at 12:03 pm

i would be very greatful

Tobias Schnur

March 23, 2018 at 11:37 am

Hi,

let's say I created one catalogue for all relevant apps for a certain scenario. Now I want to hide some apps (not just the tiles but also the target mappings since they actually prevent the app from being started) from a certain user group do I have to created another catalogue with the allowed apps only? Can I control that via groups or is there a direct connection between target mappings and PFCG Roles?

Tobias

Dilip Kumar Krishnadev Pandey

Blog Post Author

March 26, 2018 at 5:41 am

Dear Tobias,

First lets understand relation between PFCG-Roles, Groups, Catalogs, Tiles, Target-Mappings and SAP-UI5-App.

UI5-App which is deployed in Fiori-server (Abap Stack), can be seen in t-code SICF with path /sap/bc/ui5_ui5/sap/'******', where '******' is FioriAppName
Now to access this application via FioriLaunchapd, we create a catalog within which we create Tile.
Tile has input 'semantic-object' with 'action' method
Create a 'Target-Mapping' with same 'semantic-object' and 'action' method, with this 'Tile' and 'Target-Mappings' are uniquely related
'Target-Mappings' has UI5-App url path either via LaunchpadRoles or direct URL to access deployed application
Now 'Groups', here we select configured Tiles of different Catalogs
PFCG Roles where we add 'Groups' and 'Catalogs' ( those 'Catalogs' from which 'TILES' were added in 'Groups').

Thus, about your query:

You can have one Catalog for all relevant apps (Tiles for examples total 10 tiles). Each App (tile) has unique Target-Mappings (with SematicObject and Action Method reference).
Now If you want to show only few apps (say 1st 4 Tiles out of 10 tiles) for a certain user group, then create a 'Group' in which you select those required 'Tiles' from Catalog. A PFCG Role required which should have this created 'Group' and 'Catalog' Access. The users should have assigned to this PFCG roles.
Next suppose you want to show other apps (say lats 4 apps from same catalog), then again create a different 'Group', add required 'Tiles' and create a new PFCG role add this 'Group' and same Catalog.

I hope above makes the things clear for you.

Thanks and Regards,

Dilip

Ignacio Kristof

May 10, 2018 at 2:12 am

Nice blog. Thanks for sharing the knowledge.

Raghavender Vadakattu

June 28, 2018 at 7:40 pm

June 28, 2018 at 7:34 pm

Hi,

First of all, thank you so much for your blog. It’s pretty good and easy to understand.

I have an issue opening my custom app in Fiori launchpad. Can you please help. Below are the details:

I have created a custom Fiori app to display table data from backend Odata. I also deployed by UI5 application into Frontend Gateway Fiori system and able to run successfully from SICF node test run(see attached).

Later I created Semantic object, Launchpad role and provided these details in my Catalog as described in this blog and attached to group. The PFCG roles are created as suggested and assigned to my user id but unable to open my custom app in Fiori Launchpad(see attached).

Also attached my Component.js code for your review(see attached).

Can you please help me to resolve the issue. Any pointers on this is much appreciated.

Please let me know if you need any further details. Thank you.

-Raghu

Dilip Kumar Krishnadev Pandey

Blog Post Author

June 29, 2018 at 5:10 am

Hi,

Surly, there is FLP configuration issue w.r.t. to your custom app, just re-verify each of below things step-by-step:

App working via SICF (already working)
Semantic object
In Fiori-Designer, check Catalog's Tile config like
- Tile's semantic object name + action 'display'
- In Target-Mapping, same semantic object + action should be referred, here you have two options either use UI5-URL or LaunchpadRole (LPD), as you are getting error with LPD, try UI5-URL option give path as "/sap/bc/ui5_ui5/sap/zapp_name/"
Business Group (already visible)
PFCG Roles for USER, here just cross verify, if every app specific required roles are assigned (like oDataService R3TR/B.Catalog/B.Group) (some are already working in your case)

If, above not helping you to get the root cause, then, while running app, press 'F12' and get console log and try to understand it, you can also let us know

Thanks & Regards,

Dilip

Raghavender Vadakattu

June 29, 2018 at 2:37 pm

Hi Dilip,

Thanks for your reply. I have verified all above mentioned and it looks good. I think I have an issue with my UI5 application itself after adding the component.js.

Earlier I had deployed my UI5 application without Component.js and it's working fine from SICF.

index.html -> zsupplier_dwnld.view.js

But in order configure in FIori Launchpad I had added Component.js and change script in index.html to call component.js instead of zsupplier_dwnld.view.js but I am getting error when I do local testing in eclipse.

index.html -> Component.js -> zsupplier_dwnld.view.js

Error:

SCRIPT5022: failed to load 'zsupplier/Component.js' from resources/zsupplier/Component.js: 404 - Resource could not be found!

I am posting my complete UI5 application below for your review. Can you try the same in your system quickly if possible as I am getting error in local testing itself.

index.html :

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m, sap.ui.commons"
				data-sap-ui-xx-bindingSyntax="complex"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

         <!-- Calling Componet-name of Component.js of UI5 -->   
		<script>
			new sap.m.Shell({
				app : new sap.ui.core.ComponentContainer({
					name : "zsupplier"
				})
			}).placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

I have changed in script in index.html to call Component.js but earlier it was directly calling zsupplier_dwnld.view using below script and working fine from SICF.

<script>
  sap.ui.localResources("zsupplier");
  var app = new sap.m.App({initialPage:"idzsupplier_dwnld1"});
  var page = sap.ui.view({id:"idzsupplier_dwnld1", viewName:"zsupplier.zsupplier_dwnld", 
                                                       type:sap.ui.core.mvc.ViewType.JS}); 		 
  app.addPage(page);
  app.placeAt("content");
</script>

Component.js :

jQuery.sap.declare("zsupplier.Component");
sap.ui.core.UIComponent.extend("zsupplier.Component", {
	
	metadata : {
        stereotype 	: "component", 
        "abstract"	: true,  
        version 	: "1.0",      
        dependencies: { 			 //external dependencies
            libs 	: ["sap.m", 
                 	   "sap.ui.commons", 
                 	   "sap.ui.ux3", 
                 	   ], 	//the libraries that component will be using            
            library	: "sap.ui.core",	//what library belongs your component to              
        },        
	},
	
	createContent : function() {
		// create root view
		var oView = sap.ui.view({
			id 		: "zsupplier_dwnld",
			viewName 	: "zsupplier.zsupplier.zsupplier_dwnld",
			type 		: "JS",
			viewData 	: { component : this }
		});
					
		// set device model
		var deviceModel = new sap.ui.model.json.JSONModel({
			isPhone 	: jQuery.device.is.phone,
			listMode 	: (jQuery.device.is.phone) ? "None" 	: "SingleSelectMaster",
			listItemType: (jQuery.device.is.phone) ? "Active" 	: "Inactive"
		});
		deviceModel.setDefaultBindingMode("OneWay");
		oView.setModel(deviceModel, "device");
			
		// done
		return oView;
	}	
	
});

zsupplier_dwnld.view.js :

sap.ui.jsview("zsupplier.zsupplier_dwnld", {

	/** Specifies the Controller belonging to this View. 
	* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
	* @memberOf zsupplier.zsupplier_dwnld
	*/ 
	getControllerName : function() {
		return "zsupplier.zsupplier_dwnld";
	},

	/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
	* Since the Controller is given to this method, its event handlers can be attached right away. 
	* @memberOf zsupplier.zsupplier_dwnld
	*/ 
	createContent : function(oController) {
		
		var apo = new sap.ui.commons.ApplicationHeader();
		apo.setDisplayWelcome(true);
		apo.setDisplayLogoff(false);
     // apo.setUserName("{Uname}");     
		apo.setLogoText("Supplier self-service");
			
		
		// form begins		
		var formo = new sap.ui.layout.form.SimpleForm({
			id : "myform",
			content : [
			           new sap.ui.commons.Label({text : "Invoicing Party"}),
			           new sap.ui.commons.TextField({value : "{VendName}" , width : "25em", editable : false }),
			           new sap.ui.commons.Label({text : "Bucket"}),
			           new sap.ui.commons.TextField({value : "{Node}", width : "15em", editable : false }),    
			           new sap.ui.commons.Label({text : "Payment Status"}),
			           new sap.ui.commons.TextField({value : "{Status}", width : "10em", editable : false }),    			           
			           new sap.ui.commons.Label({text : "Invoice Number"}),
			           new sap.ui.commons.TextField({value : "{Xblnr}", width : "15em", editable : false }),			           
			           new sap.ui.commons.Label({text : "Invoice Date"}),
			           new sap.ui.commons.TextField({value : "{InvDate}", width : "30em", editable : false }),
			           new sap.ui.commons.Label({text : "Check Number"}),
			           new sap.ui.commons.TextField({value : "{CheckNumber}", width : "15em", editable : false }),
			           new sap.ui.commons.Label({text : "Payment date"}),
			           new sap.ui.commons.TextField({value : "{PymntDate}", width : "30em", editable : false }),       		           
			           ]
					   });
		
		// 1. Create Table
		  var oTable = new sap.m.Table("idInvoiceList", {   
	      inset : true, 
	      headerText : "List of documents",
	      headerDesign : sap.m.ListHeaderDesign.Standard, 
	      mode : sap.m.ListMode.None,   
	      includeItemInSelection : false,   
	    });
	    
	// 2. Add columns to the Table
	    var col1 = new sap.m.Column("col1",{header: new sap.m.Label({text:"Invoicing party"})});
	    oTable.addColumn(col1); 
	    
	    var col2 = new sap.m.Column("col2",{width: "21em", header: new sap.m.Label({text:"Name"})});
	    oTable.addColumn(col2); 
	    
	    var col3 = new sap.m.Column("col3",{header: new sap.m.Label({text:"Location"})});
	    oTable.addColumn(col3);

	    var col4 = new sap.m.Column("col4",{header: new sap.m.Label({text:"Invoice number"})});
	    oTable.addColumn(col4);

	    var col5 = new sap.m.Column("col5",{header: new sap.m.Label({text:"Invoice date"})});
	    oTable.addColumn(col5);
	    
	    var col6 = new sap.m.Column("col6",{header: new sap.m.Label({text:"Payment status"})});
	    oTable.addColumn(col6);
	    
	    var col7 = new sap.m.Column("col7",{header: new sap.m.Label({text:"Gross Amount"})});
	    oTable.addColumn(col7);
	    
	    var col8 = new sap.m.Column("col8",{header: new sap.m.Label({text:"Cash discount"})});
	    oTable.addColumn(col8);
	    
	    var col9 = new sap.m.Column("col9",{width: "15em", header: new sap.m.Label({text:"Document type"})});
	    oTable.addColumn(col9);	    

	     
	    // 3. Bind Aggregation 
	    // "/invoiceSet" is the entity set Name
	    var colItems = new sap.m.ColumnListItem("colItems",{type:"Active"});
	    oTable.bindAggregation("items","/HeadFieldsSet",colItems); 
	    
	    // 4. Define type of each every column
	    var txtNAME1 = new sap.m.Text("txtNAME1",{text:"{Lifnr}"});
	    colItems.addCell(txtNAME1); 
	        
	    var txtNAME2 = new sap.m.Text("txtNAME2",{text:"{VendName}"});
	    colItems.addCell(txtNAME2); 

	    var txtNAME3 = new sap.m.Text("txtNAME3",{text:"{Zzloc}"});
	    colItems.addCell(txtNAME3);
	       
	    var txtNAME4 = new sap.m.Text("txtNAME4",{text:"{Xblnr}"});
	    colItems.addCell(txtNAME4);
	    
	    var txtNAME5 = new sap.m.Text("txtNAME5",{text:"{Bldat}"});
	    colItems.addCell(txtNAME5);
	    
	    var txtNAME6 = new sap.m.Text("txtNAME6",{text:"{StatusTxt}"});
	    colItems.addCell(txtNAME6);
	    
	    var txtNAME7 = new sap.m.Text("txtNAME7",{text:"{GrossAmount}"});
	    colItems.addCell(txtNAME7);
	    
	    var txtNAME8 = new sap.m.Text("txtNAME8",{text:"{ZzcashDisc}"});
	    colItems.addCell(txtNAME8);	    
	    
	    var txtNAME9 = new sap.m.Text("txtNAME9",{text:"{ZzdoctypDesc}"});
	    colItems.addCell(txtNAME9);	    
 

	    
	    // 5. Create a button "Download" with Event handler method 
	    var btExcel = new sap.m.Button({      
	      text: "Download",
	      press : function(oEvent){ oController.Download(oEvent); } 
	    });		
				
		
	    // 5. Add Table to Page
	    return new sap.m.Page({
	        title: "Supplier Self-service download",
	      content: [ apo, formo, oTable ],
	      footer: new sap.m.Bar({ contentRight: [btExcel],
	        design: "Footer"
	      })
	    });		
				
	}

});

zsupplier_dwnld.controller.js :

sap.ui.controller("zsupplier.zsupplier_dwnld", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zsupplier.zsupplier_dwnld
*/

	onInit: function() {
		
		var serviceURL = "/sap/opu/odata/sap/ZFI_3S_DOWNLOAD_SRV/";
		var omodel = new sap.ui.model.odata.v2.ODataModel(serviceURL);		
		this.getView().setModel(omodel);
		this.getView().bindElement("/SearchFieldsSet('RTUSER')");		
	},
	
//  Code to download the data in excel format
	Download: function(oEvent){
	  var sUrl = "/sap/opu/odata/sap/ZFI_3S_DOWNLOAD_SRV/DwldFieldsSet?$format=xlsx";
          var encodeUrl = encodeURI(sUrl);
	  sap.m.URLHelper.redirect(encodeUrl,true);
	},		

});

Do you see any issue in my UI5 application or any script changes needed? It seems i am able to navigate well from index.html to Component.js but some issue in Component.js and zsupplier_dwnld.view. Can you please advise.

Do we need to use only xml views(not js views) to make it work from Fiori Launchpad? Is there any restriction like that? It would be stupid question but want to know if any such restrictions?

Thank you.

-Raghu

Raghavender Vadakattu

June 29, 2018 at 3:45 pm

F12 error screen shot of my UI5 application explained in above comment.

Dilip Kumar Krishnadev Pandey

Blog Post Author

July 2, 2018 at 5:15 am

Hi Raghavender Vadakattu

Your project structure has wrong page references. In the blog, its like something below:

'index.html' -> 'Component.js' -> 'view.App' -> 'view.Master' -> ....so on
Where,
- under UI5-Project, files like 'Index'/'Component' and folder 'view' exists.
- under folder 'view', page JS/JS (Design/Controller) 'App' resides, which directs to XML/JS page 'Master' and so on.

However, in you project structure, you are doing something like:

'index.html' -> 'Component.js' -> 'zsupplier.zsupplier_dwnld' -> ...so on
If you see page 'zsupplier_dwnld.view.js' & ''zsupplier_dwnld.controller.js', here reference not given proper, it should be like below,
- which is 'ProjectName -> folderViewName -> PageView'
- sap.ui.jsview("zsupplier.zsupplier.zsupplier_dwnld",
- sap.ui.controller("zsupplier.zsupplier.zsupplier_dwnld",
Here, I suggest, you should be handling view as XML/JavaScript i.e. define GUI-controls in XML-view and write event codes in JS instead of both JS/JS
and @'Index.html
- No change required in script, keep same

@'Component.js'

keep 'metadata()' same

Change 'createContent()' like below:

	createContent: function () {
		// create app
		this.app = new sap.m.SplitApp();
		var oView = sap.ui.view({
			id 			: "app",
			viewName 	: "zsupplier.zsupplier.zsupplier_dwnld",			
			type 		: "JS",
			viewData 	: { component : this }
		});		
		this.app.addPage(oView, true);
		return this.app;
	},

Hope, above helps you understand the issue.

Thanks & Regards,

Dilip

Raghavender Vadakattu

July 2, 2018 at 1:57 pm

Hi Dilip,

Thanks very much for your reply.

I have done all suggested changes except converting my zsupplier_dwlnd.js to xml view which I am not sure how to do it but I still have the same issue. Please see below screen shots.

Component.js:

zsupplier_dwnlnd.view.js:

zsupplier_dwnld.controller.js:

No changes done on index.html as suggested.

Error message:

I hope my UI5 application works If I can make the navigation from component.js to zsupplier_dwnlnd.js successfully.

I suspect there’s would be some basic script issue causing loading of component.js. Can you please suggest where would it went wrong with your expertise as I’m still facing the same issue.

Can you please guide me to convert my zsupplier_dwlnd.js view to xml view and also what other changes need to be done to make it work.

Thanks again.

-Raghu

Dilip Kumar Krishnadev Pandey

Blog Post Author

July 3, 2018 at 7:09 am

Hi,

Please have a look on below blog from me, you will get your answers surly:

thanks & Regards,

Dilip

Former Member

August 23, 2018 at 12:28 pm

Hi Dilip,

I followed these instructions to what i thought was “to the letter”.

Unfortunately, when i click on the tile in the launchpad, i get an empty shell:

In eclipse, the app is working as designed. Also, i get no errormessages at all.

I suspect the LPD_Cust to be the root, so could you elaborate on which alias has to match what and what exactly has to be put in the aditional infos?

or maybe i’m wrong somewhere else, in which case i will happily provide more info.

Thanks in advance

Dominic

Dilip Kumar Krishnadev Pandey

Blog Post Author

August 23, 2018 at 12:59 pm

Hi Dominic,

If you are doubting LPD_CUST config, then I suggest you to try below things first:

In FLP Designer, inside tile's 'Target Mapping', select option 'SAPUI5 Fiori App' -> then give any name in 'Tile' input field -> and give UI5-App path directly

2nd About LPD_CUST and your query, plz refer following comments:

For Example: UI5App Name is 'ztest_app'
In Eclipse, UI5 app's linking starts from "Index.html" -> searching for ComponentContainer name "ztest_app" -> then "Component.js" file has decalre var "ztest_app.Component" -> then rest of the js/xml files have controller "ztest_app.view.***" -> and so on...
While configuring in FLP, inside tile's Target-Mapping, if you can select option 'SAP Fiori App using LPD_CUST' -> Then below details in "Launchpad Role" / "FLP's Target Mapping input" / "UI5 App namings" should be in sync:
Then inside LPD_CUST, check
- Additonal Information: SAPUI5.Component=ztest_app
- Application Alias: Test_App01
And FLP's Target Mapping input Alias = Test_App01

Thanks & Regards,

Dilip

Former Member

August 23, 2018 at 5:00 pm

Hi Dilip,

first of all, many thanks for the rapid response.

both answers did the job.

choosing URL made it possible for everyone with the link (for ex. passsed to collegue via email) to use the app.

i put the application alias in all uppercase, as found in LPD_CUST. it also appears that "additional information" is far from ..."oh and by the way", but a vital part of the orchestration.

thanks again,

Dominic

Dilip Kumar Krishnadev Pandey

Blog Post Author

August 24, 2018 at 1:00 pm

Happy to hear that your side issue gets resolved.......

Thanks & regards,

Dilip

Suresh Kumar Kotthakonda

November 15, 2018 at 2:23 pm

HI Dilip,

I would like talk about Fiori launch pad configuration on EHP 7 only for PM on Fiori.

I am trying to find ur contact but it is very diffcult.

Could you pls call me once @ 8660036709 or please text me so that i can call u for 5 mins.

Regards

Suresh K

Dilip Kumar Krishnadev Pandey

Blog Post Author

November 16, 2018 at 4:28 am

Hi Suresh,

You please write your queries here only, I'll try to address it.

Thanks & Regards,

Dilip

Fedor Shestov

August 27, 2018 at 3:48 am

Hi, I added my app as described, however, there is an empty screen. What did I skip?

Dilip Kumar Krishnadev Pandey

Blog Post Author

August 27, 2018 at 1:00 pm

Hi Fedor Shestov,

Your FLP (FioriLaunchpad) configs are fine, but your UI5 app’s Component.js has issue.
Correct metadata references then try to run your app locally then go for FLP.
No “createContent” found inside ” Component.js” which calls other views.
Please re-visit your UI5 app w.r.t. development steps.
You can refer blow blog:
- SAP Fiori Custom App development

Thanks & Regards,

Dilip

Fedor Shestov

August 27, 2018 at 2:41 pm

Thank you for your response. This app was created automatically based on the template "List Report Application" with using Odata Service + CDS + annotations. This app works fine in SAP Web IDE.

Jagtar singh

September 7, 2018 at 7:30 am

Nice blog. It helps a lot

Dilip Kumar Krishnadev Pandey

Blog Post Author

September 7, 2018 at 8:34 am

Jagtar....nice to hear that....

Regards,

Dilip

Rajkumar Nabelli

October 10, 2018 at 6:44 pm

Nice blog Dileep, really helpful for people who are new to Fiori.

I am trying to Launch the AO workbooks which are saved as Document to ABAP system (SAP NetWeaver Platform S4 system). Can we somehow call the "Object Type=Document" from Fiori Launchpad using Target Mapping?

I am using following URL in the tile currently to achieve this but I believe there must be a way to create a target mapping for this as well. Any thoughts?

http://sap-dev.xxxxxx.sug.pri/sap/bw/analysis?APPLICATION=EXCEL&OBJECT_TYPE=DOCUMENT&OBJECT_ID=R0XXX_GL_ACCOUNT_ANALYSIS

Dilip Kumar Krishnadev Pandey

Blog Post Author

October 11, 2018 at 7:41 am

Hi Rajkumar,

I think, you can try Target Mapping’s ‘Application Type’ option as “URL”

And if you succeed, please let me know, this is a new kind of requirement for me as well.

Generally I prefer use of oDataService to “store/read” SAP-file (pdf/excel) via SAP-UI5-App.

Regards,

Dilip

shaik abdul

November 6, 2018 at 9:40 am

Very nice blog. And thanks for your prompt responses.

Arun m

February 26, 2019 at 4:59 am

HI Experts,

i am facing an issue, i have developed a custom application using web IDE and it is working all fine in development and quality system but in production system it is not coming in fiori launchpad. even-though it is still there in the fiori launchpad designer.

any insights would be helpful.

regards,

arun

Dilip Kumar Krishnadev Pandey

Blog Post Author

February 26, 2019 at 6:15 am

Hi Arun,

If app’s tile is not visible in FLP, the root cause is, that, respective user-id do not have correct PFCG role access. This PFCG role should have access to app’s B. Catalog/Group and ODataSrv.

Please re-check w.r.t. above blog’s reference.

Thanks & Regards,

Dilip.

欧阳君

August 28, 2019 at 10:14 am

Why ?

thanks you

sammon

Dilip Kumar Krishnadev Pandey

Blog Post Author

August 29, 2019 at 11:15 am

Dear Sammon,

Please remove empty space, you can not add space in ID

it should be ZTest_Catalog

not like below (below yellow highlighted has empty space) :

Thanks & Regards,

Dilip

Somnath Choudhury

March 17, 2020 at 11:36 pm

Hi Dilip ,

Am following your blog step by step.Does the above configuration all steps required if i am using Local Webide with Connection to Fiori/ Backend established ? Thanks.

Regds,

Somnath.

Dilip Kumar Krishnadev Pandey

Blog Post Author

May 23, 2020 at 5:50 pm

Hi Somnath,

Sorry for very late reply, till now, you may have already addressed the requirement

However, this blog’s configuration steps are required when you plan to deploy your application in Fiori Launchpad.

For Local testing (e.g. Eclipse or WebIDE), above is mandatory.

Thanks & Regards,

Dilip

Mallikarjuna B

June 28, 2021 at 8:24 pm

Hi Dilip,

It's very nice and well explained in a easy manner.

When i launch the Fiori app from the FLP , in the navigation menu - still i could see the BSP name instead of Application title , could you please suggest me how can we achieve this , example is below .

Note : Lets say - Manage Products ==> Z_BSP_NAME

Currently displays Z_BSP_NAME instead of Application Title., Kindly advice where i missed

When%20launching%20the%20Application%20from%20the%20LPD%20%2C%20could%20see%20still%20my%20BSP%20application%20name%20%2C%20instead%20of%20App%20Title

When launching the Application from the LPD , could see still my BSP application name , instead of App Title

Thank you in Advance.

Dilip Kumar Krishnadev Pandey

Blog Post Author

July 17, 2021 at 7:24 am

Hi Mallikarjuna,

In group name you have kept Tech-Name and title both as Z_BSP_NAME. Change title name as per custom text.

Thanks & Regards,

Dilip

VinothKumar N K1853

July 6, 2021 at 4:25 pm

Hi I am trying to deploy a standard Transaction say CN01 to fiori, I configured it in flpd_cust with target mapping and all and gave the roles as well but when i try to use it in fiori it is comming blank.
Any idea what i missed

Dilip Kumar Krishnadev Pandey

Blog Post Author

July 17, 2021 at 7:27 am

Hi Vinoth,

Assign the App-role to user-id via which you are try to access the FLP.

Cross check, if App-role has B.Catalog/Group/ODataSrv tech-names listed.

Thanks & Regards,

Dilip

Venu Gopal

July 30, 2021 at 4:37 am

I am using using Apple JDK11 with Bigsur OS and eclipse :2019-12 . If any one encountered this and resolved or has a work around please advise.

Dilip Kumar Krishnadev Pandey

Blog Post Author

September 7, 2021 at 4:34 am

Hi,

I hope you must have resolved this by now. It seems to be related to JDK11/Eclipse setup having std. error, if so, just for my information, can you provide the work-around. Atleast I haven't come across this issue.

Thanks & Regards,

Dilip

Jing Tao

July 7, 2022 at 6:15 am

Hello blogger, I encountered such an error in the ECC environment. I don't know how to deal with it. I wonder if you have encountered it? error%20img

error img

Fiori app configuration in SAP Fiori Launchpad

Overview

Pre-requisites:

Steps of Configuration:

Assigned Tags