Hi all,
I am trying to navigate from view 1(AMR.view.xml) going to view 2(MyAMR.view.xml). Whenever I trigger the navigation, the following error occurs:
sap.ui.core.UIComponent.getRouterFor is not a function at f.getRouter (BaseController.js:10) at f.onTilePressed (AMR.controller.js:21) at f.a.fireEvent (
I also tried this.getOwnerComponent().getRouter() approach instead but an undefined error occurs.
Component.js
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("Component", {
metadata: {
routing: {
config: {
routerClass: "sap.m.routing.Router",
viewType: "XML",
viewPath: "erpmainpage",
controlId: "app",
controlAggregation: "pages",
transition: "slide"
},
routes: [{
pattern: "",
name: "",
target: "index"
}, {
pattern: "myActivities",
name: "myAMR",
target: "myAMR"
}],
targets: {
index: {
viewName: "AMR",
viewLevel : 0,
transition: "flip"
},
myAMR: {
viewName: "MyAMR",
viewLevel : 1,
transition: "flip"
}
}
}
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
}
});
});
AMR.controller.js
sap.ui.define([
"erpmainpage/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("erpmainpage.AMR", {
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel();
// Load JSON in model
oModel.loadData("json/AMR.json");
this.getView().setModel(oModel);
},
onTilePressed : function(oEvent){
var oItem, oCtx;
oItem = oEvent.getSource();
oCtx = oItem.getBindingContext();
this.getRouter().navTo("MyAMR",{
});
}
});
});
BaseController.js
sap.ui.define([
"erpmainpage/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("erpmainpage.AMR", {
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel();
// Load JSON in model
oModel.loadData("json/AMR.json");
this.getView().setModel(oModel);
},
onTilePressed : function(oEvent){
var oItem, oCtx;
oItem = oEvent.getSource();
oCtx = oItem.getBindingContext();
this.getRouter().navTo("MyAMR",{
});
}
});
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-cachebuster/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.layout,sap.ui.commons,sap.ui.unified,sap.suite.ui.commons,sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-appCacheBuster="./">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("erpmainpage");
var app = new sap.m.App("erpMainPageApp",{initialPage:"idLoginPage"});
var mainpage = sap.ui.view({id:"idMainPage1", viewName:"erpmainpage.MainPage", type:sap.ui.core.mvc.ViewType.XML});
var loginpage = sap.ui.view({id:"idLoginPage", viewName:"erpmainpage.LoginPage", type:sap.ui.core.mvc.ViewType.XML});
app.setBackgroundColor("Black");
app.addPage(mainpage);
app.addPage(loginpage);
app.placeAt("content");
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.ui.core.ComponentContainer({
height : "100%",
name : ""
}).placeAt("content");
});
</script>
<link rel="stylesheet" type="text/css" href="css/styleOriginal0814.css"/>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I already tried searching for similar problems but it seems that none of the raised issues was answered yet. Any support will be appreciated. Thank you!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.