SAPUI5 Development

how to do OData delete operation from SAPUI5 Application?

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.
  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="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>
    
  4. Now our view will look like this.
  5. 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.

  6.   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");
        }
       });
      }
    
    
    

  7. 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!!

9 comments :

  1. Hi Rajeesh,
    thanks for the example. How can I achive the following behaviour using your oModel bound to OData v2: the oModel.remove method should be called but the DELETE request to backend server should not be sent automatically. Instead, the row should be deleted in the client and later on posted to backend if oModel.submitChanges is executed in a button press event handler for instance? Is this possible?

    Yours
    Stephan

    ReplyDelete
    Replies
    1. Hi Stephan ,
      I think you are talking about batch operation. This tutorial may help you Batch operation SAPUI5

      Delete

Powered by Blogger.