Skip to Content
0

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

Oct 16, 2016 at 10:10 AM

1.9k

avatar image
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. :)

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
Akhilesh Upadhyay Oct 17, 2016 at 07:03 AM
0

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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. :)

0
Akhilesh Upadhyay Oct 18, 2016 at 02:45 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded