Skip to Content
avatar image
Former Member

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

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Oct 17, 2016 at 07:03 AM

    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

    Add comment
    10|10000 characters needed 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. :)

  • Oct 18, 2016 at 02:45 PM

    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

    Add comment
    10|10000 characters needed characters exceeded