Project Name: RoutingDemo
Main.View.xml :
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="RoutingDemo.view.Main" displayBlock="true" height="100%" xmlns:html="http://www.w3.org/1999/xhtml">
<App id="AppId">
</App>
</core:View>
View1.controller.xml :
sap.ui.controller("RoutingDemo.view.View1", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf View1
*/
onInit: function() {
this.getRouter().attachRoutePatternMatched(this.onRouteMatched, this);
},
getRouter: function() {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onRouteMatched:function(){
debugger;
this.byId("InputId").setValue("");
},
OnNumliveChange:function(evt){
if(evt.getSource().getValue()){
this.byId("InputId").setValueState("None");
}else{
this.byId("InputId").setValueState("Error");
}
},
onSubmit: function(evt) {
debugger;
var Value=this.byId("InputId").getValue();
if(Value===""){
this.byId("InputId").setValueState("Error");
sap.m.MessageToast.show("Enter Number");
}else{
this.getRouter().navTo("View2", {
val: Value
});
}
}
});
View1.view.xml :
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="RoutingDemo.view.View1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Page1">
<content>
<Toolbar>
<ToolbarSpacer/>
<Input id="InputId" width="30%" liveChange="OnNumliveChange" placeHolder="Enter Num" type="Number" ></Input>
<Button type="Emphasized" width="10%" text="Submit" press="onSubmit"></Button>
<ToolbarSpacer/>
</Toolbar>
</content>
</Page>
</core:View>
View2.controller.xml :
sap.ui.controller("RoutingDemo.view.View2", {
onInit: function() {
this.getRouter().attachRoutePatternMatched(this.onRouteMatched, this);
},
getRouter: function() {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onRouteMatched:function(evt){
this.Val=evt.getParameter('arguments').val;
this.byId("InputId2").setValue(this.Val);
},
Back:function(){
this.getRouter().navTo("View1");
},
click:function(oEvent){
/*var Val=oEvent.mParameters.value;
console.log(Val);*/
var list=this.getView().byId("LIST1");
list.getItems();
var arrlen = this.getView().byId("LIST1").getItems().length;
var arr = [];
for(var i =0;i<arrlen;i++){
var val = this.byId("LIST1").getItems()[i].getContent()[0].getValue();
arr.push(val);
}
var Totalval=arr.reduce(this.arrSum,0);
if(Totalval>this.Val)
{
sap.m.MessageToast.show("Exceed");
}
else{
sap.m.MessageToast.show("ok");
}
},
arrSum:function(total,num){
return total+ Math.round(num);
},
});
View2.view.xml :
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="RoutingDemo.view.View2" showNavButton="true" navButtonPress="Back" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Page2" showNavButton="true" navButtonPress="Back" >
<content>
<Toolbar>
<ToolbarSpacer/>
<Input id="InputId2" width="30%" type="Number" ></Input>
<ToolbarSpacer/>
</Toolbar>
</content>
<List id="LIST1"
headerText="Sum of " >
<InputListItem label="Input1">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
<InputListItem label="Input2">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
<InputListItem label="Input3">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
<InputListItem label="Input4">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
<InputListItem label="Input5">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
</List>
</Page>
</core:View>
Component.js :
jQuery.sap.declare("RoutingDemo.Component");
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.core.routing.History");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
sap.ui.core.UIComponent.extend("RoutingDemo.Component", {
metadata : {
"name" : "RoutingDemo",
routing : {
config : {
"viewType" : "XML",
"viewPath" : "RoutingDemo.view",
"targetControl" : "AppId",
"targetAggregation" : "pages",
"clearTarget" : false
},
routes : [
{
pattern : "",
name : "View1",
view : "View1"
},
{
pattern : "View2/{val}",
name : "View2",
view : "View2"
}
]
}
},
init : function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
this._routeMatchedHandler = new sap.m.routing.RouteMatchedHandler(this.getRouter(), this._bRouterCloseDialogs);
// this._initODataModel();
this.getRouter().initialize();
},
createContent: function() {
var viewData = {
component:this
};
return sap.ui.view({
viewName: "RoutingDemo.view.Main",
type: sap.ui.core.mvc.ViewType.XML,
viewData: viewData
});
},
getEventBus : function () {
return sap.ui.getCore().getEventBus();
}
});
Main.View.xml :
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="RoutingDemo.view.Main" displayBlock="true" height="100%" xmlns:html="http://www.w3.org/1999/xhtml">
<App id="AppId">
</App>
</core:View>
View1.controller.xml :
sap.ui.controller("RoutingDemo.view.View1", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf View1
*/
onInit: function() {
this.getRouter().attachRoutePatternMatched(this.onRouteMatched, this);
},
getRouter: function() {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onRouteMatched:function(){
debugger;
this.byId("InputId").setValue("");
},
OnNumliveChange:function(evt){
if(evt.getSource().getValue()){
this.byId("InputId").setValueState("None");
}else{
this.byId("InputId").setValueState("Error");
}
},
onSubmit: function(evt) {
debugger;
var Value=this.byId("InputId").getValue();
if(Value===""){
this.byId("InputId").setValueState("Error");
sap.m.MessageToast.show("Enter Number");
}else{
this.getRouter().navTo("View2", {
val: Value
});
}
}
});
View1.view.xml :
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="RoutingDemo.view.View1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Page1">
<content>
<Toolbar>
<ToolbarSpacer/>
<Input id="InputId" width="30%" liveChange="OnNumliveChange" placeHolder="Enter Num" type="Number" ></Input>
<Button type="Emphasized" width="10%" text="Submit" press="onSubmit"></Button>
<ToolbarSpacer/>
</Toolbar>
</content>
</Page>
</core:View>
View2.controller.xml :
sap.ui.controller("RoutingDemo.view.View2", {
onInit: function() {
this.getRouter().attachRoutePatternMatched(this.onRouteMatched, this);
},
getRouter: function() {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onRouteMatched:function(evt){
this.Val=evt.getParameter('arguments').val;
this.byId("InputId2").setValue(this.Val);
},
Back:function(){
this.getRouter().navTo("View1");
},
click:function(oEvent){
/*var Val=oEvent.mParameters.value;
console.log(Val);*/
var list=this.getView().byId("LIST1");
list.getItems();
var arrlen = this.getView().byId("LIST1").getItems().length;
var arr = [];
for(var i =0;i<arrlen;i++){
var val = this.byId("LIST1").getItems()[i].getContent()[0].getValue();
arr.push(val);
}
var Totalval=arr.reduce(this.arrSum,0);
if(Totalval>this.Val)
{
sap.m.MessageToast.show("Exceed");
}
else{
sap.m.MessageToast.show("ok");
}
},
arrSum:function(total,num){
return total+ Math.round(num);
},
});
View2.view.xml :
controllerName="RoutingDemo.view.View2" showNavButton="true" navButtonPress="Back" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Page2" showNavButton="true" navButtonPress="Back" >
<content>
<Toolbar>
<ToolbarSpacer/>
<Input id="InputId2" width="30%" type="Number" ></Input>
<ToolbarSpacer/>
</Toolbar>
</content>
<List id="LIST1"
headerText="Sum of " >
<InputListItem label="Input1">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
<InputListItem label="Input2">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
<InputListItem label="Input3">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
<InputListItem label="Input4">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
<InputListItem label="Input5">
<Input value=" " type="Number" liveChange="click"/>
</InputListItem>
</List>
</Page>
</core:View>
Component.js :
jQuery.sap.declare("RoutingDemo.Component");
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.core.routing.History");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
sap.ui.core.UIComponent.extend("RoutingDemo.Component", {
metadata : {
"name" : "RoutingDemo",
routing : {
config : {
"viewType" : "XML",
"viewPath" : "RoutingDemo.view",
"targetControl" : "AppId",
"targetAggregation" : "pages",
"clearTarget" : false
},
routes : [
{
pattern : "",
name : "View1",
view : "View1"
},
{
pattern : "View2/{val}",
name : "View2",
view : "View2"
}
]
}
},
init : function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
this._routeMatchedHandler = new sap.m.routing.RouteMatchedHandler(this.getRouter(), this._bRouterCloseDialogs);
// this._initODataModel();
this.getRouter().initialize();
},
createContent: function() {
var viewData = {
component:this
};
return sap.ui.view({
viewName: "RoutingDemo.view.Main",
type: sap.ui.core.mvc.ViewType.XML,
viewData: viewData
});
},
getEventBus : function () {
return sap.ui.getCore().getEventBus();
}
});