Skip to Content

Navigation between 2 views in sapui5 applicaiton

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");
		}
	});
});
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    avatar image
    Former Member
    Feb 01, 2017 at 09:06 AM

    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.
    
    Add comment
    10|10000 characters needed characters exceeded

  • Feb 01, 2017 at 09:20 AM

    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

    Add comment
    10|10000 characters needed characters exceeded