Navigation
Routing
routing in full application
Routing in sapui5
sapui5
video tutorial on routing
Routing in Full Screen Application
Routing in Application
Here, we will implement routing in a full screen
application. The scenario is, there would be 3 Pages, and we will show
navigation to every page through buttons.
Follow these simple
steps:
1.
Create a SAPUI5 Project, name it accordingly.
Here, I have named it as “nav”, you can
choose your own project name.
2.
Create 3 views and 3controllers, since we are
showing navigation among these 3 pages.
Here, I have created 3 views and 3 controllers
with the name new.view.js, new2.view.js, new3.view.js and new.controller.js, new2.controller.js,
new3.controller.js.
3.
Start coding in the index.html file for the
adding the routes. This is not the best way for routing, since we add the routes in
component.js file, which is made separately. Still, in this project we will add
routes in index.html file.
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.m"
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("nav");//we have
provided the local path, //else we will
have to define the full path in the routes every time.
var app = new sap.m.App("appId");
app.placeAt("content");
var myroutes = [{
pattern: "",
name:"new",
view:"nav.new",
viewType:sap.ui.core.mvc.ViewType.JS,
targetControl: "appId",
clearTarget: true,
callback: function(){
myCallback(this);
}
},
{
pattern: ["new2","new2"],
name:"new2",
view:"nav.new2",
viewType:sap.ui.core.mvc.ViewType.JS,
targetControl: "appId",
clearTarget: true,
callback: function(){
myCallback(this);
}
},
{
pattern: ["new3","new3"],
name:"new3",
view:"nav.new3",
viewType:sap.ui.core.mvc.ViewType.JS,
targetControl: "appId",
clearTarget: true,
callback: function(){
myCallback(this);
}
}
];
var myCallback = function($this)
{
var viewId = "id" + $this.name;
var view =
sap.ui.getCore().byId(viewId);
if(view ==
undefined){
view = sap.ui.view({
id:viewId,
viewName:$this.view,
type: sap.ui.core.mvc.ViewType.JS
});
app.addPage(view);
}
app.to(viewId);
};
var router = new
sap.ui.core.routing.Router(myroutes);
router.register("appRouter");
router.initialize();
</script>
</head>
<body class="sapUiBody"
role="application">
<div id="content"></div>
</body>
</html>
·
Here callback function defines the default view,
or if the view is not found then what viewhas to be loaded.
·
We define the router using the class sap.ui.core.routing.Router(myroutes)
·
Then we register the router, so that it could be used anywhere
within the application.
·
Then we Initialise the router.
4.
Create buttons in each Page, for navigating from
one Page to another.
new.view.js
sap.ui.jsview("nav.new", {
getControllerName
: function() {
return "nav.new";
},
createContent
: function(oController) {
var button = new sap.m.Button({
text: "to view
2",
press: function (oEvent){
var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
oRouter.navTo("new2");
}
}) ;
return new sap.m.Page({
title:"Page
1",
content:
[
button
]
});
}
});
new2.view.js
var button1 = new sap.m.Button("button1", {
text: "to view
3",
press: function (oEvent){
var oRouter =
sap.ui.core.routing.Router.getRouter("appRouter");
oRouter.navTo("new3");
}
}) ;
var button2 = new sap.m.Button("button2", {
text: "to view
1",
press: function (oEvent){
var oRouter =
sap.ui.core.routing.Router.getRouter("appRouter");
oRouter.navTo("new");
}
}) ;
Place
the buttons in page’s content.
new3.view.js
var button3 = new sap.m.Button("button3" ,{
text: "to view
2",
press: function (oEvent){
var oRouter =
sap.ui.core.routing.Router.getRouter("appRouter");
var oHashChanger = new
sap.ui.core.routing.HashChanger();
oHashChanger.setHash(oRouter.getURL("new2"));
}
}) ;
Output
Page 1
Page 2
Page 3
Hope it Helped!!! Thanks…..
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
Subscribe to:
Post Comments (Atom)
7 comments
Click here for commentsAwesome bro and keep updating
ReplyHappy to know, you like it!
Replyvery nice
ReplyHey, i'm a new bee to sapui5.
Replycan anyone help me with XML views.
Hi Farooq, XML views are the recommended by SAP, rather than using javascript views in sap ui5.
ReplyUnlike Javascript view, where you can write both UI and backend logic in the JS view, but in XML view only the UI is mentioned in the XML views and the logic is written in its controller.js.
So I would recommend you to start working with XML views. Take the help of SAPUI5 explored https://sapui5.netweaver.ondemand.com/sdk/explored.html. In this see the sample code for important controls like list, table etc. and then you will get a better understanding regarding xml views.
Very much helpful.
ReplyUncaught TypeError: sap.ui.core.routing.Router is not a constructor
Replyi am getting this error while executing the index.html\
ConversionConversion EmoticonEmoticon