I have almost tried everything to prevent multiple clicks on a button press which leads to multiple order creation/ service calls - Made the button disable immediately on press, gave it a busy state, wrote addEventDelegate for dblClick, set/reset flag upon order creation, etc. Nothing works!
Below is my code:
Inside the fragment -
<HBox alignItems="Center"> <Button id="1"/> <Button id="2"/> <Button id="save" text="{i18n>SaveOrder}" press="onSubmit" fieldGroupIds="saveSubmitButtons" visible="{order>/Other/SaveVisible}" enabled ="{order>/Other/SaveEnabled}"/> <Button id="submit" text="{i18n>SubmitOrder}" fieldGroupIds="saveSubmitButtons" press="onSubmit" visible="{order>/Other/SubmitVisible}" enabled ="{order>/Other/SubmitEnabled}"/> </HBox>
Inside Controller: Save / Submit use the same function depending upon the source further action is taken. But both have the issue of multiple clicks. Currently commented the double click event capture functionality.
_initializeData: function(){ // jQuery.sap.delayedCall(500, this, "attachDblClick"); } attachDblClick: function (oEvent) { // var that = this; // this.getView().getControlsByFieldGroupId("saveSubmitButtons").forEach(function (element) { // element.addEventDelegate({ // ondblclick: function (that) { // element.setBusy(true); // element.setBusyIndicatorDelay(0); // this.onSubmit.bind(this); //***********Note: This above call does not work - It never redirects to the function // } // }, this); // }); // }, onSubmit: function (oEvent) { var flag = this.getModel("order").getProperty("/Other/SaveEnabled"); if(flag){ this.getModel("order").setProperty("/Other/SaveEnabled", false); this.getModel("order").setProperty("/Other/SubmitEnabled", false); this.source = oEvent.getSource().getText(); var that = this; setTimeout(function() { POUtils.onSubmit(that, that.source); }, 3000); }
POUtils.js
onSubmit: function (oContext, mode) { .... // oContext.OdataModel.create("/POSet", oContext.Data, null, oContext.success.bind(oContext), oContext.error.bind(oContext)); var token = null; $.ajax({ url: sServiceURl, type: "GET", async: true, beforeSend: function (xhr) { sap.ui.core.BusyIndicator.show(0); xhr.setRequestHeader("X-CSRF-Token", "Fetch"); }, complete: function (xhr) { token = xhr.getResponseHeader("X-CSRF-Token"); oContext.OdataModel.create("/OrdersSet", oContext.Data, null, oContext.successs.bind(oContext), oContext.error.bind(oContext)); } });<br><br><br>error: function(){ <br>....... <br>... <br>oContext.getModel("order").setProperty("/Other/SaveEnabled", true); <br> oContext.getModel("order").setProperty("/Other/SubmitEnabled", true); <br> }