Hi all,
I'm doing a Master-Master-Detail view splitapp(using the webIDE template for Master-Master-Detail). But now i want to add another detail view which gets displayed when a user presses on a row of a table on the 1st Detail page(henceforth referred to as Detail).
I put a "debugger;" statement in the onInit function of the 2nd Detail page(henceforth referred to as Detail2) but it never gets triggered. This makes me think that there is an error with my routing since the onInit function never gets fired.
Can someone please help me in finding my error or explain to me how to navigate from one detail view to another using a Router.
Below is an excerpt of my myRouter.js, Component.js, Detail.view.js, Detail.controller.js, Detail2.view.js, and Detail2.controller.js.
myRouter.js
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.declare("au.com.bpse.MyRouter");
sap.ui.core.routing.Router.extend("au.com.bpse.MyRouter", { constructor: function() { sap.ui.core.routing.Router.apply(this, arguments); this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this); }, myNavBack: function(sRoute, mData) { var oHistory = sap.ui.core.routing.History.getInstance(); var sPreviousHash = oHistory.getPreviousHash(); //The history contains a previous entry if (sPreviousHash !== undefined) { window.history.go(-1); } else { var bReplace = true; // otherwise we go backwards with a forward history this.navTo(sRoute, mData, bReplace); } }, myNavToWithoutHash: function(oOptions) { var oSplitApp = this._findSplitApp(oOptions.currentView); // Load view, add it to the page aggregation, and navigate to it var oView = this.getView(oOptions.targetViewName, oOptions.targetViewType); oSplitApp.addPage(oView, oOptions.isMaster); oSplitApp.to(oView.getId(), oOptions.transition || "show", oOptions.data); }, backWithoutHash: function(oCurrentView, bIsMaster) { var sBackMethod = bIsMaster ? "backMaster" : "backDetail"; this._findSplitApp(oCurrentView)[sBackMethod](); }, destroy: function() { sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments); this._oRouteMatchedHandler.destroy(); }, _findSplitApp: function(oControl) { var sAncestorControlName = "idAppControl"; if (oControl instanceof sap.ui.core.mvc.View && oControl.byId(sAncestorControlName)) { return oControl.byId(sAncestorControlName); } return oControl.getParent() ? this._findSplitApp(oControl.getParent(), sAncestorControlName) : null; }
});Component.js
jQuery.sap.declare("au.com.bpse.Component");
jQuery.sap.require("au.com.bpse.MyRouter");
sap.ui.core.UIComponent.extend("au.com.bpse.Component", { metadata: { name: "TDG Demo App", version: "1.0", includes: [], dependencies: { libs: ["sap.m", "sap.ui.layout"], components: [] }, rootView: "au.com.bpse.view.App", config: { resourceBundle: "i18n/messageBundle.properties", serviceConfig: { name: "ZQMINSPECTIONS_SRV", serviceUrl: "/sap/opu/odata/sap/ZQMINSPECTIONS_SRV/" } }, routing: { config: { routerClass: au.com.bpse.MyRouter, viewType: "XML", viewPath: "au.com.bpse.view", clearTarget: false, transition: "slide" }, routes: [ { pattern: "", name: "main", view: "Master", viewLevel: 1, targetAggregation: "masterPages", targetControl: "idAppControl", subroutes: [ { pattern: "master2/{entity}", name: "master2", view: "Master2", viewLevel: 2, targetAggregation: "masterPages" } ] }, { pattern: "master02/{entity}", name: "master02", view: "Master2", viewLevel: 2, targetAggregation: "masterPages", subroutes: [ { pattern: "master02/{entity}", name: "detail", view: "Detail", viewLevel: 3, targetAggregation: "detailPages", subroutes: [ { pattern: "master02/:OperationCharSet:", name: "detail2", view: "Detail2", viewLevel: 4, targetAggregation: "detailPages" }] } ] } ] } }, init: function() { sap.ui.core.UIComponent.prototype.init.apply(this, arguments); var mConfig = this.getMetadata().getConfig(); // Always use absolute paths relative to our own component // (relative paths will fail if running in the Fiori Launchpad) var oRootPath = jQuery.sap.getModulePath("au.com.bpse"); // Set i18n model var i18nModel = new sap.ui.model.resource.ResourceModel({ bundleUrl: [oRootPath, mConfig.resourceBundle].join("/") }); this.setModel(i18nModel, "i18n"); var sServiceUrl = mConfig.serviceConfig.serviceUrl; //This code is only needed for testing the application when there is no local proxy available var bIsMocked = jQuery.sap.getUriParameters().get("responderOn") === "true"; // Start the mock server for the domain model if (bIsMocked) { this._startMockServer(sServiceUrl); } // Create and set domain model to the component var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, { json: true, loadMetadataAsync: true }); this.setModel(oModel); // Set device model var oDeviceModel = new sap.ui.model.json.JSONModel({ isTouch: sap.ui.Device.support.touch, isNoTouch: !sap.ui.Device.support.touch, isPhone: sap.ui.Device.system.phone, isNoPhone: !sap.ui.Device.system.phone, listMode: sap.ui.Device.system.phone ? "None" : "SingleSelectMaster", listItemType: sap.ui.Device.system.phone ? "Active" : "Inactive" }); oDeviceModel.setDefaultBindingMode("OneWay"); this.setModel(oDeviceModel, "device"); this.getRouter().register("myRouter"); this.getRouter().initialize(); }, _startMockServer: function(sServiceUrl) { jQuery.sap.require("sap.ui.core.util.MockServer"); var oMockServer = new sap.ui.core.util.MockServer({ rootUri: sServiceUrl }); var iDelay = +(jQuery.sap.getUriParameters().get("responderDelay") || 0); sap.ui.core.util.MockServer.config({ autoRespondAfter: iDelay }); oMockServer.simulate("model/metadata.xml", "model/"); oMockServer.start(); sap.m.MessageToast.show("Running in demo mode with mock data.", { duration: 2000 }); }Detail.view.xml
<mvc:View controllerName="au.com.bpse.view.Detail" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <Page class="sapUiFioriObjectPage" id="detailPage" navButtonPress="onNavBack" showNavButton="{device>/isPhone}" title="{i18n>detailTitle}"> <content> <ObjectHeader intro="Lot No: {Insplot}" number="{CharDescr}" numberUnit="{Status}" title="Operation No: {Inspoper}"> <attributes> <ObjectAttribute text=""/> </attributes> <firstStatus> <ObjectStatus text=""/> </firstStatus> </ObjectHeader> <Table id="myCharTable" inset="false" items="{Characteristics}"> <headerToolbar> <Toolbar> <Label text="Characteristics"></Label> </Toolbar> </headerToolbar> <columns> <Column width="12em"> <Label text="Characteristic No."/> </Column> <Column width="12em"> <Label text="Status"/> </Column> <Column width="12em"> <Label text="Confirmation No."/> </Column> </columns> <items> <ColumnListItem type="Navigation" press="onPress"> <cells> <ObjectIdentifier text="{Inspchar}"/> <ObjectIdentifier text="{Status}"/> <ObjectIdentifier text="{ConfirmNo}"/> </cells> </ColumnListItem> </items> </Table> </content> <footer> <Toolbar></Toolbar> </footer> </Page></mvc:View>Detail.controller.js
sap.ui.core.mvc.Controller.extend("au.com.bpse.view.Detail", { onInit: function() { // debugger; this.oInitialLoadFinishedDeferred = jQuery.Deferred(); if (sap.ui.Device.system.phone) { //Do not wait for the master2 when in mobile phone resolution this.oInitialLoadFinishedDeferred.resolve(); } else { var oEventBus = this.getEventBus(); oEventBus.subscribe("Master2", "LoadFinished", this.onMasterLoaded, this); } this.getRouter().attachRouteMatched(this.onRouteMatched, this); }, onRoutePatternMatched: function(oEvent) { var sName = oEvent.getParameter("name"); if (sName !== "master2") { return; } // Load the detail view in desktop this.getRouter().myNavToWithoutHash({ currentView: this.getView(), targetViewName: "au.com.bpse.view.Detail2", targetViewType: "XML", transition: "slide" }); }, onMasterLoaded: function(sChannel, sEvent, oData){ if (oData.oListItem){ this.bindView(oData.oListItem.getBindingContext().getPath()); this.oInitialLoadFinishedDeferred.resolve(); } }, onPress: function(oEvent){ //this.showDetail(oEvent.getParameter("detailPage") || oEvent.getSource()); var bReplace = jQuery.device.is.phone ? false : true; if (!sap.ui.Device.system.phone) { this.getRouter().attachRoutePatternMatched(this.onRoutePatternMatched, this); debugger; } this.getRouter().navTo("detail2", { from: "detail", entity: oEvent.getSource().getBindingContext().getPath().slice(1) }, bReplace); }, // showDetail: function(oItem){ // var bReplace = jQuery.device.is.phone ? false : true; // this.getRouter().navTo("Detail2",{ // from: "detail", // entity: oItem.getBindingContext().getPath().substr(1) // }, bReplace); // }, onRouteMatched: function(oEvent){ // debugger; var oParameters = oEvent.getParameters(); jQuery.when(this.oInitialLoadFinishedDeferred).then(jQuery.proxy(function(){ // When navigating in the Detail page, update the binding context if (oParameters.name === "detail") { var sEntityPath = "/" + oParameters.arguments.entity; this.bindView(sEntityPath); } else { return; } }, this)); }, bindView: function(sEntityPath) { var oView = this.getView(); oView.bindElement(sEntityPath); //Check if the data is already on the client if (!oView.getModel().getData(sEntityPath)) { // Check that the entity specified was found var oData = oView.getModel().getData(sEntityPath); if (!oData) { this.showEmptyView(); this.fireDetailNotFound(); } else { this.fireDetailChanged(sEntityPath); } } else { this.fireDetailChanged(sEntityPath); } }, showEmptyView: function() { this.getRouter().myNavToWithoutHash({ currentView: this.getView(), targetViewName: "au.com.bpse.view.NotFound", targetViewType: "XML" }); }, fireDetailChanged: function(sEntityPath) { this.getEventBus().publish("Detail", "Changed", { sEntityPath: sEntityPath }); }, fireDetailNotFound: function() { this.getEventBus().publish("Detail", "NotFound"); }, onNavBack: function() { // This is only relevant when running on phone devices this.getRouter().myNavBack("main"); }, onDetailSelect: function(oEvent) { sap.ui.core.UIComponent.getRouterFor(this).navTo("detail", { entity: oEvent.getSource().getBindingContext().getPath().slice(1) }, true); }, getEventBus: function() { return sap.ui.getCore().getEventBus(); }, getRouter: function() { return sap.ui.core.UIComponent.getRouterFor(this); }, onExit: function(oEvent) { this.getEventBus().unsubscribe("Master2", "LoadFinished", this.onMasterLoaded, this); }
});Detail2.view.xml
<core:View controllerName="au.com.bpse.view.Detail2" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <Page title="Results"> <content> <ObjectHeader iconActive="false" id="__header0" intro="{Insplot}" introActive="true" number="{Evaluated}" numberUnit="eur" title="{Inspchar}" titleActive="true"/> <Table id="__table0" inset="false" items="{Results}" mode="SingleSelect" noDataText="Drop column list items here and columns in the area above"> <customData> <core:CustomData id="__data1" key="sap-ui-fastnavgroup" value="true" writeToDom="true"/> </customData> <items> <ColumnListItem counter="0" id="__item0" select="onPress" type="Navigation"> <cells> <Text id="__text0" maxLines="0" text="Row 1 Cell 1"/> <Text id="__text1" maxLines="0" text="Row 1 Cell 2"/> <Text id="__text2" maxLines="0" text="Row 1 Cell 3"/></cells> </ColumnListItem> <ColumnListItem counter="0" id="__item1"> <cells> <Text id="__text3" maxLines="0" text="Row 2 Cell 1"/> <Text id="__text4" maxLines="0" text="Row 2 Cell 2"/> <Text id="__text5" maxLines="0" text="Row 2 Cell 3"/></cells> </ColumnListItem> </items> <columns> <Column id="__column0"> <header> <Label id="__label0" text="You got it"/> </header> </Column> <Column id="__column1"> <header> <Label id="__label1" text="bro"/> </header> </Column> <Column id="__column2"> <header> <Label id="__label2" text="hime-ho"/> </header> </Column> </columns> </Table> </content> </Page></core:View>Detail2.controller.js
sap.ui.core.mvc.Controller.extend("au.com.bpse.view.Detail", { onInit: function() { debugger; this.oInitialLoadFinishedDeferred = jQuery.Deferred(); if (sap.ui.Device.system.phone) { //Do not wait for the master2 when in mobile phone resolution this.oInitialLoadFinishedDeferred.resolve(); } //else { // var oEventBus = this.getEventBus(); // oEventBus.subscribe("Detail", "LoadFinished", this.onDetailLoaded, this); //} this.getRouter().attachRouteMatched(this.onRouteMatched, this); }, // onMasterLoaded: function(sChannel, sEvent, oData) { // if (oData.oListItem) { // this.bindView(oData.oListItem.getBindingContext().getPath()); // this.oInitialLoadFinishedDeferred.resolve(); // } // }, onRouteMatched: function(oEvent) { var oParameters = oEvent.getParameters(); jQuery.when(this.oInitialLoadFinishedDeferred).then(jQuery.proxy(function() { // When navigating in the Detail page, update the binding context if (oParameters.name === "detail2") { var sEntityPath = "/" + oParameters.arguments.entity; this.bindView(sEntityPath); } else { return; } }, this)); }, bindView: function(sEntityPath) { var oView = this.getView(); oView.bindElement(sEntityPath); //Check if the data is already on the client if (!oView.getModel().getData(sEntityPath)) { // Check that the entity specified was found var oData = oView.getModel().getData(sEntityPath); if (!oData) { this.showEmptyView(); this.fireDetailNotFound(); } else { this.fireDetailChanged(sEntityPath); } } else { this.fireDetailChanged(sEntityPath); } }, showEmptyView: function() { this.getRouter().myNavToWithoutHash({ currentView: this.getView(), targetViewName: "au.com.bpse.view.NotFound", targetViewType: "XML" }); }, fireDetailChanged: function(sEntityPath) { this.getEventBus().publish("Detail2", "Changed", { sEntityPath: sEntityPath }); }, fireDetailNotFound: function() { this.getEventBus().publish("Detail2", "NotFound"); }, onNavBack: function() { // This is only relevant when running on phone devices this.getRouter().myNavBack("main"); }, onDetailSelect: function(oEvent) { sap.ui.core.UIComponent.getRouterFor(this).navTo("detail2", { entity: oEvent.getSource().getBindingContext().getPath().slice(1) }, true); }, getEventBus: function() { return sap.ui.getCore().getEventBus(); }, getRouter: function() { return sap.ui.core.UIComponent.getRouterFor(this); }, onExit: function(oEvent) { this.getEventBus().unsubscribe("Master2", "LoadFinished", this.onMasterLoaded, this); }