I just started UI5, In my learning process I went through lot of blogs and you tube videos after writing my Hello world program
Then I started thing of creating 2 views and passing data from first view to second view. I searched in lot but lot people are suggesting advanced controls while navigating like Shell
But I thought of using as simple as ( mostly code generated by Eclipse)
If any body want to try this example don't just try to copy the code try to understand the concepts so that it will be easy when you are moving ahead in learning UI5 concepts
Goal :
I have Page1 which has 3 input fields where I can enter data.
Once the users enters data submits the data using Button, then it has to move the second Page and need to show the data which we entered in Page1
In page2 we page Navigation set to back Page1
Info : Please observe the in line code comments to get more about concepts.
Project :
You can add 2 pages as shown below
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,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("zbu_testing2");
var app = new sap.m.App({id:"myApp1",initialPage:"idpage11"});
// Create any no of pages but those should have id
var page11 = sap.ui.view({
id:"idpage11",
viewName:"zbu_testing2.page1",
type:sap.ui.core.mvc.ViewType.JS});
var page22 = sap.ui.view({
id:"idpage22",
viewName:"zbu_testing2.Page2",
type:sap.ui.core.mvc.ViewType.JS});
// Add all the pages to the App
app.addPage(page11)
app.addPage(page22);
// As we assigned defalut page while creatign the App when we execute it will show
// page1 by default
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------
page1.view.js
------------------
In this page I used Layout Matrix as I was showing 3 input fields.
I recommend if you are starter use only one input box and button
If you are ok with Matrix Layout you use
this code will be in createContent function
var oLayout = new sap.ui.commons.layout.MatrixLayout();
oLayout.setLayoutFixed(true);
oLayout.setColumns(2);
oLayout.setWidth("500px");
oLayout.setWidths(["150px","150px"])
//Name
var oText = new sap.ui.commons.TextView({text:"Enter Your Name :"});
var oInput = new sap.ui.commons.TextField({id:"input1",value:"?"});
// Adding row to Layout
oLayout.createRow(oText,oInput)
// Age
var oText = new sap.ui.commons.TextView({text:"Age :"});
var oInput = new sap.ui.commons.TextField({id:"input2",value:"?"});
oLayout.createRow(oText,oInput)
// ***
var oText = new sap.ui.commons.TextView({text:"***"});
var oInput = new sap.ui.commons.TextField({id:"input3",value:"?"});
oLayout.createRow(oText,oInput)
// Submit Button
var oButton = new sap.ui.commons.Button("BtnId2",{text:"Submit Details "});
// We are pasing Event while calling funciton in cotroller
// oController.Navigate means Navigate funciton is available in Controller class
// if write like this function(oEvent){Navigate(oEvent)} then Navigate funciton should present locally
// it means page itself
oButton.attachPress(function(oEvent){oController.Navigate(oEvent)})
// Create Cell as we need to place button in center with merging two columns to one
var oCell = new sap.ui.commons.layout.MatrixLayoutCell();
oCell.setRowSpan(2);
oCell.addContent(oButton);
oCell.setHAlign(sap.ui.commons.layout.HAlign.Center);
oLayout.createRow(oCell);
// Change title what ever you want
// In content add Layout object
// If you are not using Layout add text and button objects separted by comma ex; [oInput,oButton]
return new sap.m.Page({
title: "Home Page",
content: [ oLayout ]
});
----------------------------------------------------------------------------------------------------------------------------------------------------------
page1.controller.js
first create Model in OnInit Method
In same controller enable OnInit function to create Model
onInit: function() {
this.myModel = new sap.ui.model.json.JSONModel();
},
OnInit method calls only once in entire application
In controller class add the following function at last
Navigate:function(oEvent){
var EventID = oEvent.getSource().getId();
//alert("Hello");
//alert(EventID);
// Get the reference of App by using id which is declared in Index page
app = sap.ui.getCore().byId("myApp1");
//alert(app);
//Get the value from Input field
var InputText1 = sap.ui.getCore().byId("input1").getValue();
var InputText2 = sap.ui.getCore().byId("input2").getValue();
var InputText3 = sap.ui.getCore().byId("input3").getValue();
//alert(InputText);
// var context = oEvent.oSource.getBindingContext();
var oView2 = app.getPage("idpage22");
// oView2.setBindingContext(context);
// Get the reference of View 2
//oView2 = sap.ui.getCore().byId("idpage22");
//alert(oView2);
//Now we need to pass the values which are required from Page1 to Page2
// Collect them arrary and assign that array to Model
var myArray = {};
myArray.input1 = InputText1;
myArray.input2 = InputText2;
myArray.input3 = InputText3;
// With Above code Array has values with variables input1,input2 and input3
// for Clarity you can uncomment the following line
//console.log(myArray);
this.myModel.setData(myArray);
sap.ui.getCore().setModel(this.myModel);
//console.log(this.myModel);
app.to(oView2);
//alert(sap.ui.getCore().byId("pg2_btn"));
}
-----------------------------------------------------------------------------------------------------------------------------------------
similarly add following code to Page2
page2.view,js
var oLayout = new sap.ui.commons.layout.MatrixLayout();
oLayout.setColumns(2);
oLayout.setLayoutFixed(true);
oLayout.setWidth("400px");
oLayout.setWidths(["150px","250px"]);
var oTextLabel = new sap.ui.commons.TextView({text:"Name :"});
var oText = new sap.ui.commons.TextView({text:"{/input1}"});
oLayout.createRow(oTextLabel,oText);
var oTextLabel = new sap.ui.commons.TextView({text:"Age :"});
var oText = new sap.ui.commons.TextView({text:"{/input2}"});
oLayout.createRow(oTextLabel,oText);
var oTextLabel = new sap.ui.commons.TextView({text:"*** :"});
var oText = new sap.ui.commons.TextView({text:"{/input3}"});
oLayout.createRow(oTextLabel,oText);
//console.log(sap.ui.getCore().getModel());
// Here we are adding 1 property and event
// showNavButton and navButtonPress
return new sap.m.Page({
title: "Details",
showNavButton:true,
content: [oLayout ],
navButtonPress: function(oEvent){oController.backToHome(oEvent)}
});
---------------------------------------------------------------------------------------------------------------------------------------------
page2.controller.js
Add reuired function
backToHome : function(oEvent){
//Getting view object of Home page or First Page
oView = sap.ui.getCore().byId("idpage11");
app.to(oView);
}
--------------------------------------------------------------------------------------------------------------------------------------------
In nutshell we are capturing all the data from page1 and storing in Array and that array is adding to model.
Model is added Core() which can be accessed from 2nd page
Thanks
Uma