Enable Spinner on field event method

Hello,

I have a javascript method that is triggered on change of a field value. This method takes 20 - 30 seconds to run and I want to be able to display the Aras spinner but nothing seems to be working. I have attempted multiple solutions from other posts but none have solved the issue. I noticed in the core function below my value for spinnerEl is always null. If anyone could provide any help it would be appreciated. 

BrowserHelper.prototype.toggleSpinner = function (context, state, spinnerId) {
spinnerId = spinnerId || 'dimmer_spinner';

var spinnerEl = (context.ownerDocument || context).getElementById(spinnerId);

if (!spinnerEl) {
return false;
}

spinnerEl.classList.toggle('aras-hide', !state);
return true;
};

Parents
  • Main problem is not the spinner element but the "TIMING".

    I remember I myself posted some spinner solutions in this forum and other users said they worked. Fun fact: They never worked for myself. I simply have given up using any of the inbuild spinners and use a custom html overlay and spinning element made with pure css.

    Independent from the spinner you use - you cannot just enable and disable it at the beginning and end of your code. In regular Javascript code everything runs synchronically. But JS will not wait 30 seconds inside the code to check if your Sub-Method was finished. It will simply continue and ignore that there is still something happening in the background. So your spinner can be disabled before your main code was finished. In addition you also want to stop your spinner, in case anything went wrong.

    In short words: You cannot call the spinner synchronous, but you have to do it asynchronous. 

    Google "javascript promise" or "async/await". Using promise is ok for simple code, but async/await is much more easier to use and to understand. Try to find some async/await samples via google to understand the basic concept. Then you can integrate your spinner start/stop and execute your own code.

    Don´t get confused if async/await code is highlighted as error in the Method editor. It will work, the debugger will just not recognize it.

Reply
  • Main problem is not the spinner element but the "TIMING".

    I remember I myself posted some spinner solutions in this forum and other users said they worked. Fun fact: They never worked for myself. I simply have given up using any of the inbuild spinners and use a custom html overlay and spinning element made with pure css.

    Independent from the spinner you use - you cannot just enable and disable it at the beginning and end of your code. In regular Javascript code everything runs synchronically. But JS will not wait 30 seconds inside the code to check if your Sub-Method was finished. It will simply continue and ignore that there is still something happening in the background. So your spinner can be disabled before your main code was finished. In addition you also want to stop your spinner, in case anything went wrong.

    In short words: You cannot call the spinner synchronous, but you have to do it asynchronous. 

    Google "javascript promise" or "async/await". Using promise is ok for simple code, but async/await is much more easier to use and to understand. Try to find some async/await samples via google to understand the basic concept. Then you can integrate your spinner start/stop and execute your own code.

    Don´t get confused if async/await code is highlighted as error in the Method editor. It will work, the debugger will just not recognize it.

Children
No Data