Skip to Content

Route and Targin Error:Cannot read property 'getPath' of undefined

Hello community i'm getting an error when i want to route with parameters i read over and over but i can't find what's wrong

ListInvoice.controller.js?eval:38 Uncaught TypeError: Cannot read property 'getPath' of undefined

this is my code

manifest

	"routing": {
	  "config": {
		"routerClass": "sap.m.routing.Router",
		"viewType": "XML",
		"viewPath": "kauf.databinding.app.view",
		"controlId": "apx",
		"controlAggregation": "pages",
		"async": true
	  },
	  "routes": [
		{
		  "pattern": "",
		  "name": "main",
		  "target": "main"
		},
		{
		  "pattern": "detail/{invoicePath}",
		  "name": "detail",
		  "target": "detail"
		}
	  ],
	  "targets": {
		"main": {
		  "viewID": "main",
		  "viewName": "Main"
		},
		"detail": {
		  "viewId": "detail",
		  "viewName": "Detail"
		}
	  }
	}

Component.js

sap.ui.define([
   "sap/ui/core/UIComponent"
], function (UIComponent, JSONModel) {
   "use strict";
   return UIComponent.extend("kauf.databinding.app.Component", {
	   	
	   metadata : {
           manifest: "json"
     },
		
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         
         	// create the views based on the url/hash
			this.getRouter().initialize();


	}
   });
});

the listinvoice where i'm calling the route detail and i already add this to an objectlistitem

type="Navigation" press="onPress"

listinvoice.view

<mvc:View 
		controllerName="kauf.databinding.app.controller.ListInvoice"
		xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
		xmlns:html="http://www.w3.org/1999/xhtml">
	
	
	<List headerText="{i18n>listTit}"
		  class="sapUiResponsiveMargin"
      	  width="auto"
      	  id="listaInvo"
      	  items="{
      	  			path: 'invoice.old>/Invoices',
      	  			sorter: {
      	  						path: 'ShipperName',
      	  						descending: false,
      	  						group: true
      	  					}
      	  			}">
      	  
      	<headerToolbar>
      		<Toolbar title="{i18n>invoiceListTitle}">
      		<ToolbarSpacer/>
      		<SearchField width="50%" search="onBuscarFiltro"/>
			</Toolbar>
      	</headerToolbar>  
	
		<items>
			<ObjectListItem
				title="{invoice.old>Quantity} x {invoice.old>ProductName}"
				
				number="{
					parts: [{path: 'invoice.old>ExtendedPrice'}, {path: 'view>/currency'}],
					type: 'sap.ui.model.type.Currency',
					formatOptions: {
						showMeasure: false
					}
				}"
				numberUnit="{view>/currency}"
				numberState="{= ${invoice.old>ExtendedPrice} > 50 ? 'Error' : 'Success' }"
				type="Navigation"
				press="onPress">
			<firstStatus>
				<ObjectStatus text="{	path: 'invoice.old>Status',
										formatter: '.formatter.statusText'}"/><!-- un "." delante del formatter significa que la función se busca en el controlador de la vista actual -->
			</firstStatus>
			</ObjectListItem>
		</items>
	
	</List>
		


</mvc:View>

listinvoice.controller

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"kauf/databinding/app/model/formatter",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
	"sap/m/MessageToast"
], function (Controller, JSONModel, formatter, Filter, FilterOperator, MessageToast) {
	"use strict";
	
	return Controller.extend("kauf.databinding.app.controller.ListInvoice", {
		
		formatter : formatter, // PAra que este disponible en la vista
		
		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel,"view");
		},
		
		onBuscarFiltro : function (oEvent){ 
			var oArray = []; 
			var sQuery = oEvent.getParameter("query"); 
			if (sQuery) { 
				oArray.push(new Filter("ProductName", FilterOperator.Contains, sQuery)); 
			}
			
			var oList = this.byId("listaInvo"); 
			var oBinding = oList.getBinding("items");
			oBinding.filter(oArray);
		},
		onPress: function (oEvent) {
			var oItem = oEvent.getSource();
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("detail", {
				invoicePath: oItem.getBindingContext("invoice").getPath().substr(1)
			});
		}
	});
});

so in my detail.controller i have this , my detail.view just have a text with hard code

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";
	return Controller.extend("kauf.databinding.app.controller.Detail", {
		onInit: function () {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this); // Traemos la instancia del router "app" 
			oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this); // y lo ligamos a la route "detail" con attachPatternMatched 
																						  //en la route a la cual accedimos por el nombre registrmos una 
																						  //funcion interna que devolvera la ruta cuando esta sea llamada o por medio de url
		},
		
		_onObjectMatched: function (oEvent) { // Recibimos un parametro que usaremos para acceder a la url y parametros de navegacion
			this.getView().bindElement({ //accedemos al invoicePath que enviamos en el controlador de listinvoice y ,llamamos la funcion en la vista bindElmente para enviar el contexto
				path: "/" + oEvent.getParameter("arguments").invoicePath, // le agregamos el / que se quito en el listinvoice
				model: "invoice"
			});
		}
	});
});

.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Feb 22 at 06:00 PM
    show me the code for view ListInvoice
    Add comment
    10|10000 characters needed characters exceeded

  • Feb 22 at 08:14 PM

    Yes, as Jun said, we need to see your view code. It looks like the code in your controller (listinvoice.controller) is similar/same to that of the SAPUI5 "Walk-through" tutorial...around like step 33 or so. That code is dependent on your view having the "invoice" model assigned so it can then find the location/path in that model to the selected table item (ie. getBindingContext("invoice").getPath().substr(1) ).

    Add comment
    10|10000 characters needed characters exceeded

    • i changed my name model to invoiceold and the refer in the view and now this is my code on listtinvoce.controller

      		onPress: function (oEvent) {
      			var sPath = oEvent.getSource().getBindingContext("invoiceold").getPath();
      			var oItem = this.getView().getModel("invoiceold").getProperty(sPath);
      			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      			oRouter.navTo("detail", { invoicePath: sPath().substr(1)});
      
  • Feb 23 at 06:44 AM

    You have assumed that this line of code in your ListInvoice controller

    var oItem = oEvent.getSource();

    gives you the item. That is not correct.

    First get the path and then get the object (oItem) that maps to that path:

    var sPath = oEvent.getSource().getBindingContext("invoice").getPath();
    var oItem = this.getModel("invoice").getProperty(sPath); // you don't really seem to need this given your code
    
    // you could use a value of any of the fields to navigate to detail if you 
    // handled that in your detail controller (as opposed to the path) (e.g. invoice number)

    Your navigation should then look like the below:

    oRouter.navTo("detail", { invoicePath: sPath().substr(1)});
    Add comment
    10|10000 characters needed characters exceeded

    • Naoto Amari Bernard Le Tourneur

      i got a error : sPath is not a function

      this is the code that i modified with your suggest:

      var sPath = oEvent.getSource().getBindingContext("invoiceold").getPath();
      var oItem = this.getView().getModel("invoiceold").getProperty(sPath);