Skip to Content

Collection of tips for UI5 & FIORI launch pad induction


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

You must be Logged on to comment or reply to a post.
      • It works by destroying the router handler on the component destroy ,

        I have updated that part above now , which i think it was missing earlier ,

        Hope this helps

          • All views that are generated by the router are automatically created in the context of the component. Once the routing has been configured and initialized, it can be used, in the controllers, to marshal the appropriate data and UI components, according to the URL pattern that is matched. This is done by attaching a function to the router's routeMatched event. So the component destroy function helps to clear the generated element Id's inside the view.


          • And this is perfectly works in the FIORI launch pad seamlessly with plain element Id's ,

            if you have found a better working option , we could use this forum to share it with others ,

            Hope this helps , and if you any issues in your project then be more specific on your issue let me see how i could help

          • maybe the component destroy helped a little bit. router should be no use here.

            can u do me a favor, just comment out

                if (this.oRouteHandler) {

                  this.oRouteHandler.destroy();     }

            and run your app, to see the duplicated id issue is also avoided.


          • That will definitely work , which i have tried it previously.

            But router handler destroy i have added later which was to clear the conflicts .

            May be i could find out the specific reason for that

          • No router navigation is the key , I have tried without router we will get the same error adding the duplicate id inspite of having the component destroy function .

            Please try that and check the same by creating a small app and deploy the same in FLP ,

            As mentioned earlier all views that are generated by the router are automatically created in the context of the component, so while we destroy the component the ID's would be cleared

            If you check the SAP help link i have provided in detail , then it will help you

  • I wonder why if I create a custom app using the standard template (I'm using the worklist template) i get the duplicate id error. Why the template doesn't destroy the eRouterHandler?? and there is no SAP note about that.