Skip to Content

pass captured values in different views in UI5 java script based

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}"
});
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Feb 27, 2017 at 08:39 PM

    use this code below.

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

  • Feb 28, 2017 at 10:07 AM

    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);
    }
    });
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 28, 2017 at 05:31 PM

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

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member PS GOSWAMI

      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.