SAPUI5 Development

how to do OData create operation from SAPUI5 Application?

 The create operation comes into play whenever a new entry resource needs to be created.The create function triggers a POST 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 create operation in flightset.

Pre-requisites

  1. FLIGHTSET_CREATE_ENTITY method implemented in sap backend flight service.
  2. SAPUI5 Application created.
  3. OData service (I am using flight service created in earlier tutorials)added to the created application and odata model is set.


Steps
  1. Our SCARR table before 'create operation' is like below.We will create a new entry with carrid AI.
  2. 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 create a new entry through OData.
  3. <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="AI"/>
           <Label text="Carrier name"/>
           <Input id="carrname" value="Air India"/>
           <Label text="Currency code"/>
           <Input id="currcode" value="INR"/>
           <Label text="Carrier Url"/>
           <Input id="url" value="http://airindia.com"/>
          </f:content>
         </f:SimpleForm>
         <Button text="create" press="onCreate"></Button>
        </content>
       </Page>
      </pages>
     </App>
    </mvc:View>
    
  4. Now our view will look like this.
  5. Add create logic inside onCreate method of the view's controller.Copy paste below logic.Here we access the form values and pass it to oModel.create function.
  6.   onCreate: function() {
       /*create 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.create("/FlightSet", oEntry, {
        method: "POST",
        success: function(data) {
         alert("success");
        },
        error: function(e) {
         alert("error");
        }
       });
      }
    
  7. Run the application and Press create button.You will get a success alert if creation was successful.Go to sap backend and check the table SCARR.Now you can see the carrier details of AI carrier is added as a new entry.
If you enjoyed this post, Please Share!!

9 comments :

  1. Nice tutorial. thanks

    ReplyDelete
  2. Nice tutorial however I get error if I do this with northwind OData service. I used /V2/(S(2qaczwmmhztrtfxipbo141j5))/OData/OData.svc/ link. The error I get is
    Request URL: https://services.odata.org/V2/(S(2qaczwmmhztrtfxipbo141j5))/OData/OData.svc/Products('9')
    Request Method: OPTIONS
    Status Code: 501 Not Implemented

    ReplyDelete
    Replies
    1. Request method OPTIONS?.. This may be due to CORS(Cross Origin Resource Sharing) Issue. Try to fix CORS issue. Then it should work. You Would see POST request method after that.

      Delete
  3. The tutorial is nicely done but however I am getting the error "TypeError: oModel.create is not a function". Any idea what can cause the problem ?

    ReplyDelete
    Replies
    1. Try alerting the oModel variable. The problem may be the odata model isnt fetched to the oModel variable.

      Delete
  4. We tried but we got error popup msg.

    ReplyDelete
    Replies
    1. Check create entity method implementation. Check the error message in sap backend or netweaver gateway.

      Delete
  5. Hello, thanks for posting this

    ReplyDelete

Powered by Blogger.