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.

28 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) 
  2. Naoto Amari

    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 …

    (0) 
    1. Dilip Kumar KrishnaDev Pandey Post author

      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

      (0) 
  3. Former Member

    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

    (0) 
    1. Dilip Kumar KrishnaDeo Pandey Post author

      Dear  Former Member,

      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

      (0) 
  4. Raghavender Vadakattu
    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

     

    (0) 
    1. Dilip Kumar KrishnaDeo Pandey Post author

      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

       

      (0) 
      1. Raghavender Vadakattu

        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

         

        (0) 
    1. Dilip Kumar KrishnaDeo Pandey Post author

      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

      (0) 
      1. Raghavender Vadakattu

        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

         

        (0) 
  5. Dominic Evers

    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

    (0) 
    1. Dilip Kumar KrishnaDeo Pandey Post author

      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

      (0) 
      1. Dominic Evers

        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

        (1) 
    1. Dilip Kumar KrishnaDeo Pandey Post author

      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:

       

      Thanks & Regards,

      Dilip

      (0) 
      1. Fedor Shestov

        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.

         

         

        (0) 

Leave a Reply