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) { } }); } }); });
If you enjoyed this post, Please Share!!
how can we fix he timezone differences? can you explanin please
ReplyDeleteYou can get the user timezone from webbroswer using javascript methods and pass it to sap backend. and then convert the backend time with user timezone using timezone function modules.
DeleteHi guys,
DeleteWhen I pass the dates obtained in this way - the time shift does not occur.
let oDateFormat = sap.ui.core.format.DateFormat.getDateInstance({
pattern: "yyyy-MM-ddTHH:mm:ss"
});
let oStartDate = oDateFormat.format(new Date(oStartDatePicker.getValue())) + "Z"; // "2021-02-26T00:00:00Z"
let oEndDate = oDateFormat.format(new Date(oEndDatePicker.getValue())) + "Z"; // "2021-02-28T00:00:00Z"
an example of calling the function import with these dates
POST Extend?StartDate=datetime'2021-02-26T00%3A00%3A00'&EndDate=datetime'2021-02-28T00%3A00%3A00' HTTP/1.1
Try using pattern as
Delete"yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"
Hi Rajeesh, Its works for me, thank you!
DeleteHi,
ReplyDeletecan we use funtion import in Batch call?
Thanks.
Yes you can.
Delete