Use SAP ui5 application to consume create and delete operations of OData in business application studio

stay  SAP Business Application Studio  Create a  SAP UI5  application , It should have the following project structure ：

open  

Home.view.xml

,  Add one  Create  Button ：

<Button id=&quot;createButton&quot; icon=&quot;sap-icon://add&quot; tooltip=&quot;Create&quot; visible=&quot;true&quot; press=&quot;onOpenAddDialog&quot;>


After the button is clicked , We expect a dialog box to pop up , The implementation source code of the dialog box is as follows ：

Open and close the source code of the dialog ：

onOpenAddDialog: function () {
 this.getView().byId("OpenDialog").open();
},
onCancelDialog: function (oEvent) {
 oEvent.getSource().getParent().close();
},


Called in the dialog  onCreate  The method code is as follows ：

onCreate: function () {
 var oSo = this.getView().byId("idSo").getValue();
 if (oSo !== "") {
 const oList = this._oTable;
 const oBinding = oList.getBinding("items");
 const oContext = oBinding.create({
 "soNumber": this.byId("idSo").getValue(),
 "customerName": this.byId("idCustName").getValue(),
 "customerNumber": this.byId("idCustomer").getValue(),
 "PoNumber": this.byId("idPo").getValue(),
 "inquiryNumber": this.byId("idInqNumber").getValue() 
 });
 oContext.created()
 .then(()=>{
 // that._focusItem(oList, oContext);
 this.getView().byId("OpenDialog").close();
 });
 
 }else {
 MessageToast.show("So cannot be blank");
 }
 
 },


this._oTable

  Assignment , It happened in  

onInit

  In the hook function ：

this._oTable = this.byId("table0");


So let's test that out . Click on  Create  Button , Pop-up dialog box ：

After maintaining the required fields , Click on  Create：

You can see the successfully created  Sales Order：

The following is the implementation of deletion .

Let's design a  Edit  Button , Only re-entry  Edit  Pattern , It is allowed to click the delete button ：

<Button id=&quot;deleteButton&quot; icon=&quot;sap-icon://delete&quot; tooltip=&quot;Delete&quot; visible=&quot;false&quot; press=&quot;onDelete&quot;>
<Button id=&quot;editModeButton&quot; visible=&quot;true&quot; icon=&quot;sap-icon://edit&quot; tooltip=&quot;Edit&quot; press=&quot;onEditMode&quot;>


Edit  Button implementation logic ：

onEditMode: function(){
 this.byId("editModeButton").setVisible(false);
 this.byId("saveButton").setVisible(true);
 this.byId("deleteButton").setVisible(true);
 this.rebindTable(this.oEditableTemplate, "Edit");
}


Realization  

onDelete

  function ：

onDelete: function(){

 var oSelected = this.byId("table0").getSelectedItem();
 if(oSelected){
 var oSalesOrder = oSelected.getBindingContext("mainModel").getObject().soNumber;
 
 oSelected.getBindingContext("mainModel").delete("$auto").then(function () {
 MessageToast.show(oSalesOrder + " SuccessFully Deleted");
 }.bind(this), function (oError) {
 MessageToast.show("Deletion Error: ",oError);
 });
 } else {
 MessageToast.show("Please Select a Row to Delete");
 }
 
 },


OData V4  The model allows developers to specify whether to bundle requests as batch requests (Batch request) send out , And when to send the request .

Parameters  groupId  Specify the default batch group , The default is  

$auto

.  Developers can use parameters  updateGroupId  Set up batch groups for update requests .  If this parameter is not set , Will use  groupId.

The following code instantiates a model , The model will batch groups “myAppUpdateGroup” All update requests in are bundled together ;  And then you can use  oModel.submitBatch("myAppUpdateGroup")  Send batch request .

sap.ui.define(["sap/ui/model/odata/v4/ODataModel"], function (ODataModel) {
 var oModel = new ODataModel({
 serviceUrl : "/sap/opu/odata4/IWBEP/V4_SAMPLE/default/IWBEP/V4_GW_SAMPLE_BASIC/0001/",
 synchronizationMode : "None",
 updateGroupId : "myAppUpdateGroup"
 });
});