Hi guys, I am having trouble implementing Routing to Multiple Pages in a single View.
I am attaching code snippet for reference.
Router.js |
---|
routing: { config: { viewType: sap.ui.core.mvc.ViewType.JS, viewPath: "demo", clearTarget: false }, routes: [ { pattern: "1", name: "V1", view: "View1", targetControl: "appId", targetAggregation: "Pages" subroutes: [ { pattern: "page1", name: "Page1", view: "View1", targetControl: "pageAppId", targetAggregation: "Pages" }, { pattern: "page2", name: "Page2", view: "View1", targetControl: "pageAppId", targetAggregation: "Pages" } ] } ]
} |
View1.view.js |
---|
sap.ui.jsview("demo.View1", {
createContent: function(oController) { var pageApp = new sap.m.App("pageAppId"); var page1 = new sap.m.Page("page1", { title: "Page 1", content: [ new sap.m.Text({ text: "This is Page 1" }), new sap.m.Button({ text: "Go to Page 2", press: oController.toPage2 }) ] }); var page2 = new sap.m.Page("page2", { title: "Page 2", content: [ new sap.m.Text({ text: "This is Page 2" }), new sap.m.Button({ text: "Go to Page 1", press: oController.toPage1 }) ] }); pageApp.addPage(page1).addPage(page2); return pageApp; }
}); |
View1.controller.js |
---|
var router;
sap.ui.controller("demo.View1", {
onInit: function() { this.router = sap.ui.core.UIComponent.getRouterFor(this); this.router.attachRoutePatternMatched(this._handleRouteMatched, this); router = this.router; }, _handleRouteMatched: function(evt) { if ("View1" !== evt.getParameter("name")) { return; } },
toPage1: function() { //var router = sap.ui.core.UIComponent.getRouterFor(this); router.navTo("Page1", null, false); }, toPage2: function() { //var router = sap.ui.core.UIComponent.getRouterFor(this); router.navTo("Page2", null, false); }
}); |
Please hold in mind that this is just a snippet of the code relevant to the problem in hand.
The Router is initialized in Component and the same app works fine when normal navigation is implemented.
The problem is when Routing is used.
Can someone help me out in this direction?
Thanks in advance!