The update operation comes into play whenever an existing entry resource needs to be changed.The update function triggers a PUT/MERGE request to an OData service which was specified at creation of the OData model.
In this tutorial we will use our flight service and perform update operation in flightset.
Pre-requisites
Steps
In this tutorial we will use our flight service and perform update operation in flightset.
Pre-requisites
- FLIGHTSET_UPDATE_ENTITY method implemented in sap backend flight service.
- SAPUI5 Application created.
- OData service (I am using flight service created in earlier tutorials)added to the created application and odata model is set.
Steps
- Our SCARR table before update is like below.We will update the entry with carrid AC.
- First put below code in our view.Here we will hardcode the flight details in a simple form and place a button below it.On press of the button we will update the entry through OData.
- Now our view will look like this.
- Add update logic inside onUpdate method of the view's controller.Copy paste below logic.Here we access the form values and pass it to oModel.update function.
- Press update button.You will get a success alert if updation was successful.Go to sap backend and check the table SCARR.Now you can see the carrier details of AC carrier is updated.
<mvc:View controllerName="odataaaa.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <App> <pages> <Page title="{i18n>title}"> <content> <f:SimpleForm id="simpleFormChange" title="Carrier Details" editable="true" class="editableForm sapUiSmallMarginTopBottom"> <f:content> <Label text="Carrier id"/> <Input id="carrid" value="AC"/> <Label text="Carrier name"/> <Input id="carrname" value="Air Canada100"/> <Label text="Currency code"/> <Input id="currcode" value="CAD"/> <Label text="Carrier Url"/> <Input id="url" value="http://aircanada.com"/> </f:content> </f:SimpleForm> <Button text="update" press="onUpdate"></Button> </content> </Page> </pages> </App> </mvc:View>
onUpdate: function() { /*update operation*/ var oModel = this.getView().getModel(); var oEntry = {}; oEntry.Carrid = this.getView().byId("carrid").getValue(); oEntry.Carrname = this.getView().byId("carrname").getValue(); oEntry.Currcode = this.getView().byId("currcode").getValue(); oEntry.Url = this.getView().byId("url").getValue(); oModel.update("/FlightSet('"+oEntry.Carrid+"')", oEntry, { method: "PUT", success: function(data) { alert("success"); }, error: function(e) { alert("error"); } }); }
If you enjoyed this post, Please Share!!
Thank you Rajeesh!
ReplyDeleteYou are welcome
DeleteWhat about posting on create and delete as well
ReplyDeleteI have written about create and delete also.You can search for the posts
DeleteThanks
Is it possible to manipulate the oModel data on client without updating to backend? I like to delete rows, change rows and edit rows and send the data back to backend only if for instance a submit button was pressed.
ReplyDeleteYes it is possible.That is where batch operation comes into play.See my Batch operation SAPUI5 tutorial
DeleteAre you sure that method: "PUT" is supported? I am doing a request with that parameter, but the request still is with POST method.
ReplyDeleteYes . Update(PUT) operations are also supported in batch operations. This may help you
DeleteEven though the method is explicitly set as "PUT", why is the call in network displayed as "POST"?
Delete