Skip to Content
Technical Articles
Author's profile photo Rohit Shukla

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

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.

    <Dialog id="OpenDialog" title="Create Sales Order">
         <Button id="confirmCreate" text="Create" press=".onCreate" type="Emphasized" />
         <Button id="cancelCreate" text="Cancel" press="onCancelDialog" type="Transparent" />
     <form:SimpleForm editable="true" layout="ResponsiveGridLayout">
          <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" />

Lets Define Dialog Open & Close functions.

onOpenAddDialog: function () {
onCancelDialog: function (oEvent) {

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()      
                                // that._focusItem(oList, oContext);
                }else {
          "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.

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.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();
                    var oSalesOrder = oSelected.getBindingContext("mainModel").getObject().soNumber;
                    oSelected.getBindingContext("mainModel").delete("$auto").then(function () {
               + " SuccessFully Deleted");
                    }.bind(this), function (oError) {
              "Deletion Error: ",oError);
                } else {
          "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 –

Next Episode: Coming Soon.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Jacob Binu
      Jacob Binu

      Kapil and Rohit

      Nice series and very detailed.





      Author's profile photo Anirban Neogi
      Anirban Neogi

      Awesome series for starting CAPM

      Author's profile photo Rohit Patil
      Rohit Patil

      Rohit Shukla

      hello sir

      can u provide  All Episode of the Series

      Author's profile photo Thomas Paflias
      Thomas Paflias

      You can find the starting episode here.

      Author's profile photo Surya Teja
      Surya Teja

      Hi Rohit Shukla

      Thank you for detailed series of explanation.

      Do you also have update operation blog? If so do kindly share.


      Author's profile photo sagar varshney
      sagar varshney


      Why you didn't write any Code for Create Operation in DPC extension Class(Odata Service)

      that we generally do in Free Style UI5 Apps.

      Please reply as I am new to this.



      Author's profile photo Krishna Dubey
      Krishna Dubey

      While deploying the app I am getting below error.


      Author's profile photo Antal Perger
      Antal Perger

      When you download the logs with dmol, what is the content of the cap_tutorial-srv log file? It shows the reason for the startup problem.