Target ID not found - Control with ID app could not be found - EventProvider sap.m.routing.Target

[naotoxxx]

Hello community, my problem is that when i clic an item should go to detail page but is not doing nothing and i'm getting this error : Control with ID app could not be found - EventProvider sap.m.routing.Target

this it my manifest config:

  "sap.ui5": {
	"rootView": {
		"viewName": "kauf.databinding.app.view.Main",
		"type": "XML",
		"async": true,
		"id": "main"
	},
	"dependencies": {
	  "minUI5Version": "1.30",
	  "libs": {
		"sap.m": {}
	  }
	},

.
.
.



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

app.view

<mvc:View
		controllerName="kauf.databinding.app.controller.App" 
		xmlns="sap.m"
		xmlns:mvc="sap.ui.core.mvc"
		displayBlock="true">
	<App class="myAppDemoWT" id="app"/>
</mvc:View>

main.view

<mvc:View
   controllerName="kauf.databinding.app.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
	<App>
		<pages>
			<Page>
				<content>
					<mvc:XMLView viewName="kauf.databinding.app.view.ListInvoice"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

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>

and my 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"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
	"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){ // LE pasamos un argunmento porque es un eventhandler
			var oArray = []; // Creamos un array vacio que nos servira de filtro luego
			var sQuery = oEvent.getParameter("query"); //Obtenemos por medio de el argumento el parametro query que el evento provee
			if (sQuery) { // Si es true (no vacio)
				oArray.push(new Filter("ProductName", FilterOperator.Contains, sQuery)); // Le enviamos al array un nuevo filtro y le decimos
																						 // que filtrara por nombre y el parametro query
			}
			
			var oList = this.byId("listaInvo"); // Obtenemos la lista por id
			var oBinding = oList.getBinding("items"); // Obtenemos los items asociados a esa lista
			oBinding.filter(oArray); // Le pasamos a esos items el filtro
		},
		onPress: function (oEvent) {
//			var oItem = oEvent.getSource();
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("detail");
		}
	});
});

i tried changing my rootview to App but still doing nothing and i'm following the tutorial of sapui demo kit so i've made all pretty much similar but getting the error

[francesco_alborghetti · Accepted solution]

Did you get the same error when you changed the rootView to App? I see that in your routes settings you are using the initial pattern ("") twice:

 "routes": [
		{
		  "pattern": "",
		  "name": "main",
		  "target": "main"
		},
		{
		  "pattern": "",
		  "name": "detail",
		  "target": "detail"
		}
	  ],

[naotoxxx · Accepted solution]

when i chage my viewroot to App does not show any error but is not navigating to my page detail... :C

[naotoxxx · Accepted solution]

i had some issues:

1 - My rootView should be App

2 - In my view (detail) the namespace was wrong an so in my controller

3 - in the descriptor as you mentioned i was using pattern empty twice instead just for the main view ,after that is working fine.

Personal question: when i'm working with routes, my root view and my config of routes should be the same ?

and in my case app view is like a container for others view that works with route, am i right ?

[francesco_alborghetti · Accepted solution]

Yes App view works like a container.

Your rootView can have different name than routes config, basically the router loads the view defined into route target according to the hash pattern (eg https://myappPath/#/details will load the target view defined for route with "details" pattern) and place it into the control that has the id defined into your router config ("controlId": "app"), this control must be defined into your rootApp.

[abhijithkrish]

"rootView": {

		"viewName": "kauf.databinding.app.view.Main",
		"type": "XML",
		"async": true,
		"id": "main"
	},

Here remove the "async": true and try it as

"rootView": {

		"viewName": "kauf.databinding.app.view.Main",
		"type": "XML",
		"id": "main"
	},