Calling Function Import from SAPUI5

Tweet

       We have created a function import named CheckFlightFare in previous tutorial.In this tutorial we will see how to call a function import from our SAPUI5 application.
        We will make use of callFunction method of sap.ui.model.odata.v2.ODataModel class.The callFunction method trigger a request to the function import that was specified in model.
Pre-requisites

1. CheckFlightFare function import implemented in sap backend odata service.
2. SAPUI5 application created.
3. OData service added and set the model to the application.

Steps

1. Open the view and put below code inside.Here we have two sap.m.Select controls for selecting carrier id and connection id.We also have a sap.m.DatePicker control for selecting the date and a button for checking the flight fare.



<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"
 xmlns:core="sap.ui.core">
 <App>
  <pages>
   <Page title="{i18n>title}">
    <content>
  <HBox justifyContent="SpaceAround" width="50%">
   <items>
    <Select id="carrid">
     <items>
   <core:Item text="Air Canada" key="AC"></core:Item>
   <core:Item text="American Airlines" key="AA"></core:Item>
     </items>
    </Select>
    <Select id="connid">
   <items>
    <core:Item text="17" key="17"></core:Item>
    <core:Item text="820" key="820"></core:Item>
   </items>
    </Select>
    <DatePicker id="fldate" valueFormat="yyyy-MM-ddTHH:mm:ss">
    </DatePicker>
   </items>
  </HBox>
  <HBox alignContent="Center" alignItems="Center">
    <Button text="check" press="onCheck" class="sapUiMediumMargin">
    </Button>
    <Title text="{fareModel>/Fare/Fare} {fareModel>/Fare/Currency}">
    </Title>
  </HBox>
    </content>
   </Page>
  </pages>
 </App>
</mvc:View>



2. Put below code in controller.Here we add our code inside the press event handler of the check button.In success handler we create a json model and set it to the view.We have already done the binding in view's sap.m.Title control.



 
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
    "use strict";
    return Controller.extend("odataaaa.controller.View1", {
        onInit: function() {

        },
        onCheck: function() {
          var oModel = this.getView().getModel();
          var carrid = this.getView().byId("carrid").getSelectedKey();
          var connid = this.getView().byId("connid").getSelectedKey();
          var fldate = this.getView().byId("fldate").getValue();
          var oContext = this;
          oModel.callFunction(
              "/CheckFlightFare", {
                  method: "GET",
                  urlParameters: {
                     carrierid: carrid,
                     connectionid: connid,
                     flightdate: fldate
                    },
                  success: function(oData, response) {
                     var jModel = new sap.ui.model.json.JSONModel();
                     var myData = {};
                     myData.Fare = oData;
                     jModel.setData(myData);
                     oContext.getView().setModel(jModel, "fareModel");
                    },
                  error: function(oError) {

                    }
                });

        }

    });
});



3. Run the application and see the flight fare.See screenshot.
   

Note:While making this tutorial I faced some issues with date.When I was selecting 20-Dec-2002 the browser always send 19-Dec-2002(1day behind..exactly 5.30H behind).So I have selected 21-Dec-2002 because my scarr table contain entry for 20-Dec-2002.I was using sapwebide trial version.This may be due to timezone differences.

If you enjoyed this post, Please Share!!