Navegación entre dos vistas UI5

Para pasar de una vista a otra con UI5 voy a intentar explicar de la forma más sencilla cómo proceder.
Partiremos de una aplicación de template y desde esta añadiremos una vista nueva llamada Newview.view.xml.

Para ello en la carpeta view creamos nuestro archivo Newview.view.xml.
Y en la carpeta controller creamos nuestro controlador Newview.controller.js.

En nuestro caso nos vamos a mover desde la vista Object.view.xml a la que acabamos de crear, Newview.view.xml.

Para ello, creamos un botón en Object.view.xml.

 

A este botón le asignamos la acción goToNewView.

Vamos a nuestro Object.controller.js t creamos la acción / función.

goToNewView : function() {
	
	this.getRouter().navTo("newview");
	
}

Y dentro de ella tan solo el código que veis, «this.getRouter().navTo(«newview»);«.

Ahora, pasamos a modificar nuestro manifest.json, no olvidemos este paso, pues sin estas modificaciones no reconocerá las rutas.

En la key «routes» añadimos (al final del array) la nueva ruta/vista:

{
	"pattern": "Newview",
	"name": "newview",
	"target": [
		"newview"
	]
}

Y en la key «targets» añadimos (también al final del array) el nuevo target:

"newview": {
	"viewName": "Newview",
	"viewId": "newview",
	"viewLevel": 3
}

Con lo que el manifest.json, en las claves de «routes» y «targets» nos quedará algo parecido a:


"routes": [
	{
		"pattern": "",
		"name": "worklist",
		"target": [
			"worklist"
		]
	},
	{
		"pattern": "Event/{objectId}",
		"name": "object",
		"target": [
			"object"
		]
	},
	{
		"pattern": "Newview",
		"name": "newview",
		"target": [
			"newview"
		]
	}
],
"targets": {
	"worklist": {
		"viewName": "Worklist",
		"viewId": "worklist",
		"viewLevel": 1,
		"title": "{i18n>worklistViewTitle}"
	},
	"object": {
		"viewName": "Object",
		"viewId": "object",
		"viewLevel": 2,
		"title": "{i18n>objectViewTitle}"
	},
	"objectNotFound": {
		"viewName": "ObjectNotFound",
		"viewId": "objectNotFound"
	},
	"notFound": {
		"viewName": "NotFound",
		"viewId": "notFound"
	},
	"newview": {
		"viewName": "Newview",
		"viewId": "newview",
		"viewLevel": 3
	}
}

Y a funcionar!


Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*