Skip to Content
1

pass captured values in different views in UI5 java script based

Feb 27, 2017 at 08:32 PM

88

avatar image
var myModel = new sap.ui.model.json.JSONModel();
var user = sap.ui.getCore().byId("iduser").getValue();
var password = sap.ui.getCore().byId("idpassword").getValue();
var myArray = {};
myArray.input1 = user;
myArray.input2 = password;
myModel.setData(myArray);
sap.ui.getCore().setModel(myModel);

The above code is written in my first.controller.js

Now I want to use the values in my second view.

In my second view I can get the text view output dynamically with the values

But how I can get the value ("{/input1}") in a variable so that I can use it to somewhere else.

var user2o = new sap.ui.commons.TextView({
id : "iduser2",
text : "{/input1}"
});
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Srikanth KV Feb 27, 2017 at 08:39 PM
0

use this code below.

var oModel = sap.ui.getCore().getModel();  //returns current model instance
var input = oModel.getProperty("input1");
Show 3 Share
10 |10000 characters needed characters left characters exceeded

Seems its not working..

Can you please tell me what are the other way to pass selected values to different views.

0

Try this..I think i missed "/" in second line when accessing the property

var oModel = sap.ui.getCore().getModel();  //returns current model instance
var input = oModel.getProperty("/input1");
0

I had tried that as well but when using the second line, my o/p itself i not appearing for my view.

Is there any specific reason that getProperty is not accepting in my view?

0
PS GOSWAMI Feb 28, 2017 at 10:07 AM
0

Here is my whole code:

So please tell me how to capture the value of "{/input1}" in a variable for further use in my second view.

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.getCore().AppContext = new Object();

sap.ui.localResources("ztest_two_view");
var view1 = sap.ui.view({id:"idfirst1", viewName:"ztest_two_view.first", type:sap.ui.core.mvc.ViewType.JS});
var view2 = sap.ui.view({id:"idsecond2", viewName:"ztest_two_view.second", type:sap.ui.core.mvc.ViewType.JS});

var panelo = new sap.ui.commons.Panel({ id : "idpanel",
height : "500px",
showCollapseIcon : true,
content : view1
});
panelo.placeAt("content");
</script>
</head>
<body role="application">
<div id="content"></div>
</body>
</html>

FIRST.VIEW.JS

sap.ui.jsview("ztest_two_view.first", {
/** 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 ztest_two_view.first
*/ 
getControllerName : function() {
return "ztest_two_view.first";
},
/** 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 ztest_two_view.first
*/ 
createContent : function(oController) {
var usero = new sap.ui.commons.TextField({id:"iduser"});
var passwordo = new sap.ui.commons.PasswordField({id:"idpassword"});

var buttono = new sap.ui.commons.Button({
text : "SUBMIT",
press : oController.nexttoview2
});

var sarray = [];

sarray.push(usero);
sarray.push(passwordo);
sarray.push(buttono);
return sarray;
}
});

FIRST.CONTROLLER.JS

sap.ui.controller("ztest_two_view.first", {
/**
* 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 ztest_two_view.first
*/
//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 ztest_two_view.first
*/
//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 ztest_two_view.first
*/
//onAfterRendering: function() {
//
//},
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf ztest_two_view.first
*/
//onExit: function() {
//
//}

nexttoview2: function()
{
var myModel = new sap.ui.model.json.JSONModel();
var user = sap.ui.getCore().byId("iduser").getValue();
var password = sap.ui.getCore().byId("idpassword").getValue();

//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 = user;
myArray.input2 = password;
// With Above code Array has values with variables input1,input2 and input3
// for Clarity you can uncomment the following line
//console.log(myArray);
myModel.setData(myArray);
sap.ui.getCore().setModel(myModel);
var panel = sap.ui.getCore().byId("idpanel");

// Get the reference of VIEW2
var view2 = sap.ui.getCore().byId("idsecond2");

panel.removeAllContent();

panel.addContent(view2);
}
});

SECOND.VIEW.JS

sap.ui.jsview("ztest_two_view.second", {
/**
 * 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 ztest_two_view.second
 */
getControllerName : function() {
return "ztest_two_view.second";
},
/**
 * 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 ztest_two_view.second
 */
createContent : function(oController) {

var texto = new sap.ui.commons.TextView({
id : "iduser2",
text : "{/input1}"
});

//var oModel = sap.ui.getCore().getModel();  //returns current model instance
//var input123 = oModel.getProperty("/input1");

var buttono = new sap.ui.commons.Button({
text : "BACK",
press : oController.backtoview1
});

var sarray = [];

sarray.push(texto);
sarray.push(buttono);
return sarray;
}
});

SECOND.CONTROLLER.JS

sap.ui.controller("ztest_two_view.second", {
/**
* 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 ztest_two_view.second
*/
//onInit: function() {
//
//},
/**
* 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 ztest_two_view.second
*/
//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 ztest_two_view.second
*/
//onAfterRendering: function() {
//
//},
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf ztest_two_view.second
*/
//onExit: function() {
//
//}

backtoview1: function()
{
// Get the reference of PANEL 
var panel = sap.ui.getCore().byId("idpanel");

// Get the reference of VIEW2
var view1 = sap.ui.getCore().byId("idfirst1");

panel.removeAllContent();

panel.addContent(view1);
}
});
Show 1 Share
10 |10000 characters needed characters left characters exceeded

I think the best way to learn about it is to go through Walk through tutorial

0
saumil sharma Feb 28, 2017 at 05:31 PM
0

Partha,

If you want to use you data from view 1 to view 2.

1. Create a blank JSON model and set it to some name ("model1")in the init method of controller 2 , please check the syntax

,so that while the application loads this gets initialized and will be available to whole of your application i.e. in controller 1 as well.

2. Now that your controller 1 can acess this model, set your whatever data you want to use in your view 2 to this model.

--first create a new model that has your new data,

--set this model to your "model1".

Let me know f you find any trouble.

Happy Coding!!

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Saumil,

I have followed the similar steps and able to display the data in view2 as TextView or TextField UI element.

You can look into the above code.

But here I wanted to get the value in a variable in my view2 so that I can use it other ways.

So here my point is how I can capture the value of "{/input1}" in a variable.

Waiting for your valuable input.

0

Partha,

if you are binding this value "{/input1}" to some variable, doesn't it mean that you already have this value in some model?

And if you do have this value already present in your application, then why do you need to again capture it from the view2 after providing it to the view2?

Please explain! May be I didn't understand properly.

0