How to bind JSON data returning multiple data sets to the view (UI controls)?

[former_member573574]

Hi folks,

The question is how to bind the JSON object returning multiple values to the view ?

I am just displaying 4 Text fields in the browser and want to bind the data from the Model object. But I am unable to get the syntax of how I would bind the 2nd data set's(id 101) property 'currency' to the UI control ?

I have the JSON file as:

{
	"empstr": [{
			"eId": 100,
			"eName": "Prathamesh",
			"eSalary": 2400,
			"currency": "INR"
		}, {
			"eId": 101,
			"eName": "Akhilesh",
			"eSalary": 2200,
			"currency": "DoL"
		}


	]


}

and the UI controls in the view as:

createContent: function (oController) {
	var oSimpleform = new sap.ui.layout.form.SimpleForm("idsimple1", { 
		layout: "ResponsiveGridLayout",
		labelSpanL : 7,
		emptySpanL : 3,
		columnsL : 1,
		content : [		
			new sap.ui.commons.Label({text:"EmpNo"}),
			new sap.ui.commons.TextField({
						  width:"200px",
			                          value: "{/empstr/eId}"     
						     }),
   			new sap.ui.commons.Label({ text:"EmpName" }),
			new sap.ui.commons.TextField().bindValue("/empstr/eName"),										       			new sap.ui.commons.Label({text:"Empsal"}),
 	                new sap.ui.commons.TextField({
                                     width:"200px"}).bindProperty("value","/empstr/eSalary"),
 							    								
		        new sap.ui.commons.Label({text:"currency"}),
			new sap.ui.commons.TextField({
						  width:"200px",
						  value: {
							path: "/empstr/currency"
							  }
						     })
	                  ]
			}); 
		return (oSimpleform);
	}

Now in order to just bind the currency from 2nd data set as 'DOLr' on the view, how is the path that I need to input instead of '/empstr/currency' ? Now it is showing me INR on the Text field when browser is loaded. In order to display 'DOLr' from the 2nd data set of the JSON, what is the path that I need to enter?

I am not getting it. I appreciate your time. Thanks in advance !

Note: The above are just 4 different ways of property binding (i.e., on the textfields, I am using 4 different types of syntax to achieve property binding)

P.S. : I know it is a petty doubt, but any help would be appreciated. I prefer being shameless asking any doubt. Hope you guys support.

[former_member182862 · Accepted solution]

HI

here is what I have to get this to work

sap.ui.define([
  'sap/ui/core/mvc/Controller',
  'sap/ui/layout/form/SimpleForm',
  'sap/m/Label',
  'sap/m/Input',
  'sap/m/Text',
  'sap/ui/model/json/JSONModel'], function(Controller, SimpleForm, Label, Input, Text, JSONModel) {
  sap.ui.jsview("myView.Template", {
    getControllerName: function() {
      return "myView.Template";
    },
    createContent: function(oController) {
      return new SimpleForm({ 
        layout: "ResponsiveGridLayout",
        labelSpanL : 7,
        emptySpanL : 3,
        columnsL : 1,
        content : [		
          new Label({text:"EmpNo"}),
          new Input({
            width:"200px",
            value: "{/empstr/0/eId}"     
          }),
          new Label({
            text:"EmpName"
            }),
          new Input({
            value: "{/empstr/0/eName}"
          }),
          new Label({
            text: "Empsal"
          }),
          new Input({
            value: "{/empstr/0/eSalary}",
            width:"200px"
          }),
          new Label({
            text: "currency"
          }),
          new Input({
            width:"200px",
            value: "{/empstr/1/currency}"
          })
        ]
      }); 
    }
  });
  Controller.extend("myView.Template", {
    onInit: function(oEvent) {
      this.getView().setModel(new JSONModel({
        "empstr": [{
          "eId": 100,
          "eName": "Prathamesh",
          "eSalary": 2400,
          "currency": "INR"
        }, {
          "eId": 101,
          "eName": "Akhilesh",
          "eSalary": 2200,
          "currency": "DoL"
        }
       ]
      }))
    },
  });
});

var view = sap.ui.view({
  type: sap.ui.core.mvc.ViewType.JS,
  viewName: "myView.Template"
});
view.placeAt("content");

https://jsbin.com/benogay/edit?js,output

and I suggest that we move away from sap.ui.commons control because they are deprecated.

https://blogs.sap.com/2016/07/25/end-of-road-for-sapuicommons-library/

[former_member573574 · Accepted solution]

Hi Dennis,

Thanks for your valuable input.

and yes, I will use sap.m API instead of using sap.ui.commons.