Basic steps for navigation between two views using SAPUI5
Hi Guys,
I am writing down a very basic example of how to navigate between two views. I am using just one button per view for navigation so that it is easy to understand what exact steps would be required:
Create a New Application Project and two views: InitialView and FinalView.
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”
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(“products”);
var view = sap.ui.view({id:”View1″, viewName:”products.InitialView“, type:sap.ui.core.mvc.ViewType.JS});
view.placeAt(“content”);
</script>
</head>
<body class=”sapUiBody” role=”application”>
<div id=”content”></div>
</body>
</html>
InitialView.view.js:
sap.ui.jsview(“products.InitialView“, {
/** 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 products.InitialView
*/
getControllerName : function() {
return “products.InitialView“;
},
/** 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 products.InitialView
*/
createContent : function(oController) {
var oButton = new sap.ui.commons.Button({text:”Go to Final View”, width:’200px’, press: function()
{
oController.doIt();
}
});
return oButton;
}
});
FinalView.view.js:
sap.ui.jsview(“products.FinalView”, {
/** 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 products.FinalView
*/
getControllerName : function() {
return “products.FinalView“;
},
/** 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 products.FinalView
*/
createContent : function(oController) {
var oButton = new sap.ui.commons.Button({text:”Go back to Initial View”, width:’200px’, press:function()
{
oController.goBack();
}
});
return oButton;
}
});
InitialView.controller.js:
sap.ui.controller(“products.InitialView“, {
doIt: function (){
sap.ui.getCore().byId(“View1“).removeAllContent();
sap.ui.getCore().byId(“View1“).addContent(sap.ui.jsview(“products.FinalView“));
}
});
FinalView.controller.js:
sap.ui.controller(“products.FinalView“, {
goBack: function (){
sap.ui.getCore().byId(“View1“).removeAllContent();
sap.ui.getCore().byId(“View1“).addContent(sap.ui.jsview(“products.InitialView“));
}
});
Output:
Initial View:
On click of above button, go to Final View:
On click of above button, control would go back to initial view.
Hope it helps.
Thanks,
Taran