$(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: true, vro: true, 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 ?

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?



Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    Former Member
    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.


    Add comment
    10|10000 characters needed characters exceeded

  • 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.


    Add comment
    10|10000 characters needed characters exceeded

  • Mar 26, 2018 at 09:57 AM


    You should use navTo this way.

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

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



    Add comment
    10|10000 characters needed characters exceeded