Fiori app configuration in SAP Fiori Launchpad

[dilipkkp2412]

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:

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.
  
  
  
  

 

 

 

 

 

[mantrishekar]

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.

[dilipkkp2412]

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

[mantrishekar]

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.

 

[dilipkkp2412]

Dear Mantri,

Good to hear, your issue has been resolved..

 

Thanks & Regards,

Dilip

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

[dilipkkp2412]

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

[naotoxxx]

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

[dilipkkp2412]

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

[naotoxxx]

i would be very greatful

[former_member204167]

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

[dilipkkp2412]

Dear  tobias.schnur2,

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]

Nice blog. Thanks for sharing the knowledge.

[Former Member]

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

 

[dilipkkp2412]

Hi,

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

1. App working via SICF (already working)


2. Semantic object


3. 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/"
   
   
   
   


4. Business Group (already visible)


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

 

[Former Member]

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

 

[Former Member]

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

[dilipkkp2412]

Hi 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

[Former Member]

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

 

[dilipkkp2412]

 

Hi,

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

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


• For more info:


• https://blogs.sap.com/2017/11/19/sap-fiori-app-implementation-custom-apps/

 

thanks & Regards,

Dilip

[former_member590266]

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

[dilipkkp2412]

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_member590266]

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

[dilipkkp2412]

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

Thanks & regards,

Dilip

[former_member450396]

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

[dilipkkp2412]

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

[former_member450396]

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]

Nice blog. It helps a lot

[dilipkkp2412]

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

Regards,

Dilip

[former_member293942]

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

 

 

[dilipkkp2412]

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_abdul4]

Very nice blog. And thanks for your prompt responses.

[former_member377098]

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

[mantrishekar]

Hi Archana,

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

 

Regards,

Shekar.

[former_member377098]

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

[mantrishekar]

Hello,

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

 

Regards,

Shekar.

mantrishekar951@gmail.com

[former_member377098]

Hello,

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

Regards,

Archana

[former_member595961]

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

 

 

[dilipkkp2412]

Hi Suresh,

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

 

Thanks & Regards,

Dilip

[former_member596778]

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

[dilipkkp2412]

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.

[former_member617729]

Why ?

 

thanks you

sammon

[dilipkkp2412]

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

[somnathamp2018_62]

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.

 

[dilipkkp2412]

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

[sarazucotrina_cristian]

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

 

detination with ip public

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

[former_member745285]

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 launching the Application from the LPD , could see still my BSP application name , instead of App Title

 

Thank you in Advance.

[navinoth]

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

 

[dilipkkp2412]

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

[dilipkkp2412]

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

[former_member759437]

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.