how to do OData delete operation from SAPUI5 Application?

Tweet

The delete operation comes into play whenever an existing entry resource needs to be deleted.The function for deletion is remove.The remove function triggers a DELETE 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 delete operation in flightset.

Pre-requisites

1. FLIGHTSET_DELETE_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 'delete operation' is like below.We will delete the entry with carrid AI.
   
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 delete 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="AI"/>
       <Label text="Carrier name"/>
       <Input id="carrname" value="Air India"/>
       <Label text="Currency code"/>
       <Input id="currcode" value="INR"/>
       <Label text="Carrier Url"/>
       <Input id="url" value="http://airindia.com"/>
      </f:content>
     </f:SimpleForm>
     <Button text="delete" press="onDelete"></Button>
    </content>
   </Page>
  </pages>
 </App>
</mvc:View>

3. Now our view will look like this.
   
4. Add delete logic inside onDelete method of the view's controller.Copy paste below logic.Here we access the key field carrid  and pass it to oModel.remove function.



  onDelete: function() {
   /*delete operation*/
   var oModel = this.getView().getModel();
   

   var Carrid = this.getView().byId("carrid").getValue();

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



5. Run the application and Press update button.You will get a success alert if deletion was successful.Go to sap backend and check the table SCARR.Now you can see the carrier details of AI carrier is deleted.
   

If you enjoyed this post, Please Share!!