SAPUI5- MyRouter.js not working properly - sapui5

Question

I am following the MVC model of SAPUI5. I have a MyRouter.js which contains the following code:
jQuery.sap.declare("sap.ui.demo.Onepage.MyRouter");
sap.ui.demo.Onepage.MyRouter={
/**
* to monkey patch the router with the mobile nav back handling
*/
myNavBack : function (route, data) {
var history = sap.ui.core.routing.History.getInstance();
var url = this.getURL(route, data);
var direction = history.getDirection(url);
if ("Backwards" === direction) {
window.history.go(-1);
} else {
var replace = true; // otherwise we go backwards with a forward history
this.navTo(route, data, replace);
}
},
/**
* to monkey patch the router with a nav to method that
* does not write hashes but load the views properly
*/
myNavToWithoutHash : function (viewName, viewType, master, data) {
var oapp = sap.ui.getCore().byId("Myapp");
var oview = this.getView(viewName, viewType);
oapp.addPage(oview, master);
oapp.to(view.getId(), "show", data);
}
};
Component.js:
jQuery.sap.declare("sap.ui.demo.Onepage.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.Onepage.Component", {
metadata : {
routing : {
config : {
viewType : "XML",
viewPath : "view",
targetControl : "Myapp",
targetAggregation: "pages",
clearTarget : false,
transition: "slide"
},
routes : [
{
pattern : "",
name : "Myapp",
view : "App",
viewPath : "view",
targetAggregation: "pages",
viewLevel : 1,
}]
}
},
/**
* !!! The steps in here are sequence dependent !!!
*/
init : function () {
// 1. some very generic requires
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.demo.Onepage.MyRouter");
// 2. call overridden init (calls createContent)
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
// 3a. monkey patch the router
var router = this.getRouter();
router.myNavBack = sap.ui.demo.Onepage.MyRouter.myNavBack;
router.myNavToWithoutHash = sap.ui.demo.Onepage.MyRouter.myNavToWithoutHash;
if (!sap.ui.Device.system.phone) {
router.myNavToWithoutHash("view.hello", "XML", false);
}
// 4. initialize the router
this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
router.initialize();
},
destroy : function () {
if (this.routeHandler) {
this.routeHandler.destroy();
}
// call overridden destroy
sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments);
},
createContent : function () {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "view.App",
type : "XML",
viewData : { component : this }
});
// set navigation model
// load the global data model
/*var oJSONDataModel = new sap.ui.model.json.JSONModel("model/data.json");
oView.setModel(oJSONDataModel);
// load the global image source model
var oImgModel = new sap.ui.model.json.JSONModel("model/img.json");
oView.setModel(oImgModel, "img"); */
// done
return oView;
}
});
Everything is working fine until i call the myNavToWithoutHash function from any controller. The error i get is:
Uncaught TypeError: Cannot read property 'addPage' of undefined - MyRouter.js :27
I cannot find the possible issue. Please help.

Answer 1

XMLViews do automatic prefixing of IDs. So the real ID of your sap.m.App in the DOM probably is sth. like "__xmlview0--MyApp" whereas "__xmlview0" would be your views id if it has any (just check in Elements Tab). Querying for a control with sap.ui.getCore().byId() will not know/respect any of this prefixes. It searches for the id "MyApp" which is obviously != "__xmlview0--MyApp". Since luckily your XMLView has the id "app" you should be fine by doing this:
sap.ui.getCore().byId("app--Myapp");
So remember: Whenever you use XMLViews you can't use sap.ui.getCore().byId('MyApp') but have to use this.getView().byId('MyApp') in your views controller.
Furthermore please note that you can use custom router classes by just declaring so in your routing config:
metadata : {
routing : {
config : {
routerClass: sap.ui.demo.Onepage.MyRouter,
viewType : "XML",
viewPath : "view",
targetControl : "Myapp",
targetAggregation: "pages",
clearTarget : false,
transition: "slide"
}
...
As you might have already guessed your Router therefore needs to extend sap.ui.core.routing.Router!
HF
Christian

Answer 2

Your error seems to related to not finding the the App.
var oapp = sap.ui.getCore().byId("Myapp");
You need to declare controllerName attribute for your controller class in your App.view.xml.
<mvc:View height="100%" xmlns:mvc="sap.ui.core.mvc" controllerName="view.App"
xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns="sap.m">
<App id="Myapp" />
</mvc:View>