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!!

2 comments :

Powered by Blogger.