How to Build an application using Create, Update, Delete Operations in oData Service

This blog explains how to create a CRUD application using SAPUI5 Using Odata Model.

Blog Content :

Creating the User Interface

1. Creating the project
2. Setting up the SAPUI5 bootstrap and required libraries
3. Creating the view components
4. Implementing the Controller’s methods

Read, Create, Update, Delete

Scenario:

We will be creating a table, bind the data using oData model and then we will add a new row(CREATE), Update the existing Row(UPDATE), Delete a particular row(DELETE).

Steps to be followed :-

1. 1. Create the Project : Create a SAPUI5 MVC project in eclipse

It shows like below mentioned in the picture :

Setting up the SAPUI5 bootstrap and required libraries in index.html file

Add the required libraries in the  "data-sap-ui-libs" tag

1. 2. Creating the view components and fetching the Bank data :

Add following code in to the bank.view.js

sap.ui.jsview("bankcrud.bank", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf bankcrud.bank
*/
getControllerName : function() {
return "bankcrud.bank";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf bankcrud.bank
*/
createContent : function(oController) {
var layout = new sap.ui.commons.layout.MatrixLayout({
id : 'matrix4',
layoutFixed : false,
});
var appHeader = new sap.ui.commons.ApplicationHeader('appHeader',   {
logoText : "Bank Application",
displayLogoff : false,
displayWelcome : true,
userName : "Welcome"
});
layout.createRow(appHeader);
var rPannel = new sap.ui.commons.Panel('rPannel', {
text : "BankCollection List",
});
var oTable = new sap.ui.table.DataTable({
id : "bankTableID",
title: "Bank CRUD Application",
width : "100%",
visibleRowCount: 10,
selectionMode : sap.ui.table.SelectionMode.Single,
//setEditable : false,
rowSelectionChange : function(oEvent) {},
toolbar: new sap.ui.commons.Toolbar({
                 items: [
                      new sap.ui.commons.Button({
                                text: "Create",
                                press: function() {
                                     oController.Create();
                                }
                      }),
                      new sap.ui.commons.Button({
                             text: "Update",
                                press: function() {
                                     oController.Update();
                                }
                      }),
           new sap.ui.commons.Button({
                   text: "Delete",
                    press: function() {
                   oController.Delete();
                                }
                      }),
                     ]
}
});
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Bank ID"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"bankID"),
sortProperty : "bankID"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Bank Country"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"bankCountry"),
sortProperty : "bankCountry"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Bank Name"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"bankName"),
sortProperty : "bankName"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Region"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"region"),
sortProperty : "region"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Street"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"street"),
sortProperty : "street"
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "City"
}),
template : new sap.ui.commons.TextField().bindProperty("value",
"city"),
sortProperty : "city"
}));
// Add table to the Panel
rPannel.addContent(oTable);
// Add panel to the Layout
layout.createRow(rPannel);
// Display Layout
this.addContent(layout);
}
});

Then bind the bank table in controller file. Add the  following code in to the "onInit" function

onInit: function() {
//Initialize the Model
var oModel = new sap.ui.model.odata.ODataModel( "http://domain_name/sap/opu/odata/sap/Z_TM_BANK_SRV",false, "Username", "Password");
//Set the Model to the Table
var oTable = sap.ui.getCore().byId("bankTableID");
oTable.setModel(oModel);
// Filter the DATA
var FilterOperator = sap.ui.model.FilterOperator;
var filter = new sap.ui.model.Filter("bankCountry",FilterOperator.EQ, "AR");
//Bind the Data to the Table
oTable.bindRows("/BankCollection", null, null,[ filter ]);
},

Output :

After binding the table :

Create Operation :

1. 1. Add the button in view file (already created-in view file)
2. 2. Create the function for create operation in controller file

Add the following code mentioned below :

Create: function() {
// Create a dialog to get the information of the bank to be created
var oDialog = new sap.ui.commons.Dialog("Dialog", {
    modal: true,
closed: function(oControlEvent){
  sap.ui.getCore().getElementById('Dialog').destroy();
     }
  });
  oDialog.setTitle("New Bank Collection");
  // Create a layout to place the controls in the dialog
  var oLayout = new sap.ui.commons.layout.MatrixLayout({
columns: 2,
width: "100%"
  });
  // Create text field for the bankCountry
  var oTF = new sap.ui.commons.TextField("tbankCountry", {
          tooltip: 'Bank Country',
          editable: true,
          width: '200px',
        required: true
  });
var oLabel = new sap.ui.commons.Label("lbankCountry", {
    text: 'Bank Country',
   labelFor: oTF
  });
// Create the first row
  oLayout.createRow(oLabel, oTF);
  // Create text field for the bankID
  oTF = new sap.ui.commons.TextField("tbankID", {
tooltip: 'Bank ID',
   editable: true,
required: true,
width: '200px'
  });
oLabel = new sap.ui.commons.Label("lbankID", {
    text: 'Bank ID',
labelFor: oTF
});
  oLayout.createRow(oLabel, oTF);

  oTF = new sap.ui.commons.TextField("tbankName", { 
          tooltip: 'Bank Name',
             editable: true,
          required: true,
          width: '200px'
  });
  oLabel = new sap.ui.commons.Label("lbankName", {
   text: 'Bank Name',
  labelFor: oTF
  });
  oLayout.createRow(oLabel, oTF);
  oTF = new sap.ui.commons.TextField("tregion", {
      tooltip: 'Region Name',
          maxLength:3,
          editable: true,
               width: '200px
  });
  // Label for the last name field
  oLabel = new sap.ui.commons.Label("lregion", {
          text: 'Region Name',
          labelFor: oTF
  });
  // Create the 4th row
  oLayout.createRow(oLabel, oTF);
  oTF = new sap.ui.commons.TextField("tstreet", {
tooltip: 'Street Name',
editable: true,
width: '200px'
});
  oLabel = new sap.ui.commons.Label("lstreet", {
       text: 'Street Name',
     labelFor: oTF
  });
  oLayout.createRow(oLabel, oTF);
  oTF = new sap.ui.commons.TextField("tcity", {
     tooltip: 'City Name',
     editable: true,
       width: '200px'
});
  oLabel = new sap.ui.commons.Label("lcity", {
        text: 'City Name',
        labelFor: oTF
  });
  oLayout.createRow(oLabel, oTF);
// Add the layout to the dialog
  oDialog.addContent(oLayout);
// Add a button to post the bank's data to the odata interface
  oDialog.addButton(new sap.ui.commons.Button({text: "Save", press:function(){
  // Add a button to post the bank's data to the odata interface

    var bankCountry_var    = sap.ui.getCore().getControl("tbankCountry").getValue(); 
         var bankID_var      = sap.ui.getCore().getControl("tbankID").getValue(); 
         var bankName_var  = sap.ui.getCore().getControl("tbankName").getValue(); 
         var region_var   = sap.ui.getCore().getControl("tregion").getValue(); 
         var street_var   = sap.ui.getCore().getControl("tstreet").getValue(); 
         var city_var    = sap.ui.getCore().getControl("tcity").getValue(); 
         OData.request 
         ({  
              requestUri:      "http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV/BankCollection/?$filter=bankCountry eq'AR'",  
                    method: "GET",  
                    headers:  
                        {       
    "X-Requested-With": "XMLHttpRequest", 
   "Content-Type": "application/atom+xml", 
"DataServiceVersion": "2.0",          
"X-CSRF-Token":"Fetch"                                 }                    
                 },  
                 function (data, response) 
                 { 
     header_xcsrf_token = response.headers['x-csrf-token']; 
                  OData.request 
                  ({  
                       requestUri: 
                        "http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV/BankCollection",  
                             method: "POST",  
    headers: {   "X-Requested-With": "XMLHttpRequest",                        
"Content-Type": "application/atom+xml", 
     "DataServiceVersion": "2.0",  
"Accept": "application/atom+xml,application/atomsvc+xml,application/xml", 
"X-CSRF-Token": header_xcsrf_token    },  
                             data:  
                                 {  
                              bankCountry: bankCountry_var,  
                              bankID:bankID_var, 
                              bankName:bankName_var, 
                              region: region_var, 
                              street: street_var, 
                              city: city_var, 
                      }  
                          },
                          function (data, response) 
                            {  
                           document.location.reload(true);
                                             $("<div>Returned data " + window.JSON.stringify(data) + "</div>").appendTo($("#MessageDiv")); 
                            },  
                                   function (err)  
                                   { 
                                        $("<div>Returned error " + window.JSON.stringify(err.response) + "</div>").appendTo($("#MessageDiv")); 
                                   } 
                  ); 
        },  
        function (err)  
                       { 
                            var request = err.request; // the request that was sent. 
                            var response = err.response; // the response that was received. 
                            alert("Error in Get -- Request "+request+" Response "+response); 
                       } 
        );                      
  oDialog.close();
}}));
  oDialog.open();
},

Output :

Before creation :

After Creation :

 

Update Operation :

1. 1. Add the button in view file (already created-in view file)
2. 2. Create the function for update operation in controller file

Add the following code mentioned below :

Update : function() {
var oTable = sap.ui.getCore().getElementById('bankTableID');
       var i = oTable.getSelectedIndex();
       var ServiceURL = "http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV";
       if (i == -1) {
               alert("Please Select a row to Update");
               return;
             }else if(i>=0){

  


var selectedRow = oTable.getRows()[i];
var selectedId = selectedRow.getCells()[0].getValue();
        var selectedCount = selectedRow.getCells()[1].getValue();
        OData.read(ServiceURL + "/BankCollection(bankCountry='"
+ selectedCount + "',bankID='"
+ selectedId + "')",
        function(response) {
      var oDialogu = new sap.ui.commons.Dialog("Dialogu", {
                  modal: true,
           closed: function(oControlEvent){
          sap.ui.getCore().getElementById('Dialogu').destroy();
             }
  });
      oDialogu.setTitle("Update Bank Collection");
var oLayout = new sap.ui.commons.layout.MatrixLayout({
            columns: 2,
        width: "100%"
  });
  var oTF = new sap.ui.commons.TextField("tbankCountry", {
               tooltip: 'Bank Country',
    editable: false,
             value:response.bankCountry,
          width: '200px',
        required: true
  });
var oLabel = new sap.ui.commons.Label("lbankCountry", {
        text: 'Bank Country',
      labelFor: oTF
  });
  oLayout.createRow(oLabel, oTF);
   oTF = new sap.ui.commons.TextField("tbankID", {
          tooltip: 'Bank ID',
         editable: false,
          required: true,
          width: '200px',
      value:response.bankID
  });
  oLabel = new sap.ui.commons.Label("lbankID", {
          text: 'Bank ID',
          labelFor: oTF
  });
         oLayout.createRow(oLabel, oTF);
      oTF = new sap.ui.commons.TextField("tbankName", {
          tooltip: 'Bank Name',
          editable: true,
          required: true,
          width: '200px',
       value:response.bankName
  });
oLabel = new sap.ui.commons.Label("lbankName", {
          text: 'Bank Name',
          labelFor: oTF
  });
  oLayout.createRow(oLabel, oTF);
  oTF = new sap.ui.commons.TextField("tregion", {
          tooltip: 'Region Name',
          maxLength:3,
          editable: true,
          value:response.region ,
          width: '200px'
  });
  oLabel = new sap.ui.commons.Label("lregion", {
        text: 'Region Name',
         labelFor: oTF
  });

oLayout.createRow(oLabel, oTF);
  oTF = new sap.ui.commons.TextField("tstreet", {
tooltip: 'Street Name',
editable: true,
width: '200px',
  value:response.street
  });
  oLabel = new sap.ui.commons.Label("lstreet", {
text: 'Street Name',
    labelFor: oTF
  });
  oLayout.createRow(oLabel, oTF);
  oTF = new sap.ui.commons.TextField("tcity", {
          tooltip: 'City Name',
          editable: true,
          value:response.city,
          width: '200px'
  });
  oLabel = new sap.ui.commons.Label("lcity", {
text: 'City Name',
labelFor: oTF
  });
  oLayout.createRow(oLabel, oTF);
  oDialogu.addContent(oLayout);
  oDialogu.addButton(new sap.ui.commons.Button({text: "Update", press:function(){
  var bankCountry_var    = sap.ui.getCore().getControl("tbankCountry").getValue(); 
         var bankID_var      = sap.ui.getCore().getControl("tbankID").getValue(); 
         var bankName_var  = sap.ui.getCore().getControl("tbankName").getValue(); 
         var region_var   = sap.ui.getCore().getControl("tregion").getValue(); 
         var street_var   = sap.ui.getCore().getControl("tstreet").getValue(); 
         var city_var    = sap.ui.getCore().getControl("tcity").getValue(); 
  OData.request 
         ({  
  requestUri: 
               "http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV/BankCollection/?$filter=bankCountry eq'AR'",  
                    method: "GET",  
                    headers:  
                        {       
"X-Requested-With": "XMLHttpRequest", 
"Content-Type": "application/atom+xml", 
"DataServiceVersion": "2.0",          
"X-CSRF-Token":"Fetch"  
                          }                    
                 },  
                 function (data, response) 
                 { 
           header_xcsrf_token = response.headers['x-csrf-token']; 
                  OData.request 
                  ({  
                       requestUri: "http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV/BankCollection(bankCountry='"+ selectedCount + "',bankID='"+ selectedId+ "')",  
                             method: "PUT",  
                             headers: {  
     "X-Requested-With": "XMLHttpRequest",                        
"Content-Type": "application/atom+xml", 
"DataServiceVersion": "2.0",  
  "Accept": "application/atom+xml,application/atomsvc+xml,application/xml", 
  "X-CSRF-Token": header_xcsrf_token  
  },   data:  
    {    bankCountry: bankCountry_var,  
      bankID:bankID_var, 
       bankName:bankName_var, 
       region: region_var, 
        street: street_var, 
       city: city_var, 
}  
                          },
   function (data, response) 
                            {
var oSubDialog = new sap.ui.commons.Dialog( {title: "Updated",
                           content : [new sap.ui.commons.Label({
                           text : "Data Updated Successfully"
                           })]});
                           oSubDialog.open();
                           oSubDialog.addButton(new sap.ui.commons.Button({text: "OK", press:function(){oSubDialog.close();}}));                       
                     
                                             $("<div>Returned data " + window.JSON.stringify(data) + "</div>").appendTo($("#MessageDiv")); 
                                       //      document.location.reload(true);
                            },  
                                   function (err)  
                                   { 
                                        $("<div>Returned error " + window.JSON.stringify(err.response) + "</div>").appendTo($("#MessageDiv")); 
                                   } 
                  ); 
        },  
   function (err)  
{ 
   var request = err.request; // the request that was sent. 
var response = err.response; // the response that was received. 
alert("Error in Get -- Request "+request+" Response "+response); 
                       } 
        );
  oDialogu.close();
     }}));
  oDialogu.open();    
        });
       }
    },

Output :

Before Update :

After Update :

 

Delete Operation

1. 1. Add the button in view file (already created-in view file)
2. 2. Create the function for create operation in controller file

Add the following code mentioned below :

Delete : function(oEvent) {
         var oTable = sap.ui.getCore().getElementById('bankTableID');
  // Retrieve the selected index, i.e., the index of the selected row
      var i = oTable.getSelectedIndex();
var ServiceURL = "http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV";
        if (i == -1) {
               alert("Please Select a row to Delete");
               return;
             }
             else if(i>=0){
        var selectedRow = oTable.getRows()[i];
        var selectedId = selectedRow.getCells()[0].getValue();
        var selectedCount = selectedRow.getCells()[1].getValue();
       }
     OData.request 
        ({  requestUri: "http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV/BankCollection/?$filter=bankCountry eq'AR'",  
                   method: "GET",  
                   headers:  
                       {       
  "X-Requested-With": "XMLHttpRequest", 
   "Content-Type": "application/atom+xml", 
  "DataServiceVersion": "2.0",          
  "X-CSRF-Token":"Fetch"  
                         }                    
                },
                function (data, response) 
                {  
                       header_xcsrf_token = response.headers['x-csrf-token']; 
           OData.request 
           ({ 
            requestUri: "http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV/BankCollection(bankCountry='"+ selectedCount + "',bankID='"+ selectedId+ "')",
  method: "DELETE",  
  headers: {  
                    "X-Requested-With": "XMLHttpRequest",                        
                    "Content-Type": "application/atom+xml", 
                    "DataServiceVersion": "2.0",  
                    "X-CSRF-Token": header_xcsrf_token  
                         } 
                   },  
                     function (data, request) 
                     { 
                    document.location.reload(true);
                                 $("<div>Returned data in Delete " + window.JSON.stringify(data) + "</div>").appendTo($("#MessageDiv")); 
                      },  
                    function (err)  
                    { 
                                 $("<div>Returned error in Delete " + window.JSON.stringify(err.response) + "</div>").appendTo($("#MessageDiv"));                              
                     } 
           ); 
       }, 
         function (err)  
             { 
                      var request     = err.request;  
                      var response = err.response;  
                      alert("Error in Get -- Request "+request+" Response "+response); 
             } 
       );       
    }
});

Output:

Before Delete :

Before delete four records are there in the table.

After Delete :

After delete three records are there in the table.

In this way we can create the desktop application in sapui5 with MVC structure and for the backend data we  have to consume the Nerweaver Gateway Service.In this application Odta Model is used.

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post