Do OData Create & Delete Operation in UI5 Application on BAS for CAPM Full Stack UI5 Development

[rohitvolvo127]

Welcome to the Seventh Episode of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have set up Development Space in BAS, created entities, exposed and Integrated Odata services. In this episode, we will do Create and Delete Operation on the Table created in the previous episode.

Assumption(OR Must Have to Start):

• You have followed our previous episode where we created the UI application & Integrated the Odata Service.

Your project structure should look like below if you carefully followed all our previous episodes.



We will do 2 Things :

1. Create Operation


2. Delete Operation

 

Create Operation

So let's first open Home.view.xml or Home View and add a Create Button. Copy the below code & paste into your Home View File.

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

Let's add a Dailog Box which will open on pressing the Create Button. Copy the below code & paste into your Home View File.

 <dependents>

    <Dialog id="OpenDialog" title="Create Sales Order">

      <buttons>

         <Button id="confirmCreate" text="Create" press=".onCreate" type="Emphasized" />

         <Button id="cancelCreate" text="Cancel" press="onCancelDialog" type="Transparent" />

     </buttons>

     <form:SimpleForm editable="true" layout="ResponsiveGridLayout">

       <form:content>

          <Label text="SO Number" required="true" />

          <Input id="idSo" change="onNameChange" />

          <Label text="Customer Name" />

          <Input id="idCustName" rows="4" />

          <Label text="Customer Number" />

          <Input id="idCustomer" rows="4" />

          <Label text="Po Number" />

          <Input id="idPo" rows="4" />

          <Label text="Inquiry Number" />

          <Input id="idInqNumber" rows="4" />

       </form:content>

    </form:SimpleForm>

    </Dialog>

</dependents>

                                                

Lets Define Dialog Open & Close functions.

onOpenAddDialog: function () {

   this.getView().byId("OpenDialog").open();

},

onCancelDialog: function (oEvent) {

   oEvent.getSource().getParent().close();

},

Now, let us Define the onCreate function.

            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");

                }

    

            },

We will create the Table Object in onInit Method.

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

Now Save the code & do cds watch to test the changes that we have done.



Click on the Create Button.



We will get the below Dialog that we created for Create Action.



Fill up the entries.



We can see the created Entry Appears on the Top with So Number 500009109.



 

Delete Operation

We will be using a Toast Message to Confirm Deletion so let's first add Message Toast as a dependency in our Controller.

"sap/m/MessageToast",

function (Controller, MessageToast)

We will enable Delete only in Edit Mode. So we are adding an Edit Button & A Hidden Delete Button.

<Button id="deleteButton" icon="sap-icon://delete" tooltip="Delete" visible="false" press="onDelete">

<Button id="editModeButton" visible="true" icon="sap-icon://edit" tooltip="Edit" press="onEditMode">

Let us Add Logic for the Edit Button.

onEditMode: function(){

     this.byId("editModeButton").setVisible(false);

     this.byId("saveButton").setVisible(true);

     this.byId("deleteButton").setVisible(true);

     this.rebindTable(this.oEditableTemplate, "Edit");

}

Now let us Test, do cds run and click on Edit Button.



We should be able to see the Delete Button.



Now let's add the Logic for Delete.

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");

                }

                

            },

Let's test the final code, click on Edit & Press Delete.



As per our Validation, it will ask you to select a Record.



Now, lets select a Record & Press Delete.



Record will be Deleted & we will get a Confirmation Toast message for the same.



Feel free to drop your comments in the comment section.

In this blog post we have learnt how to perform Create and Delete operation

In the next blog post we will see how to perform Update Opeartion .

Further reading – https://cap.cloud.sap/docs/guides/

Next Episode: Coming Soon.