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.
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
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); };
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");
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(); }
Below link has the steps for introducing the standard fiori login page for a separate UI5 APP using SICF config and login class
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
Detail steps has been provide in the below link
!!! Hope this would help others in the journey of FIORI and SAPUI5!!!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
7 | |
5 | |
5 | |
5 | |
4 | |
4 | |
4 | |
4 | |
3 | |
3 |