SAP FIORI AND UI 5 – NAVIGATING THROUGH MULTIPLE CONTROLLERS.
1) In this demo I would like to show how to navigate through multiple views and controllers.
2) In the first page “PAGE1” ,message will be prompted to enter first name.Pressing the submit button will navigate to “PAGE2”
3) In the second page , first name will be displayed and message will be prompted to enter last name.Pressing the submit button will navigate to “PAGE3”.
4) In the third page “PAGE3” both first name and last name will be displayed:
Pre-Requisites for this demo :
- a) Eclipse Mars with SAP UI5 Installed
- b) Tomcat server 7.0
Lets start the demo.
Step1 : Create new Application Project
File->New->Other->SAPUI5 Application Development->Application Project-> Enter name “FioriDemo” ->Enter initial view name as “Page1” -> Click Finish
Step 2: In the index.html , enter the below code:
<!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,sap.ui.commons,sap.ui.ux3”
data-sap-ui-theme=“sap_bluecrystal”>
</script>
<!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>
<script>
sap.ui.localResources(“fioridemo”);
- jQuery.sap.require(“sap.ui.core.routing.Router”);
console.log(“router initialised”);
jQuery.sap.require(“sap.ui.core.routing.HashChanger”);
console.log(“Hash changer initialised”);
var oShell = sap.ui.ux3.Shell(“shellId”,{
appTitle: “fioridemo”,
showLogoutButton: false,
showSearchTool: false,
worksetItems: [
new sap.ui.ux3.NavigationItem(“page1Id”,{
key: “Page1”,
text: “Page1”
}),
new sap.ui.ux3.NavigationItem(“page2Id”, {
key: “Page2”,
text: “Page2”
}),
new sap.ui.ux3.NavigationItem(“page3Id”, {
key: “Page3”,
text: “Page3”
})
],
worksetItemSelected: function(e) {
this.removeAllContent();
var selected = e.getParameter(“key”);
var oHashChanger = new sap.ui.core.routing.HashChanger();
oHashChanger.setHash(router.getURL(selected));
},
content: [new sap.ui.view({
id: “view1Id”,
viewName: “fioridemo.Page1”,
type: sap.ui.core.mvc.ViewType.JS
})]
});
console.log(“shell variable created”);
oShell.placeAt(‘container’);
console.log(“shell placed at container”);
var router = new sap.ui.core.routing.Router([
{
pattern: “”,
name: “Page1”,
view: “fioridemo.Page1”,
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: “shellId”,
targetAggregation: “content”, //content/Page
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem(“page1Id”);
}
},
{
pattern: [“Navigate2”, “Page2”],
name: “Page2”,
view: “fioridemo.Page2”,
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: “shellId”,
targetAggregation: “content”,
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem(“page2Id”);
}
} ,
{
pattern: [“Navigate3”, “Page3”],
name: “Page3”,
view: “fioridemo.Page3”,
viewType: sap.ui.core.mvc.ViewType.JS,
targetControl: “shellId”,
targetAggregation: “content”,
clearTarget: true,
callback: function() {
oShell.setSelectedWorksetItem(“page3Id”);
}
}
]);
console.log(“router created”);
router.register(“appRouter”);
console.log(“router registerd”);
router.initialize();
console.log(“router initialized”);
</script>
</head>
<body class=“sapUiBody” role=“application”>
<div id=“container”></div>
</body>
</html>
Step 3: In the Page1.view.js , enter the below code:
- sap.ui.jsview(“fioridemo.Page1”, {
/** 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 fioridemo.Page1
*/
getControllerName : function() {
return “fioridemo.Page1”;
},
/** 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 fioridemo.Page1
*/
createContent : function(oController) {
var oText = new sap.ui.commons.TextView({
text: “Enter First Name: “
})
var oInput = new sap.ui.commons.TextField(this.createId(“fname”),{
value: “Varun”
});
var oButton = new sap.ui.commons.Button({
text: “submit”,
press: function() {
oController.navigateToPage2(“Page2”);
}
});
var ele = [oText, oInput, oButton];
return ele;
}
});
Step 4 : In Page1.controller.js enter the below code:
- sap.ui.controller(“fioridemo.Page1”, {
/**
* 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 fioridemo.Page1
*/
onInit: function() {
this.myModel = new sap.ui.model.json.JSONModel();
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller’s View is re–rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf fioridemo.Page1
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post–rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf fioridemo.Page1
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf fioridemo.Page1
*/
// onExit: function() {
//
// }
navigateToPage2: function(view) {
var json = {};
json.fname = sap.ui.getCore().byId(this.createId(“fname”)).getValue();
this.myModel.setData(json);
sap.ui.getCore().setModel(this.myModel);
var oRouter = sap.ui.core.routing.Router.getRouter(“appRouter”);
oHashChanger = sap.ui.core.routing.HashChanger.getInstance();
oHashChanger.setHash(oRouter.getURL(view));
}
});
Step 5 : Create new view “Page2” and “Page3”.
File->New->Other->SAPUI5 Application Development->View-> Enter name “Page2”.
File->New->Other->SAPUI5 Application Development->View-> Enter name “Page3”.
In the “Page2.view.js” enter the below code:
- sap.ui.jsview(“fioridemo.Page2”, {
/** 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 fioridemo.Page2
*/
getControllerName : function() {
return “fioridemo.Page2”;
},
/** 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 fioridemo.Page2
*/
createContent : function(oController) {
var oText = new sap.ui.commons.TextView({
text: “Your First Name is: “
});
var oInput = new sap.ui.commons.TextField(this.createId(“fname”),{
value: “{/fname}”
});
var oText1 = new sap.ui.commons.TextView({
text: “Enter Last Name: “
})
var oInput1 = new sap.ui.commons.TextField(this.createId(“lname”),{
value: “cbv”
});
var oButton = new sap.ui.commons.Button({
text: “submit”,
press: function() {
oController.navigateToPage3(“Page3”);
}
});
var ele = [oText,oInput,oText1, oInput1, oButton];
return ele;
}
});
In the Page2.controller.js enter the below code:
- sap.ui.controller(“fioridemo.Page2”, {
/**
* 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 fioridemo.Page1
*/
onInit: function() {
this.myModel = new sap.ui.model.json.JSONModel();
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller’s View is re–rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf fioridemo.Page1
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post–rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf fioridemo.Page1
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf fioridemo.Page1
*/
// onExit: function() {
//
// }
navigateToPage3: function(view) {
var json = {};
json.fname = sap.ui.getCore().byId(this.createId(“fname”)).getValue();
json.lname = sap.ui.getCore().byId(this.createId(“lname”)).getValue();
this.myModel.setData(json);
sap.ui.getCore().setModel(this.myModel);
var oRouter = sap.ui.core.routing.Router.getRouter(“appRouter”);
oHashChanger = sap.ui.core.routing.HashChanger.getInstance();
oHashChanger.setHash(oRouter.getURL(view));
}
});
In the Page3.view.js , enter the below code:
- sap.ui.jsview(“fioridemo.Page3”, {
/** Specifies the Controllerbelonging to this View.
* In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.
* @memberOf fioridemo.Page3
*/
getControllerName : function() {
return “fioridemo.Page3”;
},
/** 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 fioridemo.Page3
*/
createContent : function(oController) {
var oText0 = new sap.ui.commons.TextView({
text: “Your Full Name is :”
});
var oText = new sap.ui.commons.TextView({
text: “{/fname}”
});
var oText1 = new sap.ui.commons.TextView({
text: “{/lname}”
});
var ele = [oText0,oText,oText1];
return ele;
}
});
Step 6 : Run the application
Right click “index.htm”->Run On Server->Select Tomcat 7->Select the current project and press Finish.
Enter the First Name and press “submit” button:
PAGE2 will be dispayed .First name from PAGE1 is displayed ,also enter the last name and press “submit” button.
PAGE3 will be displayed with the following output:
