$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content

How to navigate to a Detail screen on pressing list when passing two parameters ?

Feb 22, 2017 at 08:59 AM


avatar image

Hi all,

I have a master list that gets loaded dynamically based on the logged user in the launchpad.

I use XML coding for my view. Here's my code.


<List id="idMyRequestList"></List>


onclicklistitem: function (oEvent)


ProId = oEvent.getSource().getAggregation("attributes")[0].getBindingContext().getProperty("ProcessName");

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

var oItem, oCtx;

oItem = oEvent.getSource();

oCtx = oItem.getBindingContext();

this.oRouter.navTo("Detail",{ EmployeeId : oCtx.getProperty("EmployeeId")},

{ WorkitemId : oCtx.getProperty("WorkitemId") });


Component .js:

routing: { config: {

viewType: "XML",

viewPath: "SalesOrder.views",

clearTarget: false, controlId: "idSplitApp",

controlAggregation: "masterPages",

transition: "show" },

routes: [

{ pattern: "",

name: "Master", target: "Master", controlAggregation: "masterPages"


{ pattern: "Detail/{EmployeeId},{WorkitemId}",

name :"Detail", target: "Detail", controlAggregation: "detailPages"


When I click the list item, I get an error and it's not navigated to the detail screen. I have attached my error screen shot.

Can someone help me with this?



10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Hans Yustiawan Feb 22, 2017 at 12:44 PM

Hi Ramya,

Based on the Error from your screen shot. your oRouter is undefined. if you initialise your routing in Component.js already, you just need to call this.getRouter()

and just a side note, UI5 introduces the new way to put the configuration for the routing inside Manifest.json instead of Component.js.


10 |10000 characters needed characters left characters exceeded
Akhilesh Upadhyay Feb 22, 2017 at 01:03 PM

in your current code you are defining a local variable for router, but while using navTo function you are using a global variable :

var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

oRouter = this.getOwnerComponent().getRouter() // try this if above code is not working, may work

this.oRouter.navTo("Detail",{ EmployeeId : oCtx.getProperty("EmployeeId")}, // instead of this.oRouter use oRouter only.

I think this is the issue.


Show 7 Share
10 |10000 characters needed characters left characters exceeded

Hi Akhilesh,

Thanks for your reply.

I tried what you have said:

1.)var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

oRouter.navTo("Detail",{ EmployeeId : oCtx.getProperty("EmployeeId")}

It shows me the same error.

2.)var oRouter = this.getOwnerComponent().getRouter()

oRouter.navTo("Detail",{ EmployeeId : oCtx.getProperty("EmployeeId")}

It throws me this error: "this.getOwnerComponent is not a function"

Please suggest.



var oRouter = this.getView().getOwnerComponent().getRouter();


in onInit function,

this.oRouter = this.getOwnerComponent().getRouter();

And then use navTo function like below,

this.oRouter.navTo("Detail",{ EmployeeId : oCtx.getProperty("EmployeeId")}

Hope this help you.



I get "Uncaught TypeError: this.getView is not a function" when I try the first method and it throws me

"this.getOwnerComponent is not a function" when I try the second one.

Is the following method of passing parameters in my Component.js is right?

{ pattern: "Detail/{EmployeeId},{WorkitemId}",

name :"Detail", target: "Detail", controlAggregation: "detailPages"


and Controller.js:

this.oRouter.navTo("Detail",{ EmployeeId : oCtx.getProperty("EmployeeId")},

{ WorkitemId : oCtx.getProperty("WorkitemId") });

Where am I going wrong? Kindly suggest.




those are secondary things, first we need to get Router first, lets try that,

try once this.getRouter() instead.

which version of ui5 using ?

and check your component.js file or share, are below couple of line mentioned in on init function?

UIComponent.prototype.init.apply(this, arguments);


and also if u can share the code from where you are calling this function onclicklistitem.

above details may help to find out the cause.



I tried those things Akhilesh. It's not working.

I have shared my component file. Here's the code what I have tried.

onInit: function(){
this.oRouter = sap.ui.core.UIComponent.getRouterFor(this);
	 var y = "/sap/bc/ui2/start_up";
          var xmlHttp = null;
          xmlHttp = new XMLHttpRequest();
         xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var oUserData = JSON.parse(xmlHttp.responseText);
          } };
  	    xmlHttp.open( "GET", y, false );
  	    var incrtab = this.byId("idMyRequestList");
            var oItems =new  sap.m.ObjectListItem({ 
	        title :"{EmployeeName}" ,
         	number:"{path: 'CreatedDate',type: 'sap.ui.model.type.Date',formatOptions: {style: 'medium'}}",
         	type : "Navigation",
         	press: this.onclicklistitem,
 	attributes:[new sap.m.ObjectAttribute({text :"{EmployeeId}"}),
   new sap.m.ObjectAttribute({text :"{ProcessName}"}),
     new sap.m.ObjectAttribute({text :"{WorkitemId}", visible:false})
 var filters = new sap.ui.model.Filter("ImUser", sap.ui.model.FilterOperator.EQ, name);
incrtab.bindItems("/REQ_PENDING_LISTSet",oItems, null, filters);
onclicklistitem: function (oEvent) {
ProId = oEvent.getSource().getAggregation("attributes")[0].getBindingContext().getProperty("ProcessName");
//	sap.ui.controller("SalesOrder.views.Detail").check();
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
//	var oRouter = this.getView().getOwnerComponent().getRouter();
//	this.oRouter = this.getView().getOwnerComponent().getRouter();
var oItem, oCtx;
 oItem = oEvent.getSource();
 oCtx = oItem.getBindingContext();
 EmployeeId : oCtx.getProperty("EmployeeId"),
 WorkitemId : oCtx.getProperty("WorkitemId")

component.txt (2.8 kB)

it seems all set.

if this.oRouter.attachRoutePatternMatched is getting triggered means you're able to read router, and this.oRouter should be accessible in side onclicklistitem function, and able to trigger navTo function from there.

are you still getting "navTo is undefined" error ?

Show more comments