how to do OData update operation from SAPUI5 Application?

Tweet

                  The update operation comes into play whenever an existing entry resource needs to be changed.The update function triggers a PUT/MERGE request to an OData service which was specified at creation of the OData model.
                  In this tutorial we will use our flight service and perform update operation in flightset.

Pre-requisites

1. FLIGHTSET_UPDATE_ENTITY method implemented in sap backend flight service.
2. SAPUI5 Application created.
3. OData service (I am using flight service created in earlier tutorials)added to the created application and odata model is set.

Steps

1. Our SCARR table before update is like below.We will update the entry with carrid AC.
   
   
   
2. First put below code in our view.Here we will hardcode the flight details in a simple form and place a button below it.On press of the button we will update the entry through OData.

<mvc:View controllerName="odataaaa.controller.View1"
 xmlns:html="http://www.w3.org/1999/xhtml"
 xmlns:f="sap.ui.layout.form"
 xmlns:mvc="sap.ui.core.mvc"
 xmlns="sap.m">
 <App>
  <pages>
   <Page title="{i18n>title}">
    <content>
     <f:SimpleForm id="simpleFormChange" title="Carrier Details" editable="true" class="editableForm sapUiSmallMarginTopBottom">
      <f:content>
       <Label text="Carrier id"/>
       <Input id="carrid" value="AC"/>
       <Label text="Carrier name"/>
       <Input id="carrname" value="Air Canada100"/>
       <Label text="Currency code"/>
       <Input id="currcode" value="CAD"/>
       <Label text="Carrier Url"/>
       <Input id="url" value="http://aircanada.com"/>
      </f:content>
     </f:SimpleForm>
     <Button text="update" press="onUpdate"></Button>
    </content>
   </Page>
  </pages>
 </App>
</mvc:View>

3. Now our view will look like this.
   
4. Add update logic inside onUpdate method of the view's controller.Copy paste below logic.Here we access the form values and pass it to oModel.update function.

   onUpdate: function() {
   /*update operation*/
   var oModel = this.getView().getModel();
   var oEntry = {};

   oEntry.Carrid = this.getView().byId("carrid").getValue();
   oEntry.Carrname = this.getView().byId("carrname").getValue();
   oEntry.Currcode = this.getView().byId("currcode").getValue();
   oEntry.Url = this.getView().byId("url").getValue();

   oModel.update("/FlightSet('"+oEntry.Carrid+"')", oEntry, {
    method: "PUT",
    success: function(data) {
     alert("success");
    },
    error: function(e) {
     alert("error");
    }
   });
  }

5. Press update button.You will get a success alert if updation was successful.Go to sap backend and check the table SCARR.Now you can see the carrier details of AC carrier is updated.
   

Note:If you are accessing the model from onInit method(this.getView().getModel();)of the controller you will get undefined error.Use var oModel = this.getOwnerComponent().getModel(); in onInit method

If you enjoyed this post, Please Share!!