Simple way to Navigate between 2 views and passing...

Former Member · ‎01-31-2016

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'/>

    // 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

//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

Simple way to Navigate between 2 views and passing data from First to Second Page in MVC

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z