text: "This is View1"
})
return oText;
text: "This is View2"
})
return oText;
appTitle: "routerdemo",
showLogoutButton: false,
showSearchTool: false,
worksetItems: [
new sap.ui.ux3.NavigationItem("View1Id",{
key: "View1",
text: "View1"
}),
new
sap.ui.ux3.NavigationItem("View2Id", {
key: "View2",
text: "View2"
})
]}
id: "view1Id",
viewName: "routerdemo.View1",
type: sap.ui.core.mvc.ViewType.JS
})]
{
pattern: "",
name: "View1",
view: "routerdemo.View1",
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: "shellId",
targetAggregation: "content",
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem("View1Id");
}
},
{
pattern: ["custom", "View2"],
name: "View2",
view: "routerdemo.View2",
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: "shellId",
targetAggregation: "content",
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem("View2Id");
}
}
]);
Defining router has two steps. One, defining the router generic implementation, and two, defining router properties.
- Pattern: [“<url pattern>”, “<view or page id>”]
- Name: Tells router which view to load when given URL pattern is found in the URL
- View: Provide View or Page ID
- View Type: Mention what view type is for the view to be loaded
- targetControl: Specify shell ID which is the user control point or user interaction point
- targetAggregation: Content to be loaded when router navigates to another view
- clearTarget: Clears target when navigation triggers
- callback: Defines a function that places view defined in the router properties and sets that in the selected work item of the shell
this.removeAllContent();
var selected = e.getParameter("key");
var oHashChanger = new sap.ui.core.routing.HashChanger();
oHashChanger.setHash(router.getURL(selected));
}
router.register("routerID");
router.initialize();
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.require("sap.ui.core.routing.HashChanger");
We need reference to routing &
HashChanger both.<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("routerdemo");
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.require("sap.ui.core.routing.HashChanger");
var oShell = sap.ui.ux3.Shell("shellId",{
appTitle: "routerdemo",
showLogoutButton: false,
showSearchTool: false,
worksetItems: [
new sap.ui.ux3.NavigationItem("View1Id",{
key: "View1",
text: "View1"
}),
new sap.ui.ux3.NavigationItem("View2Id", {
key: "View2",
text: "View2"
})
],
worksetItemSelected: function(e) {
this.removeAllContent();
var selected = e.getParameter("key");
var oHashChanger = new sap.ui.core.routing.HashChanger();
oHashChanger.setHash(router.getURL(selected));
},
content: [new sap.ui.view({
id: "view1Id",
viewName: "routerdemo.View1",
type: sap.ui.core.mvc.ViewType.JS
})]
});
oShell.placeAt('container');
var router = new sap.ui.core.routing.Router([
{
pattern: "",
name: "View1",
view: "routerdemo.View1",
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: "shellId",
targetAggregation: "content", //content/Page
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem("View1Id");
}
},
{
pattern: ["custom", "View2"],
name: "View2",
view: "routerdemo.View2",
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: "shellId",
targetAggregation: "content", //content/Page
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem("View2Id");
}
}
]);
router.register("routerId");
router.initialize();
</script>
</head>
<body class="sapUiBody" role="application">
<div id="container"></div>
</body>
</html>Working Application
On application initial load
On Navigation to View 2
Now, you can pass the URL with #/custom and application will directly load View 2 instead of loading view1 initially.
Index HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("routerdemo");
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.require("sap.ui.core.routing.HashChanger");
var oShell = sap.ui.ux3.Shell("shellId",{
appTitle: "routerdemo",
showLogoutButton: false,
showSearchTool: false,
worksetItems: [
new sap.ui.ux3.NavigationItem("View1Id",{
key: "View1",
text: "View1"
}),
new sap.ui.ux3.NavigationItem("View2Id", {
key: "View2",
text: "View2"
})
],
worksetItemSelected: function(e) {
this.removeAllContent();
var selected = e.getParameter("key");
var oHashChanger = new sap.ui.core.routing.HashChanger();
oHashChanger.setHash(router.getURL(selected));
},
content: [new sap.ui.view({
id: "view1Id",
viewName: "routerdemo.View1",
type: sap.ui.core.mvc.ViewType.JS
})]
});
oShell.placeAt('container');
var router = new sap.ui.core.routing.Router([
{
pattern: "",
name: "View1",
view: "routerdemo.View1",
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: "shellId",
targetAggregation: "content", //content/Page
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem("View1Id");
}
},
{
pattern: ["custom", "View2"],
name: "View2",
view: "routerdemo.View2",
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: "shellId",
targetAggregation: "content", //content/Page
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem("View2Id");
}
}
]);
router.register("routerId");
router.initialize();
</script>
</head>
<body class="sapUiBody" role="application">
<div id="container"></div>
</body>
</html>Working Application
On application initial load
On Navigation to View 2
Now, you can pass the URL with #/custom and application will directly load View 2 instead of loading view1 initially.
4 comments
Click here for commentsHello Thomas,
ReplyI hate to disturb you over small stuffs like this.
Is just that I have been learning SAP UI5 for some time now.
I decided to have a different perspective with your tutorials because you brought in the Component.JS and Manifest.Json concepts which are SAP's standard.
But am having a little issue again. I can't Bind data from controllers to Views.
Naturally I should instantiate the Data in the Init functions in the controller and Bind it to the view and it works, but now I guess I have to do some other set up in Manifest.json and Component.js for the data to be binded. and I dont have an idea on how to do that.
Please see Code below.
Hi Sanjo,
ReplyI have started with SAPUI5 recently, and have been following your tutorial videos. I was following everthing until now, however I have been struggling with Routing between javascript views. I am able to route between XML views, and from XML view to JS view, however I am not able to navigate from JS view to JS view. The first view is loaded, but when routing to the second view, the message on console is "Uncaught TypeError: Cannot read property 'navTo' of undefined".
Please help me out of this.
The code snippets are:
Component.JS
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sapui5/app53/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("sapui5.app53.Component", {
metadata: {
manifest: "json"
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.setModel(models.createDeviceModel(), "device");
this.getRouter().initialize();
}
});
});
Routing part within manifest.json
"routing": {
"config": {
"viewType": "JS",
"viewPath": "sapui5.app53.view",
"targetControl":"idPageContainer",
"targetAggregation": "pages",
"routerClass": "sap.m.routing.Router"
},
"routes": [{
"pattern": "",
"name": "First",
"view": "zjs_view_53_02",
"targetAggregation": "pages"
},
{
"pattern": "second",
"name": "Second",
"view": "zjs_view_53_03",
"targetAggregation": "pages"
}]
}
Container view:
sap.ui.jsview("sapui5.app53.view.zjs_view_53_01", {
getControllerName : function() {
return "sapui5.app53.controller.zjs_view_53_01";
},
createContent : function(oController) {
this.setDisplayBlock(true);
return sap.m.App("idPageContainer");
}
});
First View
sap.ui.jsview("sapui5.app53.view.zjs_view_53_02", {
getControllerName : function() {
return "sapui5.app53.controller.zjs_view_53_02";
},
createContent : function(oController) {
var oButton = new sap.m.Button({
id : "idButton1", // sap.ui.core.ID
text : "Go to Next View", // string
press : [ oController.onNextView ]
});
return new sap.m.Page({
title: "Title Page 2",
content: [
oButton
]
});
}
});
Controller for First View
sap.ui.controller("sapui5.app53.controller.zjs_view_53_02", {
onNextView: function() {
var router;
router = sap.ui.core.UIComponent.getRouterFor(this);
return router.navTo("Second", null);
},
}
You must define the scope for the button, update the "press" property with [ oController.onNextView, oController ], sample below:
Replyvar oButton = new sap.m.Button({
id : "idButton1", // sap.ui.core.ID
text : "Go to Next View", // string
press : [ oController.onNextView, oController ]
});
This doesn't work.
ReplyConversionConversion EmoticonEmoticon