Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Former Member


Dear All,

This blog is a collection of initial challenges or the scenarios we may come across during the exercise of placing the custom UI5 app in the Fiori launch pad and also for the people who is looking for the technical options to solve the initial setup, hope this would be useful for the beginners who is exploring the options during FIORI induction.

Reference Links

How to Deploy an SAPUI5 App On Fiori Launchpad

Launchpad object relationship

Challenges & Scenarios

  1. Duplicate element ID error in console
  2. Resource not loaded ( from local JSON  or Image folder)
  3. Custom function to FIORI launch pad screen
  4. Login Page  for custom sapui5 APP
  5. Enhancing the Standard SAP Fiori  applications

1.Duplicate element ID

placed the custom UI5 application in the Fiori launch pad using launch pad configuration URL and Semantic object and also we would be able to access it successfully for the first time and while accessing the same for the second time , we get the  error as “Adding element with duplicate ID” in the console and the application will not be launched

Solution 1:  Replace the element ID for all the elements in the application using this.createId and access the same

Creation in the view =    new sap.m.Button(this.createId("id_but1"), {... }

Access the element from controller =   this.getView().byId("id_but1");

Solution 2: Introduce the router based navigation to the app and destroy the router handler on Component.js

1) Declare the router configuration and routes in the Component.JS ( Metadata )

2) Assign a name to the router in the component initialization event so that we can access it in all controllers by using this name

var oRouter = this.getRouter();

oRouter.register("router");  // Assign a name to Router,

3) Navigate using router in the view Controller

this.oRouter = sap.ui.core.routing.Router.getRouter("router");

this.oRouteHandler = new sap.m.routing.RouteMatchedHandler(oRouter);

this.oRouter.navTo("det1", true);

4) Destroy the Router Handler in the Component.js / Component.prototype.destroy

Componentname.Component.prototype.destroy = function () {

    if (this.oRouteHandler) {

      this.oRouteHandler.destroy();     }

  // call overridden destroy

   sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments); };

2. Resource not loaded ( from local JSON  or Image folder)
Issue :

Image or Json file data is not loaded when the app is launched from fiori launch pad , but the same is working fine outside launch pad

Related Thread:

Below is the example code for accessing the resources

// Image loading

var sRootPath ="demo");

var sImagePath = sRootPath + "/image/photo1.png";

var image = new sap.m.Image({ src: sImagePath })

// Resource Bundle

var i18nModel = new sap.ui.model.resource.ResourceModel({  bundleUrl : [sRootPath, "i18n/"].join("/") });

oView.setModel(i18nModel, "i18n");

// Local Json file

var oJsModel = new sap.ui.model.json.JSONModel([sRootPath, "model/mock.json"].join("/"));

oView.setModel(oJsModel, "data");

3.Custom function to FIORI launch pad screen

Below is the code to get back to FIORI launch pad home screen  from custom app function or button click

onNavButtonPress: function() {"Back to Fiorr Home screen ");

var navigationService = sap.ushell.Container.getService("CrossApplicationNavigation");

   navigationService.backToPreviousApp();   }

4.Login Page for custom sapui5 APP

Below link has the steps for introducing the standard fiori login page for a separate UI5 APP  using SICF config  and login class

5. Enhancing the Standard SAP Fiori  applications

On nutshell we could perform the below four options by creating a Fiori extension project (below parameters should be used in the extension Component.JS project

  1. sap.ui.viewExtensions- To add new fields  or buttons ( any element )  with the extension points in the XML view
  2. sap.ui.viewModifications- edit any property of the existing element
  3. Custom function to FIORI launch pad screen
  4. sap.ui.viewReplacements- no extension point in a particular place/view, to replace the view with the custom view
  5. sap.ui.controllerExtensions- replacing a controller in an SAP-delivered application with a custom controller ( Change in Business logic )

Detail steps has been provide in the below link

!!! Hope this would help others in the journey of FIORI and SAPUI5!!!

Labels in this area