How to create pages with different containers using routing in ui5 - sapui5

Question

I am trying to create a splitapp application using routing in ui5. My first page is a login page. Then the next page should be a splitapp which I am not able to do.
I am not able to navigate to the splitapp from login page using routing. My routing url is getting changed but the splitapp view is not getting loaded.
enter code here
// component.js
jQuery.sap.declare("sap.demo.cart.Component");
sap.ui.core.UIComponent.extend("sap.demo.cart.Component",{
metadata:{
routing:{
config:{
viewType:"JS",
viewPath:"shopcart",
targetAggregation:"pages",
clearTarget:false
},
routes:[
{
pattern: "",
name: "login",
view: "login",
viewType:"JS",
viewPath:"shopcart",
targetControl:"topMaster"
},
{
pattern: "splitApp",
name:"app",
view:"app",
targetControl:"topMaster",
clearTarget:false,
subroutes:[{
pattern: "master",
name:"master",
view:"master",
targetAggregation:"masterPages",
targetControl:"splitApp"
preservePageInSplitContainer:true
subroutes:[{
pattern:"welcome",
name:"welcome",
view:"welcome",
targetAggregation:"detailPages"
}]
}]
}
]
}
},
init: function(){
jQuery.sap.require("sap.ui.core.routing.HashChanger");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
sap.ui.core.UIComponent.prototype.init.apply(this,arguments);
this._router = this.getRouter();
this._routerHandler = new sap.m.routing.RouteMatchedHandler(this._router);
this._router.initialize();
},
createContent:function(){
var oView = sap.ui.view({
id:"tmaster",
viewName:"shopcart.topMaster",
type:"JS",
viewData:{component: this}
});
return oView;
}
});
/*login.view*/
sap.ui.jsview("shopcart.login", {
getControllerName : function() {
return "shopcart.login";
},
createContent : function(oController) {
var opanel = new sap.m.Panel(
{
width:"100%",
height:"100%",
expandable : false,
expanded: true,
content:[
new sap.m.Panel("ologin",{
headerText:"Login",
width:"400px",
height:"300px",
content:[
new sap.m.Input("uname",{ tooltip:"Enter Username",placeholder : "Username"}),
new sap.m.Input("pwd",{ type: sap.m.InputType.Password,placeholder : "Password"}),
new sap.m.Link("fgt",{text:"Forgot Password?", press:oController.onForgot}),
new sap.m.Button("log",{text:"Login", press:[oController.onLogin, oController]}),
new sap.m.Button("clr",{text:"Clear", press:oController.onClear})
]
})
]
}).addStyleClass("logContainer");
return sap.m.Page({
content:[opanel]
});
}
});
/*login controller*/
sap.ui.controller("shopcart.login", {
onInit: function() {
this.router = sap.ui.core.UIComponent.getRouterFor(this);
},
onLogin: function(){
var uname = sap.ui.getCore().byId("uname").getValue();
var pwd = sap.ui.getCore().byId("pwd").getValue();
if(uname=="" || pwd=="")
{
// openDialog(sap.ui.core.ValueState.Error,"Login Details","Please provide both the username and password details to login");
}
else{
// app.to("idhome2");
this.router.navTo("app");
}
},
onClear:function(){
sap.ui.getCore().byId("uname").setValue("");
sap.ui.getCore().byId("pwd").setValue("");
},
onForgot:function(){
openDialog(sap.ui.core.ValueState.None,"Forgot Password","Resetting is still under construction");
}
});
/*topmaster.view*/
sap.ui.jsview("shopcart.topMaster", {
createContent : function(oController) {
return new sap.m.App("topMaster",{
});
}
});
/*app.view*/
sap.ui.jsview("shopcart.app", {
getControllerName : function() {
return "shopcart.app";
},
createContent : function(oController) {
this.setDisplayBlock(true);
return new sap.m.SplitApp("splitApp");
}
});
/*master.view*/
sap.ui.jsview("shopcart.master", {
getControllerName : function() {
return "shopcart.master";
},
createContent : function(oController) {
var olist = new sap.m.List({
mode:sap.m.ListMode.SingleSelect,
items : [ new sap.m.StandardListItem({
title : "Employee Master"
}), new sap.m.StandardListItem({
title : "Product Master"
}),new sap.m.StandardListItem({
title : "Category Master"
}),new sap.m.StandardListItem({
title : "Order Master"
}),new sap.m.StandardListItem({
title : "Operation Master"
}) ]
});
return olist;
}
});
/*welcome.view */
sap.ui.jsview("shopcart.welcome", {
getControllerName : function() {
return "shopcart.welcome";
},
createContent : function(oController) {
return new sap.m.Text({text:"Welcome to Oncall Support Maintenance Fiori Application",design:sap.ui.commons.TextViewDesign.H5});
}
});

Answer 1

Have a look at this code. Pay attention to the TopMaster controller and to the routing config in the Component.
jQuery.sap.require("sap.m.MessageBox");
jQuery.sap.declare("shopcart.Component");
sap.ui.core.UIComponent.extend(
"shopcart.Component",
{
metadata:{
rootView : {
viewName: "shopcart.view.TopMaster",
type: sap.ui.core.mvc.ViewType.JS
},
routing:{
config:{
viewType: "JS",
viewPath: "shopcart.view",
targetControl: "topMaster",
targetAggregation: "pages",
clearTarget: false
},
routes: [
{
pattern: "",
name: "login",
view: "Login"
},
{
pattern: "splitApp",
name: "app",
view: "App",
subroutes:[
{
pattern: "master",
name: "master",
view: "Master",
targetAggregation: "masterPages",
targetControl: "splitApp",
preservePageInSplitContainer: true,
subroutes: [
{
pattern: "welcome",
name: "welcome",
view: "Welcome",
targetControl: "splitApp",
targetAggregation: "detailPages"
}
]
}
]
}
]
}
},
init: function(){
sap.ui.core.UIComponent.prototype.init.apply(
this,
arguments
);
var oRouter = this.getRouter();
oRouter.initialize();
}
}
);
// <-- TopMaster.view.js -->
sap.ui.jsview(
"shopcart.view.TopMaster",
{
getControllerName : function() {
return "shopcart.controller.TopMaster";
},
createContent : function(oController) {
return new sap.m.App(
"topMaster"
);
}
}
);
// <-- TopMaster.controller.js -->
sap.ui.controller(
"shopcart.controller.TopMaster",
{
onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.attachRouteMatched(this.onRouteMatched, this);
},
onRouteMatched: function(oEvent) {
var oParameters = oEvent.getParameters();
var oView = this.getView();
var oApp = sap.ui.getCore().byId("topMaster");
if (oApp.getCurrentPage().sId !== oParameters.view.sId) {
oApp.to(oParameters.view.sId);
}
}
}
);
// <-- login.view -->
sap.ui.jsview(
"shopcart.view.Login",
{
getControllerName : function() {
return "shopcart.controller.Login";
},
createContent : function(oController) {
return new sap.m.Page(
{
title: "Login",
content: [
new sap.m.Panel(
{
width:"100%",
height:"100%",
expandable : false,
expanded: true,
content:[
new sap.m.Panel(
"ologin",
{
headerText:"Login",
width:"400px",
height:"300px",
content:[
new sap.m.Input(
this.createId("uname"),
{
tooltip: "Enter Username",
placeholder: "Username"
}
),
new sap.m.Input(
this.createId("pwd"),
{
type: sap.m.InputType.Password,
placeholder: "Password"
}
),
new sap.m.Link(
this.createId("fgt"),
{
text:"Forgot Password?",
press: oController.onForgot
}
),
new sap.m.Button(
this.createId("log"),
{
text:"Login",
press:[
oController.onLogin,
oController
]
}
),
new sap.m.Button(
this.createId("clr"),
{
text:"Clear",
press:oController.onClear
}
)
]
}
)
]
}
)
.addStyleClass("logContainer")
]
}
);
}
}
);
// <-- Login.controller.js -->
sap.ui.controller(
"shopcart.controller.Login",
{
onInit: function() {
},
onLogin: function(){
var oView = this.getView();
var sUsername = oView.byId("uname").getValue();
var sPassword = oView.byId("pwd").getValue();
if( sUsername === "" || sPassword === ""){
sap.m.MessageBox.alert(
"Please provide your login details",
{
title: "Error"
}
);
}
else{
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("welcome");
}
},
onClear:function(){
var oView = this.getView();
oView.byId("uname").setValue(null);
oView.byId("pwd").setValue(null);
},
onForgot:function(){
sap.m.MessageBox.alert(
"Resetting is still under construction",
{
title: "Error"
}
);
}
}
);
// <-- App.view.js -->
sap.ui.jsview(
"shopcart.view.App",
{
getControllerName : function() {
return "shopcart.controller.App";
},
createContent : function(oController) {
this.setDisplayBlock(true);
return new sap.m.SplitApp(
"splitApp"
);
}
}
);
// <-- App.controller.js -->
sap.ui.controller(
"shopcart.controller.App",
{
onInit: function() {
}
}
);
// <-- Master.view.js -->
sap.ui.jsview(
"shopcart.view.Master",
{
getControllerName : function() {
return "shopcart.controller.Master";
},
createContent : function(oController) {
return new sap.m.List(
{
mode:sap.m.ListMode.SingleSelect,
items : [
new sap.m.StandardListItem(
{
title : "Employee Master"
}
),
new sap.m.StandardListItem(
{
title : "Product Master"
}
),
new sap.m.StandardListItem(
{
title : "Category Master"
}
),
new sap.m.StandardListItem(
{
title : "Order Master"
}
),
new sap.m.StandardListItem(
{
title : "Operation Master"
}
)
]
}
);
}
}
);
// <-- Master.controller.js -->
sap.ui.controller(
"shopcart.controller.Master",
{
onInit: function() {
}
}
);
// <-- Welcome.view.js -->
sap.ui.jsview(
"shopcart.view.Welcome",
{
getControllerName : function() {
return "shopcart.controller.Welcome";
},
createContent : function(oController) {
return new sap.m.Text(
{
text: "Welcome to Oncall Support Maintenance Fiori Application"
}
);
}
}
);
// <-- Welcome.controller.js -->
sap.ui.controller(
"shopcart.controller.Welcome",
{
onInit: function() {
}
}
);

Answer 2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link href="css/index.css" rel="stylesheet"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
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>
function Login(){
**window.location.assign("dashboard.html#/dashboard");**
}
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content">
<div id="content-center-alignment">
<div class="inner">
<img alt="" src="">
<input id="txtUsername" type="text" placeholder="Enter user name"></input>
<br/>
<input id="txtPassword" type="password" placeholder="Enter your password"></input>
<br/>
<button id="btnLogin" type="submit" onClick="Login();" class="button">Login</button>
</div>
</div>
</div>
</body>
</html>
just add **stared line in your index.html by doing this you can able to redirect to another view from index.html