SAPUI5: How to bind single property from OData to Input field

[Former Member]

Hi Experts,

I am new in SAP UI5 and I'd like to bind a value from OData model to Input field.

I tried to use read() in OData model to get single entity and bind property "Name" to input field. However it doesn't work.

Here is the code in my view. I have two input fields and I want to bind them with same property "Name".

<mvc:View controllerName="Two_Way_OData.controller.TwoWayBind" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
	<Panel headerText="Data Binding for OData model" class="sapUiResponsiveMargin" width="auto">
		<content>
			<Label text="Employee ID 1" class="sapUiSmallMargin"/>
			<Input id = 'EmpId1' value="{Name}" valueLiveUpdate="true" width="200px" />
				
			<Label text="Employee ID 1" class="sapUiSmallMargin"/>
			<Input id = 'EmpId2' value="{Name}" valueLiveUpdate="true" width="200px" enabled="false" />
				
			<Button text="Sumbit" press="Submit" />
		</content>
	</Panel>
</mvc:View>

As below is the code in my view controller.

			var oView = this.getView();
            // Get OData Service
			var sServiceUrl = this.getOwnerComponent().getMetadata().getManifestEntry("sap.app").dataSources["Z_EMP_INFO_SRV"].uri;
			
            // Create OData Model
			var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl);
			
			oView.setModel(oModel);
			
			// Read single line
			oModel.read("EmpDetailsSet(EmpId='6666')");

Hope any expert could help me with that. A sample code would be highly appreciated.

Thanks in advance. 🙂

[former_member227918 · Accepted solution]

Hi,

you can bind as below ways:

without .read operation:

var sBindingPath = "/EmpDetailsSet(EmpId='6666')";
this.getView().bindElement(sBindingPath); // instead of view, you can bind particular element also like form etc.

with .read:

var aFilter =[];
aFilter.push(newsap.ui.model.Filter("EmpId", sap.ui.model.FilterOperator.EQ, '6666');
oModel.read("/EmpDetailsSet", { filters: aFilter,
 success: function(oData, resonse) {
  // use oData for a model and set it to view
 },
 error: function(oError) { //read error}
});

Hope will help you.

Regards,

Akhilesh

[Former Member · Accepted solution]

Hi Akhilesh,

Thank you so much for your solution. The first one really works.

For using filter, unfortunately, it cannot work. Is there any thing wrong in my code?

			var oView = this.getView();
            // Get OData Service
			var sServiceUrl = this.getOwnerComponent().getMetadata().getManifestEntry("sap.app").dataSources["Z_EMP_INFO_SRV"].uri;
			
            // Create OData Model
			var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl);
			
			
			var aFilter =[];
			aFilter.push(new sap.ui.model.Filter("EmpId", sap.ui.model.FilterOperator.EQ, '6666'));
			
			oModel.read("/EmpDetailsSet",
			{
				filters: aFilter,
				success: function(oData, resonse) {
				  // use oData for a model and set it to view
				  oData.setModel(oModel);
				 },
				 error: function(oError) { }
			}
			);

Thanks and looking forward to your reply. 🙂

[former_member227918]

read request is successfully triggered ? are you getting data in oData ? you can check console if any error

your success function code is not correct,

success: function(oData, response) {
  //create new model here 
  //set oData to this new model
  //set this new model to view
}

but, in your scenario I think what you already did option first is correct.

Regards,

Akhilesh