cancel
Showing results for 
Search instead for 
Did you mean: 

Navigation between 2 views in sapui5 applicaiton

chengalarayulu
Active Contributor
0 Kudos

Hi,

I'm just struggling to navigate between 2 veiws in SAPUI5. I see there are many threads available they are solved. But, for me even I follow the same step by step, I could not able to navigate from view1 to view2. Always getting below error.

extended_runnable_file.html] Control with ID app could not be found - EventProvider sap.ui.core.routing.Target - look at below code which am trying to do in Web IDE.

Can someone provide step by step document to do the same.

manifest.json

		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewPath": "firstApplication.view",
				"controlId": "app",
				"controlAggregation": "pages",
				"transition": "fade"
			},
			"routes": [{
				"name": "home",
				"pattern": "",
				"titleTarget": "",
				"view": "View1",
				"greedy": false
			}, {
				"name": "next",
				"pattern": "next",
				"titleTarget": "",
				"view": "View2",
				"greedy": false
			}]


View1.controller.js 

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";


	return Controller.extend("firstApplication.controller.View1", {
		onPress: function() {
			this.getOwnerComponent().getRouter().navTo("next");
		}
	});
});

Accepted Solutions (1)

Accepted Solutions (1)

vaibhav_gb
Explorer

We are using the following project structure

Name space : “com.demo.day3”

In manifest.json we define the following parameters –

Note we need rootView define, the id of the app in the rootview is considered controlID

"sap.ui5": {
		"_version": "1.1.0",
		"rootView": {
			"viewName": "com.demo.day3.view.App",
			"type": "XML"
		},
					
		"routing": {
			"config": {
				"routerClass":"sap.m.routing.Router",
				"viewPath": "com.demo.day3.view",
				"controlId": "app",
				"controlAggregation": "pages"
			},
			"routes": [{
				"name": "View1",
				"pattern": "",
				"target": ["View1"]
			},{
				"name": "View2",
				"pattern": "toView2/{param1}",
				"target": ["View2"]
			}],
			"targets": {
				"View1": {
					"viewType": "XML",
					"transition": "slide",
					"viewName": "View1",
					"viewLevel": 0,
					"controlAggregation": "pages"
				},
				"View2": {
					"viewType": "XML",
					"transition": "slide",
					"viewName": "View2",
					"viewLevel": 1,
					"controlAggregation": "pages"
				}
			}
		}
	}

Another point to note is that the targets defined in the routes refer to the targets defined.

Initialize the routing in component as : this.getRouter().initialize();

thats it you should be good to go with routing,

if you wish to navigate between two views use the following code:

this.getOwnerComponent().getRouter().navTo("ROUTENAME");
//ROUTENAME = name defined for a route in manifest.json.

Answers (1)

Answers (1)

former_member340030
Contributor
0 Kudos

Hi CHENGALARAYULU ,

Actually your error seems that you are missing to provide App control with id = "app" in your App.view.xml (root view)

Just check your App.view.xml file similar code should be there :

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

thanks

Viplove

chengalarayulu
Active Contributor

Thank you Viplove, I have already had this view, still was not able to perform navigation. but, above code worked for me.