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

[former_member195820]

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.

view.xml:

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

Controller.js:

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?

Regards,

Ramya

[former_member227918]

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.

-Akhilesh

[former_member195820]

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.

[former_member227918]

try,

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

OR

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.

-Akhilesh

[former_member195820]

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.

Regards,

Ramya

[former_member227918]

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);

this.getRouter().initialize();

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.

-Akhilesh

[former_member195820]

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);
this.oRouter.attachRoutePatternMatched(this._routePatternMatch,this);
//this.oRouter.attachRoutePatternMatched(this.appmatrix,this);
},
			
_routePatternMatch:function(oEvent){
				
	 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);
       console.log(oUserData);
      name=oUserData.fullName;
          } };
  
  	    xmlHttp.open( "GET", y, false );
            xmlHttp.send(null);
            this.appmatrix(oEvent);
			},
			
 appmatrix:function(oEvent){   
  	    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'}}",
            	numberUnit:"", 
         	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();
alert("oCtx:"+oCtx.getProperty("EmployeeId"));
alert("oCtx1:"+oCtx.getProperty("WorkitemId"));
oRouter.navTo("Detail",{
 EmployeeId : oCtx.getProperty("EmployeeId"),
 WorkitemId : oCtx.getProperty("WorkitemId")
  });
},

<strong><br></strong>

[former_member227918]

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 ?

[former_member195820]

Yes Akhilesh. Still I get the same error.

[Former Member]

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.

Thanks