SAPUI5 Development

how to do OData update operation from SAPUI5 Application?

                  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.
  3. <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>
    
  4. Now our view will look like this.
  5. 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.
  6.    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");
        }
       });
      }
    
  7. 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!!

9 comments :

  1. What about posting on create and delete as well

    ReplyDelete
    Replies
    1. I have written about create and delete also.You can search for the posts
      Thanks

      Delete
  2. Is it possible to manipulate the oModel data on client without updating to backend? I like to delete rows, change rows and edit rows and send the data back to backend only if for instance a submit button was pressed.

    ReplyDelete
    Replies
    1. Yes it is possible.That is where batch operation comes into play.See my Batch operation SAPUI5 tutorial

      Delete
  3. Are you sure that method: "PUT" is supported? I am doing a request with that parameter, but the request still is with POST method.

    ReplyDelete
    Replies
    1. Yes . Update(PUT) operations are also supported in batch operations. This may help you

      Delete
    2. Even though the method is explicitly set as "PUT", why is the call in network displayed as "POST"?

      Delete

Powered by Blogger.