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
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
- CheckFlightFare function import implemented in sap backend odata service.
- SAPUI5 application created.
- OData service added and set the model to the application.
- 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.
- 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.
- Run the application and see the flight fare.See screenshot.
<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>
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) {
}
});
}
});
});
