Routing in Split Application
Routing in Split Application
Here, we will implement routing in a Split screen application. The scenario is, there would be 3 Pages, one is the master Page and other two are the detail Pages and we will show navigation to one detail page to another through the click of a list Item on the first detail page.
Routing in general and within a full screen Application
Routing Within Split Application
Follow these simple steps:
Here, we will implement routing in a Split screen application. The scenario is, there would be 3 Pages, one is the master Page and other two are the detail Pages and we will show navigation to one detail page to another through the click of a list Item on the first detail page.
Routing in general and within a full screen Application
Follow these simple steps:
1.
Create a SAPUI5 Project, name it accordingly.
Here, I have named it as Splitapp_routing
Create 4 views and controllers.
·
App.view.js and App.controller.js
·
masterpage.view.js and
masterpage.controller.js.
·
detailpage.view.js and detailpage.controller.js
·
detailpage1.view.js and
detailpage1.controller.js
I have defined routes in the Component.js
this time unlike my last post, where I have defined the routes in index.html.
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"
data-sap-ui-xx-bindingSyntax="Complex"
data-sap-ui-resourceroots='{
"com.Spiltapp_routing":"./"
}'
data-sap-ui-preload='async'>
</script>
<!-- only load the mobile lib
"sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.getCore().attachInit(function (){
new sap.m.Shell("Shell",{
title:"Routing",
app:
new
sap.ui.core.ComponentContainer({
name
: 'com.Spiltapp_routing'
})
}).placeAt("content");
})
</script>
</head>
<body class="sapUiBody"
role="application">
<div id="content"></div>
</body>
</html>
App.view,js
sap.ui.jsview("com.Spiltapp_routing.spiltapp_routing.App", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf spiltapp_routing.App
*/
getControllerName
: function() {
return "com.Spiltapp_routing.spiltapp_routing.App";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf spiltapp_routing.App
*/
createContent
: function(oController) {
this.setDisplayBlock(true);
this.oApp = new sap.m.SplitApp("SplitApp",{});
return this.oApp;
}
});
masterpage.view.js
sap.ui.jsview("com.Spiltapp_routing.spiltapp_routing.masterpage", {
getControllerName
: function() {
return "com.Spiltapp_routing.spiltapp_routing.masterpage";
},
createContent
: function(oController) {
var list = new sap.m.List("lists", {
items
: {
path
: "/Product",
template
: new
sap.m.ObjectListItem("abc", {
title
: "{Product
Name}",
number
: "{Price}",
intro
: "{Plant}",
icon
: "{image}",
type
: "Active",
attributes
: [ {
text
: "{Product
ID}"
},
{
text
: "{value}"
}
],
firstStatus
: {
text
: "{Status}"
},
press
: function(oEvent) {
oController.itempressed();
}})
}
});
return new sap.m.Page({
title:
"default
Master",
content:
[
list
]
});
}});
masterpage.controller.js
onInit: function() {
var model1 = new
sap.ui.model.json.JSONModel();
model1.loadData("model/detail.json");
sap.ui.getCore().setModel(model1);
},
itempressed: function(oEvent) {
debugger;
// Get instance of router
router =
sap.ui.core.routing.Router.getRouter("appRouter");
router.navTo("detailpage");
}
Detailpage.view.js
sap.ui.jsview("com.Spiltapp_routing.spiltapp_routing.detailpage", {
getControllerName
: function() {
return "com.Spiltapp_routing.spiltapp_routing.detailpage";
},
createContent
: function(oController) {
var list = new sap.m.List({
items
: {
path
: "/Product",
template
: new
sap.m.ObjectListItem({
title
: "{Product
Name}",
number
: "{Price}",
intro
: "{Plant}",
icon
: "{image}",
type
: "Active",
attributes
: [ {
text
: "{Product
ID}"
},
{
text
: "{value}"
}
],
firstStatus
: {
text
: "{Status}"
},
press
: function() {
var oRouter =
sap.ui.core.routing.Router
.getRouter("appRouter");
oRouter.navTo("detailpage1");
}
})
}
});
return new sap.m.Page({
title:
"Default
Detail",
content:
[
list
]
});
}
});
detailpage.controller.js
onInit: function() {
var model1 = new
sap.ui.model.json.JSONModel();
model1.loadData("model/detail.json");
sap.ui.getCore().setModel(model1);
},
detailpage1.view.js
sap.ui.jsview("com.Spiltapp_routing.spiltapp_routing.detailpage1", {
getControllerName
: function() {
return "com.Spiltapp_routing.spiltapp_routing.detailpage1";
},
createContent
: function(oController) {
return new sap.m.Page({
title:
"2nd
detailpage",
showNavButton:
true,
navButtonTap:function(){
var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
window.history.go(-1);
},
content:
[
]
});
}
});
detail.json
{
"Product": [
{ "image":
"model/bag.jpg",
"Product ID": "123",
"Price": "321",
"Product Name": "Bag",
"value":"10",
"Plant":"bags limited",
"Status":"available"
},
{"image": "model/watch.png",
"Product ID": "124",
"Price": "322",
"Product Name":"watch",
"value":"7",
"Plant":"watch limited",
"Status":"unavailable"
},
{"image": "model/pen.png",
"Product ID": "125",
"Price": "323",
"Product Name":
"Pen",
"value":"50",
"Plant":"pen limited",
"Status":"available"
},
{"image": "model/laptop.png",
"Product ID": "126",
"Price": "324",
"Product Name": "Laptop",
"value":"15",
"Plant":"laptop
limited",
"Status":"available"
},
{
"image": "model/pencil.png",
"Product ID": "127",
"Price": "325",
"Product Name": "pencil",
"value":"10",
"Plant":"pencil limited",
"Status":"unavailable"
},
{
"image": "model/bulb.png",
"Product ID": "128",
"Price": "326",
"Product Name": "bulb",
"value":"10",
"Plant":"bulb limited",
"Status":"available"
}
]
}
jQuery.sap.declare("com.Spiltapp_routing.Component");
Component.js
jQuery.sap.declare("com.Spiltapp_routing.Component");
sap.ui.core.UIComponent.extend("com.Spiltapp_routing.Component",{
metadata : {
rootView : "com.Spiltapp_routing.splitapp_routing.App",
routing : {
config : {
viewType:"JS",
targetAggregation:"detailPages",
clearTarget : false
},
routes : [
{
pattern : "",
name : "masterpage",
view : "com.Spiltapp_routing.spiltapp_routing.masterpage",
targetAggregation : "masterPages",
targetControl : "SplitApp",
subroutes : [{
pattern : "",
name : "detailpage",
view : "com.Spiltapp_routing.spiltapp_routing.detailpage",
},
{
pattern : "detailpage1",
name : "detailpage1",
view : "com.Spiltapp_routing.spiltapp_routing.detailpage1",
}
]
},
{
pattern: "masterpage1",
name : "masterpage1",
view : "masterpage1",
targetAggregation : "masterPages",
targetControl : "SplitApp",
}
]
}},
init:function(){
debugger;
//router and hashchanger libraries
jQuery.sap.require("sap.ui.core.routing.History");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
//call create content
sap.ui.core.UIComponent.prototype.init.apply(this);
var router = this.getRouter();
this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
router.register("appRouter"); // Assign a name to Router, so that we can access it in all controllers by using this name
router.initialize(); // Initialise the Router
},
}
);
com.Spiltapp_routing.Component.prototype.createContent = function(){
debugger;
var oview = sap.ui.view({id:"app",viewName:"com.Spiltapp_routing.spiltapp_routing.App",type:"JS",viewData:{ component:this }});
var oModel = new sap.ui.model.json.JSONModel("model/detail.json");
oview.setModel(oModel);
return oview;
};
Here, in the Json, I have used many .png
and .jpg images, you can use your own images.
Output
Hope, it helped. Do comment in the comment section
if you liked this tutorial.
Thanks!!!