SAPUI5 - Routing not working between JavaScript views

[chetan_mishra]

Hi,

I have recently started with SAPUI5, and am stuck with Routing between views. I am able to route between 2 XML views & from XML view to JS view, however I am not able to navigate away from a JS view.

The first view is loaded, but when routing to the second view, the message on console is "Uncaught TypeError: Cannot read property 'navTo' of undefined". The method "sap.ui.core.UIComponent.getRouterFor(this)" returns "undefined".

Please help.

project-structre.jpg

Component.js

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"sapui5/app53/model/models"
], function(UIComponent, Device, models) {
	"use strict";
	return UIComponent.extend("sapui5.app53.Component", {
		metadata: {
			manifest: "json"
		},

		init: function() {
			UIComponent.prototype.init.apply(this, arguments);
			 this.setModel(models.createDeviceModel(), "device");
			this.getRouter().initialize();
		}
	});
});

manifest.json

		"routing": {
			"config": {
				"viewType": "JS",
				"viewPath": "sapui5.app53.view",
				"targetControl":"idPageContainer",
				"targetAggregation": "pages",
				"routerClass": "sap.m.routing.Router"
			},
			"routes": [{
				"pattern": "",
				"name": "First",
				"view": "zjs_view_53_02",
				"targetAggregation": "pages"
			},
			{
				"pattern": "second",
				"name": "Second",
				"view": "zjs_view_53_03",
				"targetAggregation": "pages"
			}]
			}

container view-zjs_view_53_01

sap.ui.jsview("sapui5.app53.view.zjs_view_53_01", {

	getControllerName : function() {
		return "sapui5.app53.controller.zjs_view_53_01";
	},

	createContent : function(oController) {
		this.setDisplayBlock(true);
	    return sap.m.App("idPageContainer");
	}

});

First view-zjs_view_53_02

sap.ui.jsview("sapui5.app53.view.zjs_view_53_02", {
	getControllerName : function() {
		return "sapui5.app53.controller.zjs_view_53_02";
	},

	createContent : function(oController) {
		


		var oButton = new sap.m.Button({
								id : "idButton1", // sap.ui.core.ID
								text : "Go to Next View", // string
								press : [ oController.onNextView ]
										});	
 		return new sap.m.Page({
			title: "Title Page 2",
			content: [
			          oButton
			]
		});
	}
});

controller for First View:

sap.ui.controller("sapui5.app53.controller.zjs_view_53_02", {


	onNextView: function()	{
		var router;
	      router = sap.ui.core.UIComponent.getRouterFor(this);
	      return router.navTo("Second", null);
		
	},

[jamie_cawley · Accepted solution]

When you declare the button you must provide a scope for it. Try changing the press event to

[oController.onNextView, oController]

Regards,

Jamie

[chetan_mishra · Accepted solution]

Hi Jamie,

Thanks a lot for the answer, this works.

I have read through all the blogs, posts & still could not figure this out.Had literally lost sleep for the last 48 hours over this.

I am really grateful for making my day, cannot express my gratitude enough.

Regards,

Chetan Mishra

[jamie_cawley · Accepted solution]

No problem, glad to help. I've been through the same, guess it is just part of development...

Regards,

Jamie