Collection of tips for UI5 & FIORI launch pad induction

Introduction,

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

http://scn.sap.com/docs/DOC-56166

Launchpad object relationship

http://scn.sap.com/docs/DOC-55927

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

Issue:

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 )

https://sapui5.netweaver.ondemand.com/#docs/guide/e5200ee755f344c8aef8efcbab3308fb.html

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:

http://scn.sap.com/thread/3838734

Below is the example code for accessing the resources

// Image loading

var sRootPath = jQuery.sap.getModulePath(“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/messageBundle.properties”].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() {

  sap.m.MessageToast.show(“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

http://scn.sap.com/community/developer-center/front-end/blog/2014/06/19/login-page-for-custom-sapui5-applications

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

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/20dbf542-f3e7-3110-a6b8-bb96b57c4e8?QuickLink=index&overridelayout=true&59511066929296

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