Skip to Content
avatar image
Former Member

sap.ui.core.UIComponent.getRouterFor is not a function

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!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Sep 25, 2017 at 10:08 AM

    Hi,

    Please share your manifest.json file.

    One more thing, your base controller is not extended from sap/ui/core/mvc/Controller as given below. Please check.

    sap.ui.define([
    		"sap/ui/core/mvc/Controller"
    	], function (Controller) {
    		"use strict";
    
    
    		return Controller.extend("com.test.controller.BaseController", {
    
    Add comment
    10|10000 characters needed characters exceeded