Multiple clicks on the button press - UI5

[former_member604660]

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

[motivatedMoose]

A little bit late, but I think this answer can help other developers. 
You can prevent the double click by setting the Busy Indicator (with delay 0, default is 1000ms I think). This is not available on a button but e.g. on a dialog or a panel. So it is important that you choose  the wrapper component around the button to set the busy indicator and not the button itself.
https://sapui5.hana.ondemand.com/sdk/#/entity/sap.ui.core.Control/sample/sap.ui.core.sample.ControlB...