Skip to Content
Author's profile photo Former Member

Building a CRUD Application with SAPUI5 Using Odata Model

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

Blog Content :

Creating the User Interface

  • Creating the project
  • Setting up the SAPUI5 bootstrap and required libraries
  • Creating the view components
  • Implementing the Controller’s methods

Read

Create

Update

Delete

Prerequisites

  • You have to installed the SAPUI5 Application Development Tool into your Eclipse
  • UI Development Toolkit for HTML5 Version SAPUI5 1.16

Steps to be followed :-

  1. 1. Create the Project :

create a SAPUI5 MVC project in eclips

It shows like below mentioned in the picture :


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

Add following code in to the bank.view.js

  1. 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 theonInit 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 bacnkend data we  have to consume the Nerweaver Gateway Service.In this application Odta Model is used.

Assigned Tags

      76 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Andre Fischer
      Andre Fischer

      Which service do you use?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi,

       

      In this application I used Odata Model.

      Author's profile photo Former Member
      Former Member

      hi:shruti

        

      Thank you for sharing, according to your article, the effect is a success.

      But there is a problem, updating the data, the table of contents can not be refreshed. I must go to  click browser refresh button to get the updated data

       

       

      Is there any way you can update the complete data, and can refresh the contents of the table in time?

       

          best regard!

      Author's profile photo Seyed Ismail
      Seyed Ismail

      document.location.reload(true);

                               $("<div>Returned data " + window.JSON.stringify(data) + "</div>").appendTo($("#MessageDiv"));

                            }, 

       

      Hi Huang, Its possible.

      Make sure you are using the above code inside function (data, request)

       

      Best Regards

      Seyed Ismail MAC

      Author's profile photo Former Member
      Former Member

      hi:Seyed

       

      Thank you for your reply, the problem has been resolved

       

      best regard

      Author's profile photo Syam Babu
      Syam Babu

      Well explanation shruti.

       

      Thanks,

      Syam

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Syam..

      Author's profile photo Patrick Dean
      Patrick Dean

      Great article, really good level of detail, and helped me with my second steps in Eclipse development. I'm using JSON rather than oData, but the design and layout bits in Eclipse are the same. Thanks for your contribution, and it's a great example for others on SDN!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks for the feedback Patrick

      Author's profile photo Former Member
      Former Member

      Hi Shruti, you don't happen to have the whole project saved, do you?

       

      I'm still running into a few problems, if you do, would you mind sharing it?

       

      Thanks and Regards

       

      Alex

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Alexandre,

       

      In the blog I mentioned whole project.It's working properly.Where you struck explain me in detail.

       

       

      Regards

      Shruti

      Author's profile photo Former Member
      Former Member

      Forget everything else, got pretty much everything to work, but the update part.

       

      I'm getting :

       

        Uncaught ReferenceError: selectedRow is not defined

      1. sap.ui.controller.Update
      2. sap.ui.table.DataTable.toolbar.sap.ui.commons.Toolbar.items.sap.ui.commons.Button.press
      3. sap.ui.base.EventProvider.fireEvent
      4. sap.ui.core.Element.fireEvent
      5. (anonymous function)
      6. sap.ui.commons.Button.onclick
      7. sap.ui.core.Element._callEventHandles
      8. sap.ui.core.Element._handleEvent
      9. sap.ui.core.UIArea._handleEvent
      10. f3
      11. Q.event.dispatch
      12. i.handle.j

      any tips on that?

       

      Thanks and Regards

       

      Alex

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      HI Alexandre,

       

       

      sorry for the late reply.

       

      define the "selectedRow" as variable like below mentioned.

       

         var selectedRow = oTable.getRows()[i];

       

       

      Regards

      Shruti

      Author's profile photo Jim Giffin
      Jim Giffin

      Shruti - great write up and information.   I have been trying the methods described, but if I scroll down on my table, select a row that was not on the original view and click the update button, I get an error that selectedRow does not exist. 

       

      It works great if I don't scroll down in the table.  I am using Chrome (32) and I have also tested in Firefox (27).  Is this a known issue or am I doing something strange?

       

      Thank you.

      Author's profile photo Jim Giffin
      Jim Giffin

      I solved the update after scrolling problem.  I removed the oTable.getRows()[i] statement and used getContextByIndex(i) instead.

       

      //var selectedRow = oTable.getRows()[i];

        var selectedRow = oTable.getContextByIndex(i);

        var selectedID = selectedRow.getProperty('ID');

      Author's profile photo Viet Phuong Nguyen
      Viet Phuong Nguyen

      Could you tell me which type of file you store in Z_TM_BANK_SRV???

      Author's profile photo Andreas Appelt
      Andreas Appelt

      Hi Shruti,

      thanks for the example. I get an error message in line "rowSelectionChange : function(oEvent) {}," in the view file. Eclipse tells me that a semicolon is missing. Do you have an idea for that?

      Thanks.

      Regards, Andreas

       

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Andreas,

       

      What i mentioned it is correct only,there is no need of semicolon there. Could you please provide me the screenshot of that error ,to resolve the issue.

       

       

       

      Regards

      Shruti

      Author's profile photo Andreas Appelt
      Andreas Appelt

      Hi Shruti,

      Thanks for your reply. Down below the coding of my view (I havent created the controller file so far). Also the image is attached that shows the first error message in the file followed by a couple of error messages.

      Regards, Andreas

       

       

      "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



      */



      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



      */



      function(oController) {

      var layout = new sap.ui.commons.layout.MatrixLayout({

      'matrix4',

      false,

      var appHeader = new sap.ui.commons.ApplicationHeader('appHeader', {

      "Bank Application",

      false,

      true,

      "Welcome"


      var rPannel = new sap.ui.commons.Panel('rPannel', {

      "BankCollection List",

      var oTable = new sap.ui.table.DataTable({

      "bankTableID",

      "Bank CRUD Application",

      "100%",

      //setEditable : false,



      function(oEvent) {},

      new sap.ui.commons.Toolbar({

      new sap.ui.commons.Button({

      "Create",

      function() {


      new sap.ui.commons.Button({

      "Update",

      function() {


      new sap.ui.commons.Button({

      "Delete",

      function() {








      new sap.ui.table.Column({

      new sap.ui.commons.Label({

      "Bank ID"


      new sap.ui.commons.TextField().bindProperty("value",

      "bankID"),

      "bankID"


      new sap.ui.table.Column({

      new sap.ui.commons.Label({

      "Bank Country"


      new sap.ui.commons.TextField().bindProperty("value",

      "bankCountry"),

      "bankCountry"


      new sap.ui.table.Column({

      new sap.ui.commons.Label({

      "Bank Name"


      new sap.ui.commons.TextField().bindProperty("value",

      "bankName"),

      "bankName"


      new sap.ui.table.Column({

      new sap.ui.commons.Label({

      "Region"


      new sap.ui.commons.TextField().bindProperty("value",

      "region"),

      "region"


      new sap.ui.table.Column({

      new sap.ui.commons.Label({

      "Street"


      new sap.ui.commons.TextField().bindProperty("value",

      "street"),

      "street"


      new sap.ui.table.Column({

      new sap.ui.commons.Label({

      "City"


      new sap.ui.commons.TextField().bindProperty("value",

      "city"),

      "city"


      // Add table to the Panel


      // Add panel to the Layout


      // Display Layout



      this.addContent(layout);


      /wp-content/uploads/2014/02/shruti_389491.jpg

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Andreas,

       

      Use the below mentioned code and then try to run it

       

       

      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,

                  //width : '1000px',

                 

              });

             

              var appHeader = new sap.ui.commons.ApplicationHeader('appHeader', {

                  //logoSrc : "images/Atumit_45_40.png",

                  logoText : "Bank Application",

                  displayLogoff : false,

                  displayWelcome : true,

                  //userName : "Shruti Mukkawar(Kotturi)"

              });

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

             

       

          }

       

      });

      Author's profile photo Andreas Appelt
      Andreas Appelt

      Hi Shruti,

      Thanks for your support. Now I don't have any error message anymore.  I will use my own oData model and adjust the coding. But may I ask you one more question? What kind of file is Z_TM_BANK_SRV?

      Thanks.

      Regards, Andreas

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Andreas,

       

       

      Z_TM_BANK_SRV is the netweaver gateway odata service.

       

       

      Regards

      Shruti

      Author's profile photo Andreas Appelt
      Andreas Appelt

      Hi Shruti,

      Thanks.

      Regards, Andreas

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Hi Shruti,

       

       

      Really very great work and useful info for beginners.

       

      Thank you so much.

       

       

      It would be even better if you shared your OData service details, like Entity Types & the DDIC/RFC FM you used.

       

      Thanks again.

      Author's profile photo Seyed Ismail
      Seyed Ismail

      I am getting an error:

       

      POST http://user:server/sap/opu/odata/sap/ZUI5_KSS_MAC_SRV/Employees 403 (Forbidden)

      Author's profile photo Former Member
      Former Member

      Hi Shruti,

       

      Your article is really very good & easy to understand.

      But i am getting error if i am running my app on firefox, error is "NetworkError: 403 Forbidden - ......".

      Can you please tell what could be the reason..!!!

      Author's profile photo Former Member
      Former Member

      Hi Shruti,

       

      Thanks for this article. Very informative. I would like to ask just one question. The application above uses Z_TM_BANK_SRV gateway service. Just wondering if we have to create our own BANK_SRV on our system or have you tried using SAP's demo of this gateway service in SAP Gateway Demo System.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Melanie Saldua,

       

      Thank you... I used SAP demo bank service only..

      Author's profile photo Former Member
      Former Member

      Hi shruti,

       

      thank you for this great tutorial. Really well done.

      The create and update functionnalities works fine for me but delete doesn't work.

      Here is the error:

       

      1. DELETE https://sapes1.sapdevcenter.com/sap/opu/odata/sap/Z_BANK/BankCollection(Bankcountry='DE',Bankkey='11111111') 500 (Internal Server Error)
      2. o.defaultHttpClient.request
      3. E2
      4. o.request
      5. OData.request.request
      6. (anonymous function)
      7. o9

       

      Do you have an idea why?

      I'm using the SAP Netweaver Gateway Demo System.

       

      Best,

      Matt

       

      PS: I've checked it with Postman and I have the following error message:

      Method 'BANKCOLLECTION_DELETE_ENTITY' not implemented in data provider class

      It seems we cann't do any delete action

      Author's profile photo Marcin Czarny
      Marcin Czarny

      Do you solved your problem? I ask, because I have the same issue.

      Author's profile photo Former Member
      Former Member

      Hello Shruti:

           Could you please tell me the function module of demo bank ?


          I want to build the odata service,but I don't find the function module.


          Thank you very much.


          lexian.

      Author's profile photo Syam Babu
      Syam Babu

      Hi,

       

      Below of bank function modules

       

      BAPI_BANK_GETLIST

      BAPI_BANK_GETDETAIL

      BAPI_BANK_CREATE

      BAPI_BANK_CHANGE

      BAPI_BANK_DELETE

       

      Thanks,

      Syam

      Author's profile photo Former Member
      Former Member

      Hi Syam,

           Thank you for providing me with these modules.

       

           I want to know which modules this blog use?

       

           thank you .

      Author's profile photo Former Member
      Former Member

      Hi,

       

      I am using the delete functionality in my application as stated above.

      I want to display 'sap-message' in front end which is returned from SAP in HTTP Response header like this:

       

      Code for Deletion:

      OData.request({

               requestUri: 'some url',

                   method: "DELETE",

                       headers: {    

                           "X-Requested-With": "XMLHttpRequest",                       

                          "Content-Type": "application/atom+xml",

                          "DataServiceVersion": "2.0",     

                          "X-CSRF-Token":csrfToken  

                       }

                   },

                   function (data, response){

                       console.log(response);

                   }

      );

       

      The console.log returns:

      It doesnt returns 'sap-message' field at all.

       

      Can any one please tell what could be the reason?

       

      Regards,

      Meghna

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Hi Meghna,

       

      I am not sure whether you can catch the expected error via OData.request. I will look into it. Meanwhile, Please go through think link.

       

       

      Deleting Entries

      Entries are deleted by executing an HTTP DELETE request against a URI that points at the Entry. If the operation executed successfully servers should return 200 (OK) with no response body.

      If the Entry has dependent Entries such as Entries Linked to it, it is up to the server whether deletion should be cascaded, the operation should fail because of the presence of dependent Entries, or if Links are left dangling after the Entry is deleted. This largely depends on the server, storage model and the actual application the OData service is a part of.

      In the case of Media Link Entries, deleting the Media Link Entry also deletes the Media Resource.

       

      Best Regards,

      Seyed Ismail MAC

      Author's profile photo Former Member
      Former Member

      Hello everyone:

       

          I have created the view controller and run ok.

         

         But now I have a problem about Odata Service in SEGW,Syam told me these function:

      1  BAPI_BANK_GETLIST

      2  BAPI_BANK_GETDETAIL

      3  BAPI_BANK_CREATE

      4  BAPI_BANK_CHANGE

      5  BAPI_BANK_DELETE

       

       

       

      I know we have to create a Z_TM_BANK_SRV gateway service in SEGW,

       

      but I am confused is which function will be used or above all?

       

       

       

      It would be  better if someone shared your OData service details, like Entity Types & the DDIC/RFC FM you used.

       

       

       

      thank you very much,

      Best wishes for you.

       

       

      lexian.

       

       


      Author's profile photo Tin de Zeeuw
      Tin de Zeeuw

      Most of the functionality you build with custom ajax requests (OData.request() functions) can be rewritten in a much easier way with the built-in functions such as read(), create(), update(), and remove() on the ODataModel (SAPUI5 SDK - Demo Kit)

      Author's profile photo Former Member
      Former Member

      Hello Shruti !!

       

      Your tutorial must be very useful

      But I am facing problem in the beginning after creating bank controller & bank view, i am not getting any error and not getting any result as well.

      kindly tell me where am i wrong?

      Service i am using is: https://sapes1.sapdevcenter.com/sap/opu/odata/sap/Z_BANK

      /wp-content/uploads/2014/08/screen_525211.png

      Author's profile photo Mahesh Z
      Mahesh Z

      Hi All,

       

      I am trying for POST operation however I am getting error : Uncaught ReferenceError: OData is not defined 

       

      My Code is :

       

      OData.request({

        requestUri : "MYURL",

        headers : {

                Hedear Info

        },

        method : "POST",

        data : connectiondata

        }, onSuccess, onError);

       

      Any suggestions on this ? Do I need to declare it somewhere first before use ? As per my understanding OData is default object. Correct me if I am wrong.

       

      Thanks ,

      Mahesh.

      Author's profile photo Mahesh Z
      Mahesh Z

      Hi ,

       

      I added data.js to my index.htrnl file and its working now 🙂

       

      Thanks ,

      Mahesh.

      Author's profile photo DURAI VENKATESH
      DURAI VENKATESH

      Hi Mahesh,

                       I'm also getting the same error Uncaught ReferenceError: OData is not defined. how can I add the data.js file and what information that file should keep?. Please assist me.

       

      Thanks,

      Duraivenkatesh.R

      Author's profile photo Mahesh Z
      Mahesh Z

      Hello Venkatesh,

       

      You need to download datajs-1.0.1.min.js file and put it inside your project folder( I kept it at this location for my project :logindemo/resources/utils/) . Then add that path inside your index.html as follows.

       

      <script type="text/javascript" src="logindemo/resources/utils/datajs-1.0.1.min.js"></script>

       

      Thanks ,

      Mahesh.

      Author's profile photo rajeesh o
      rajeesh o

      Hi shruti,

          when logging out i need to clear mysapsso2 cookie, Or i need to delete webviewchromiumcookes.db...iam using below code on logout how can i achive this.?

      Regards

       

       

      logOut : function(evt) {

        var app = this.getView().app;

       

          

        if(app) {

        // alert('hai');

        userId="";

        recId = "";

        pass = "";

        app.backToPage("ProductDetail");

        }

       

        }

      Author's profile photo Madhav B
      Madhav B

      Hi ,

       

      I am getting the following error, can you please help me out,

       

      When I am checking through the gateway client in the service is working fine in segw, its working fine for adding the entries.

       

      Regards,

      Madhav

      Author's profile photo Srinivasan S
      Srinivasan S

      Hi Madhav,

       

      I am getting the same error. Were you able to resolve it. If so please share your findings, it would be very helpful.

       

       

      Regards,

      Srinivasan

      Author's profile photo Eli Pai
      Eli Pai

      Hi shruti m:

      Excellent,Finally I finished OData UI5 and before this found lots of problem. So thanks for all heart .



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you very much

      Author's profile photo Former Member
      Former Member

      Hi,

       

      Thanks for providing the example,I am getting error while creating the table data

      http://scn.sap.com/servlet/JiveServlet/downloadImage/105-540064-578844/436-161/pastedImage_0.png

       

      Please try to resolve it..

      I want this application by using JSON Model..can any one provide it ASAP.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi,

       

       

      Which model you are using JSON or Odata?

      Author's profile photo Former Member
      Former Member

      Hi shruthi,

       

      Thanks for your response..

      I tried with odata it is giving me the error while creating the CRUD application..and also I need to implement the CRUD application By using JSON model also..

      Author's profile photo Former Member
      Former Member

      hi,

      reply to my request..

      Author's profile photo Former Member
      Former Member

      Hi

      I am using this oData.request method to update records in back-end SAP system, it is doing the update, but am getting this pop-up coming up every time. it looks like the entity set info but not sure how to stop it, can you help.

       

       

      Thanks Les./wp-content/uploads/2015/03/message_673339.jpg

      Author's profile photo Ashok Dhayalaraj
      Ashok Dhayalaraj

      Hi Shruthi,

       

        I am trying to create OData service to update a PO. I am unable to use the PUT service , since it gives a Status 405 when I run it using Activate and Maintain Services on the Netweaver Gateway. Pls help.

       

      Thanks and Regards,

      Ashok

      Author's profile photo Former Member
      Former Member

      Hi ,

       

             I am trying to create new record by using above coding but its not getting created and also it doesnt show any error also . Please guide me to resolve this issue .

       

      /wp-content/uploads/2015/10/create_819276.png

       

      This is my console picture .

       

      Thanks

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Share your code for "Create" pls.

      Author's profile photo Former Member
      Former Member

      Here is my create code .

      Create:function()

          {

        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: 'Bankid',

          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: 'Bankname',

         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',

                 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',

            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',

               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:      "proxy/http/ranak.com/emplist-web/emplist.svc", 

                           method: "GET", 

                           headers: 

                               {      

           "X-Requested-With": "XMLHttpRequest",

          "Content-Type": "application/xml",

        "DataServiceVersion": "1.0",         

        "X-CSRF-Token":"Fetch"                                 }                   

                        }, 

                        function (data, response)

                        {

            header_xcsrf_token = response.headers['x-csrf-token'];

                         OData.request

                         ({ 

                              requestUri:

                               "proxy/http/ranak.com/emplist-web/emplist.svc/Banks", 

                                    method: "POST", 

           headers: {   "X-Requested-With": "XMLHttpRequest",                       

        "Content-Type": "application/xml",

            "DataServiceVersion": "1.0", 

        "Accept": "application/xml",

        "X-CSRF-Token": header_xcsrf_token    }, 

                                    data:JSON.stringify( 

                                        { 

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

          },

       

       

      Thanks 

      P.Deepika

      Author's profile photo Seyed Ismail
      Seyed Ismail


      proxy/http/ranak.com/emplist-web/emplist.svc


      Is this correct? Please check it by opening in a separate tab.


      Seyed Ismail.

      Author's profile photo Former Member
      Former Member

      Hi ,

       

                  This url is correct . I have displayed the records which is in this url . I cannot able to create new record in sap ui5 .

       

      Thanks  &  Regards

       

      Deepika

      Author's profile photo Mahesh Z
      Mahesh Z

      Hi,

       

      Try with Normal URL inside OData.request , both GET as well as POST request.

       

      http://ranak.com/emplist-web/emplist.svc


      Normally, we use proxy when we create ODatamodel object. Also , check if your createentity method is getting invoked or not on the gateway side.


      Thanks,

      Mahesh.

      Author's profile photo Former Member
      Former Member

      Hi Sir ,

       

                  If i give the url which u have suggested , i am getting the following error .

      /wp-content/uploads/2015/11/error_830600.png

      Thanks &  Regards

       

      Deepika

      Author's profile photo Mahesh Z
      Mahesh Z

      Hello Deepika,

       

      This is because you are trying to access the remote host service from your localhost.

       

      In this case , you need to disable your web-security of browser.

       

      http://stackoverflow.com/questions/24290149/creating-google-chrome-shortcut-with-disable-web-security

       

      This is not needed when you deploy your application to gateway server.

       

      Once you disable the web security , you wont get this error.

       

      One more thing is , My name is not Sir , its Mahesh

       

      Thanks,

      Mahesh.

      Author's profile photo Mahesh Z
      Mahesh Z

      One simple method to get URL :

       

      function getODataServiceURL() {

       

       

        var sServiceURL = "Relative Path of your service";

        if (window.location.host === 'localhost') {

        return "http://hostname:port" + sServiceURL;

        } else {

        return sServiceURL;

        }

      }

       

      Thanks ,

      Mahesh.

      Author's profile photo Former Member
      Former Member

      Hi Mahesh ,

       

              I am new to sap ui5 . I want to learn more about this . So , please guide me where i have to learn sap ui5 in detail and my email id is pdeepika518@gmail.com .

       

       

      Thanks  &  Regards

       

      P.Deepika

      Author's profile photo Former Member
      Former Member

      Hi ,

       

               I have one doubt , i can able to display records in table format which is in the url .

                After changing the path to disable web security . I am getting Failed to load resource and uncaught object error .  /wp-content/uploads/2015/11/table_832607.png 

       

      Thanks  &  Regards

       

      P.Deepika

      Author's profile photo Former Member
      Former Member

      Hey which type of Object is OData for the function .request?

      Author's profile photo Yoppie Ariesthio
      Yoppie Ariesthio

      Me too... i wonder what function it is ...

      Author's profile photo Manjunath Babu Rayampalli
      Manjunath Babu Rayampalli

      HI Shruthi,

       

      basically im trying to upload an image  using post url in UI5, is there any way i can achieve it using UI5 APplication. i am executing below code after clicking button.

       

         OData.request({

                                                            requestUri : "ServiceURL",

                                                            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'];

                                                            oHeaders = {

                                                            "x-csrf-token" : header_xcsrf_token,

                                                            'Accept' : 'application/json',

                                                            };

                                                           

                                                             OData.request({

                                                                          requestUri : "<post URL>",

                                                                          method : "POST",

                                                                          headers : oHeaders,

                                                                          data : oEntry

                                                                          },                

                                                                          function(data,request) {

      //                                                                    loadAttachment();

                                                                          },

                                                                          function(err){

                                                                          sap.m.MessageToast.show("Couldn't Deleted due to following exception : "+ err);

                                                                          });

                                                            },

                                                           

                                                            function(err) {

                                                            var request = err.request;

                                                            var response = err.response;

                                                            sap.m.MessageToast.show("Error in Get -- Request " + request + " Response " + response);

                                                            });



      But i am getting error:TypeError: undefined is not an object (evaluating 'sap.AuthProxy.OData.request')


      Appreicated any help here


      Regards,MBR

      Author's profile photo Vinay Kumar Dalapathirao
      Vinay Kumar Dalapathirao

      Hi Shruthi,

       

       

      Thanks for your sharing knowledge on CRUD operations with sample application.

      It helps a lot like us to learn how to connect ecliplse to Odata.

      At first I missed headers in the request tag and trying.

      After seeing yours blog I got to know that I missed something.

      Now, I have successfully connected and retrieving the data.

       

      Regards,

      Vinay

      Author's profile photo Former Member
      Former Member

      hi vinay ,

       

      I am trying the same application in my machine ..i am facing the issue.

       

       

       

      Message: failed to load 'data-sap-ui-libs/library.js' from resources/data-sap-ui-libs/library.js: 404 - Resource could not be found!

      Line: 135

      Char: 1

      Code: 0

      URI: http://localhost:63658/Crudproject/resources/sap-ui-core.js

       

      Could you please help me how to rectify this error?

       

      Regards,

      Srikanth

      Author's profile photo Former Member
      Former Member

      hi Shruthi,

       

      Thank you for sharing the Knowledge on CRUD Operation.I am trying the same application i am Facing the Issue

       

       

       

      Message: failed to load 'data-sap-ui-libs/library.js' from resources/data-sap-ui-libs/library.js: 404 - Resource could not be found!

      Line: 135

      Char: 1

      Code: 0

      URI: http://localhost:63658/Crudproject/resources/sap-ui-core.js

       

      Could you please help how to get rid of this issue?

      Author's profile photo Former Member
      Former Member

      Hi Expert ,

       

      I am not able to do put  and delete operation . I get the dialog box without table data..

       

      here is my all controller code..

       

      Update : function() {

        var oTable = sap.ui.getCore().getElementById('bankTableID');

              var i = oTable.getSelectedIndex();

              //var ServiceURL = "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet";

               //var ServiceURL = "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet(Firstname='"+ selectedCount + "',Userid='"+ selectedId+ "')";

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

              var ServiceURL = "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'"+ selectedCount + "' ";

              ///?$filter=Firstname eq'KIRAN'"

              //OData.read(ServiceURL + "/EMPLIST_INFOSet(Firstname='"+ selectedCount + "' , Userid='"+ selectedId + "')",

              //proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet(Firstname='"+ selectedCount + "',Userid='"+ selectedId+ "')"

              //OData.read(ServiceURL + "(Firstname='"+ selectedCount + "', Userid='"+ selectedId + "')",

            

              OData.read(ServiceURL , 

              function(response) {

              var oDialogu = new sap.ui.commons.Dialog("Dialogu", {

                      modal: true,

                     closed: function(oControlEvent){

                     sap.ui.getCore().getElementById('Dialogu').destroy();

                    }

               });

              oDialogu.setTitle("Update Employee Collection");

                  

              var oLayout = new sap.ui.commons.layout.MatrixLayout({

                          columns: 2,

                          width: "100%"

                });

        

        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("tuserid", { tooltip: 'User ID', editable: true, value: response.Userid, width: '200px'});

        var oLabel = new sap.ui.commons.Label("luserid", {  text: 'User ID', labelFor: oTF });

        // Create the first row

        oLayout.createRow(oLabel, oTF);

       

         // Create text field for the bankID

        oTF = new sap.ui.commons.TextField("tfname", { tooltip: 'First Name', editable: true,value:response.Firstname, required: true, width: '200px'});

        oLabel = new sap.ui.commons.Label("lfname", { text: 'First Name', labelFor: oTF });

        oLayout.createRow(oLabel, oTF);

       

       

        oTF = new sap.ui.commons.TextField("tlname", { tooltip: 'Last Name', editable: true,value:response.Lastname ,required: true, width: '200px'});

        oLabel = new sap.ui.commons.Label("llname", { text: 'Last Name', labelFor: oTF });

        oLayout.createRow(oLabel, oTF);

       

       

        oTF = new sap.ui.commons.TextField("temailid", { tooltip: 'Email ID', editable: true,  value:response.Emailid ,required: true, width: '200px'});

        oLabel = new sap.ui.commons.Label("lemailid", { text: 'Email ID', labelFor: oTF });

        oLayout.createRow(oLabel, oTF);

        

        oTF = new sap.ui.commons.TextField("tcountry", { tooltip: 'Country', maxLength:23, editable: true,  value:response.Country, width: '200px' });

         // Label for the last name field

        oLabel = new sap.ui.commons.Label("lcountry", { text: 'Country',labelFor: oTF });

         // Create the 4th row

        oLayout.createRow(oLabel, oTF);

        

        oTF = new sap.ui.commons.TextField("tphone", {tooltip: 'Phone',editable: true,  value:response.Phone, required : true, width: '200px'});

        oLabel = new sap.ui.commons.Label("lphone", {text: 'Phone',labelFor: oTF});

        oLayout.createRow(oLabel, oTF);

        

        oTF = new sap.ui.commons.TextField("tsalary", {tooltip: 'Salary',editable: true,   value:response.Salary, required : true, width: '200px'});

        oLabel = new sap.ui.commons.Label("lsalary", {text: 'Salary',labelFor: oTF});

        oLayout.createRow(oLabel, oTF);

       

       

        oDialogu.addContent(oLayout);

       

        oLayout.addStyleClass("mystyle1");

       

        // Add a button to post the bank's data to the odata interface

        oDialogu.addButton(new sap.ui.commons.Button({text: "Update",

          width : "100px",

          style : sap.ui.commons.ButtonStyle.Emph,

          press:function(){

         // Add a button to post the bank's data to the odata interface

          var bankCountry_var    = sap.ui.getCore().getControl("tuserid").getValue();

                var bankID_var      = sap.ui.getCore().getControl("tfname").getValue();

                var lnameID_var      = sap.ui.getCore().getControl("tlname").getValue();

                var bankName_var  = sap.ui.getCore().getControl("temailid").getValue();

                var countryName_var  = sap.ui.getCore().getControl("tcountry").getValue();

                var region_var   = sap.ui.getCore().getControl("tphone").getValue();

                var street_var   = sap.ui.getCore().getControl("tsalary").getValue();

        

                OData.request

                ({ 

                     requestUri: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'KIRAN'",

                //requestUri: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'"+ selectedCount + "')",

                     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

                  ({ 

                  //"http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV/BankCollection(bankCountry='"+ selectedCount + "',bankID='"+ selectedId+ "')",

                  requestUri: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'"+ selectedCount + "')", 

                             method: "PUT", 

                             headers: { "X-Requested-With": "XMLHttpRequest",                       

                            "Content-Type": "application/atom+xml",

                            "DataServiceVersion": "2.0", 

                            "Accept": "application/atom+xml,application/atomsvc+xml,application/xml,text/html",

                            "X-CSRF-Token": header_xcsrf_token }, 

                             data:

                            {

                              Userid: bankCountry_var, 

                                 Firstname:bankID_var,

                                 Lastname: lnameID_var,

                                 Emailid: bankName_var,

                                 Country :countryName_var,

                                 Phone: region_var,

                                 Salary: street_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"));

                             }, 

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

       

       

       

       

      });

       

       

       

       

      }

        

      },

        

      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 = "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_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: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'KIRAN'", 

                               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: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet(Firstname='"+ selectedCount + "')",

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

                         }

                   );      

                }

                

      });

       

       

      Please help me.

       

      Thanks

      Author's profile photo Former Member
      Former Member

      Hi Expert ,

       

      I am not able to do put  and delete operation . I get the dialog box without table data..

       

      here is my all controller code..

       

      Update : function() {

        var oTable = sap.ui.getCore().getElementById('bankTableID');

              var i = oTable.getSelectedIndex();

              //var ServiceURL = "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet";

               //var ServiceURL = "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet(Firstname='"+ selectedCount + "',Userid='"+ selectedId+ "')";

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

              var ServiceURL = "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'"+ selectedCount + "' ";

              ///?$filter=Firstname eq'KIRAN'"

              //OData.read(ServiceURL + "/EMPLIST_INFOSet(Firstname='"+ selectedCount + "' , Userid='"+ selectedId + "')",

              //proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet(Firstname='"+ selectedCount + "',Userid='"+ selectedId+ "')"

              //OData.read(ServiceURL + "(Firstname='"+ selectedCount + "', Userid='"+ selectedId + "')",

            

              OData.read(ServiceURL , 

              function(response) {

              var oDialogu = new sap.ui.commons.Dialog("Dialogu", {

                      modal: true,

                     closed: function(oControlEvent){

                     sap.ui.getCore().getElementById('Dialogu').destroy();

                    }

               });

              oDialogu.setTitle("Update Employee Collection");

                  

              var oLayout = new sap.ui.commons.layout.MatrixLayout({

                          columns: 2,

                          width: "100%"

                });

        

        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("tuserid", { tooltip: 'User ID', editable: true, value: response.Userid, width: '200px'});

        var oLabel = new sap.ui.commons.Label("luserid", {  text: 'User ID', labelFor: oTF });

        // Create the first row

        oLayout.createRow(oLabel, oTF);

       

         // Create text field for the bankID

        oTF = new sap.ui.commons.TextField("tfname", { tooltip: 'First Name', editable: true,value:response.Firstname, required: true, width: '200px'});

        oLabel = new sap.ui.commons.Label("lfname", { text: 'First Name', labelFor: oTF });

        oLayout.createRow(oLabel, oTF);

       

       

        oTF = new sap.ui.commons.TextField("tlname", { tooltip: 'Last Name', editable: true,value:response.Lastname ,required: true, width: '200px'});

        oLabel = new sap.ui.commons.Label("llname", { text: 'Last Name', labelFor: oTF });

        oLayout.createRow(oLabel, oTF);

       

       

        oTF = new sap.ui.commons.TextField("temailid", { tooltip: 'Email ID', editable: true,  value:response.Emailid ,required: true, width: '200px'});

        oLabel = new sap.ui.commons.Label("lemailid", { text: 'Email ID', labelFor: oTF });

        oLayout.createRow(oLabel, oTF);

        

        oTF = new sap.ui.commons.TextField("tcountry", { tooltip: 'Country', maxLength:23, editable: true,  value:response.Country, width: '200px' });

         // Label for the last name field

        oLabel = new sap.ui.commons.Label("lcountry", { text: 'Country',labelFor: oTF });

         // Create the 4th row

        oLayout.createRow(oLabel, oTF);

        

        oTF = new sap.ui.commons.TextField("tphone", {tooltip: 'Phone',editable: true,  value:response.Phone, required : true, width: '200px'});

        oLabel = new sap.ui.commons.Label("lphone", {text: 'Phone',labelFor: oTF});

        oLayout.createRow(oLabel, oTF);

        

        oTF = new sap.ui.commons.TextField("tsalary", {tooltip: 'Salary',editable: true,   value:response.Salary, required : true, width: '200px'});

        oLabel = new sap.ui.commons.Label("lsalary", {text: 'Salary',labelFor: oTF});

        oLayout.createRow(oLabel, oTF);

       

       

        oDialogu.addContent(oLayout);

       

        oLayout.addStyleClass("mystyle1");

       

        // Add a button to post the bank's data to the odata interface

        oDialogu.addButton(new sap.ui.commons.Button({text: "Update",

          width : "100px",

          style : sap.ui.commons.ButtonStyle.Emph,

          press:function(){

         // Add a button to post the bank's data to the odata interface

          var bankCountry_var    = sap.ui.getCore().getControl("tuserid").getValue();

                var bankID_var      = sap.ui.getCore().getControl("tfname").getValue();

                var lnameID_var      = sap.ui.getCore().getControl("tlname").getValue();

                var bankName_var  = sap.ui.getCore().getControl("temailid").getValue();

                var countryName_var  = sap.ui.getCore().getControl("tcountry").getValue();

                var region_var   = sap.ui.getCore().getControl("tphone").getValue();

                var street_var   = sap.ui.getCore().getControl("tsalary").getValue();

        

                OData.request

                ({ 

                     requestUri: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'KIRAN'",

                //requestUri: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'"+ selectedCount + "')",

                     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

                  ({ 

                  //"http://server_name/sap/opu/odata/sap/Z_TM_BANK_SRV/BankCollection(bankCountry='"+ selectedCount + "',bankID='"+ selectedId+ "')",

                  requestUri: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'"+ selectedCount + "')", 

                             method: "PUT", 

                             headers: { "X-Requested-With": "XMLHttpRequest",                       

                            "Content-Type": "application/atom+xml",

                            "DataServiceVersion": "2.0", 

                            "Accept": "application/atom+xml,application/atomsvc+xml,application/xml,text/html",

                            "X-CSRF-Token": header_xcsrf_token }, 

                             data:

                            {

                              Userid: bankCountry_var, 

                                 Firstname:bankID_var,

                                 Lastname: lnameID_var,

                                 Emailid: bankName_var,

                                 Country :countryName_var,

                                 Phone: region_var,

                                 Salary: street_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"));

                             }, 

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

       

       

       

       

      });

       

       

       

       

      }

        

      },

        

      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 = "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_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: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet/?$filter=Firstname eq'KIRAN'", 

                               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: "proxy/sap/opu/odata/SAP/ZODATA_CURD_FINAL_PROJECT_ANG_SRV/EMPLIST_INFOSet(Firstname='"+ selectedCount + "')",

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

                         }

                   );      

                }

                

      });

       

       

      Please help me.

       

      Thanks

      Author's profile photo Srinivasan S
      Srinivasan S

      Hi Shruthi,

       

      Thank you for the blog. My requirement is to perform the create functionality. When I submit the data I get the below error.crud-error.PNG

      It is an immediate requirement. Hope you can provide some suggestions regarding it.

       

       

      Thanks,

      Srinivasan

      Author's profile photo Former Member
      Former Member

      Hi All,

      I have just started learning. I don't understand one thing. I have seen code for CRUD operations using Odata in this example follows different syntax and complex. I have seen  Other different way  which used by my colleague.

       

      var oResultModel = new sap.ui.model.odata.ODataModel("XXXXXXXXX/sap/opu/odata/sap/ZXXXXXXUPDATE_SRV/", false);
      oResultModel.create("/HeaderSet",requestData,{success: function(oData,oResponse){   }

       

      Could you please anybody tell the difference if any ?

      Author's profile photo Former Member
      Former Member

      Hey,

      I have created my service and got the generated URL but while passing it in the controller I am not getting the table contents in the UI app. It would be really helpful if you could help me with it.

      Thanks in advance

      Author's profile photo Former Member
      Former Member

      worst way to display the code in the blog !!