In one of my previous blogs, I have shown how fetch data from an oData Service. I have used a generic oData service. Now, here in this blog I would show you how to update data into an oData service. To do that we should be have an oData service whichhas the facility of two way binding.

For that purpose we would use the following oData service.

 

http://services.odata.org/V2/(S(hgfvvt31yj5dms3ogd01si4d))/OData/OData.svc/

When we create an oData model, we are left with many functions of the model to work with. One such function is update().

This is the function which would be responsible for pushing the updated data to the oData service.

So let us dive a bit into this function:

 

The update function triggers a PUT request to an OData service which was specified during creation of the OData model. The application has to specify the path to the entry which should be updated with the specified updated entry. After a successful request to update the bindings in the model, a refresh is triggered automatically.

oModel.update()

var oEntry = {};

 

oEntry.Rating = 5;

oModel.update(‘/Products(1)’, oEntry, null, function(){

           alert(“Update
successful”);
},function(){alert(“Update failed”);});

So now lets do a small development on that:

Go to eclipse—New SAPUI5 Mobile project—Create a js view<View1>.

Paste the following Code in the onInit() method of controller.js file

onInit() method of controller.js

var oModel = new sap.ui.model.odata.ODataModel(“proxy/http/services.odata.org/V2/(Shgfvvt31yj5dms3ogd01si4d))/OData/OData.svc/”,false);

sap.ui.getCore().setModel(oModel);

Next lets design the view, So paste the following code in the createContent() method of View.js file:

createContent() method of View.js

var oPage = new sap.m.Page({

                    title: “Products”,

  });

  var oTable = new sap.m.Table({

id: “Products”,

mode: sap.m.ListMode.SingleSelectLeft,

  selectionChange : [oController.SelectedRows, oController ],

                    columns: [

                    new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                                 text: “ID”

                           })

                    }),new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                                 text: “Release Date”

                           })

                    }),new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                                 text: “Discontinued Date”

                           })

                    }),new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                                 text: “Rating”

                           })

                    }),new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                                 text: “Price”

                           })

                    }),new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                                 text: “New Rating”

                           })

                    }),new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                                 text: “”

                           })

                    })

 

                    ]

             });

    var oItemTemplate = new sap.ui.core.Item({

key: “{key}”,

  text: “{text}”

             });

   var template = new sap.m.ColumnListItem({

                    id: “first_template”,

                    type: “Navigation”,

                    visible: true,

                    cells: [

                    new sap.m.Label(“ID”, {

                           text: “{ID}”

                    }),new sap.m.Label({

                           text: “{ReleaseDate}”

                    }),new sap.m.Label({

                           text: “{DiscontinuedDate}”

                    }),new sap.m.Label({

                           text: “{Rating}”

                    }), new sap.m.Label({

                           text: “{Price}”

                    }),new sap.m.ComboBox({

                           enabled: false,

                           items: [ {

                                 “key” : “1”,

                                   “text” : “1”

                           },
{

                                 “key” : “2”,

                                   “text” : “2”

                           },
{

                                 “key” : “3”,

                                   “text” : “3”

                           },
{

                                 “key” : “4”,

                                   “text” : “4”

                           },
{

                                 “key” : “5”,

                                   “text” : “5”

                           }
],

                           template: oItemTemplate,

                    }),new sap.m.Button(“Save”,{

                           text: “Save”,

                            enabled : false,

                           press: [ oController.Save, oController ]

                    })

                    ]

             });

    var oFilters = null;

oTable.bindItems(“/Products”, template, null, oFilters);

oPage.addContent(oTable);

  return oPage;

Finally in the controller.js file lets code for saving the data.So paste the following code at the end of controller.js file.

controller.js

Save: function(evt){

       var selectedId=0;

       var newRating=sap.ui.getCore().byId(“Products”).getSelectedItems()[0].getCells()[5].getSelectedItem().getText();

       if(sap.ui.getCore().byId(“Products”).getSelectedItems()[0].getCells()[0].getText()!=“”)

             {

              selectedId=sap.ui.getCore().byId(“Products”).getSelectedItems()[0].getCells()[0].getText();

             }

       var oEntry = {};

       oEntry.Rating= newRating;

       sap.ui.getCore().getModel().update(‘/Products(‘+selectedId+‘)’, oEntry, null, function(){

             alert(“Data Updated Successfully”);

             location.reload(true);

              },function(){

                    sap.m.MessageToast.show(“Update failed”,{duration:1000});

             });

},

SelectedRows:  function(evt){

    if (this.prevSelectedRow) {

         var cells = this.prevSelectedRow.getCells();

cells[cells.length-1].setEnabled(false);

cells[cells.length-2].setEnabled(false); 
}

  var selectedRow = evt.getParameter(‘listItem’);

var cells = selectedRow.getCells();  
cells[cells.length-1].setEnabled(
true);  
cells[cells.length-2].setEnabled(
true);

this.prevSelectedRow = selectedRow;

}

Everything is ready, So lets test:

Save and run the application to find the following screen:

/wp-content/uploads/2014/11/chrome_597213.jpg

 

Now select a radiobutton of the row for which you want to update the new Rating. Now select the new value from the comboBox and click Save.

For example lets update the item with ID 2 by increasing its Rating from 3 to 5.

/wp-content/uploads/2014/11/chrome_597213.jpg

Done!!!!

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply