I need to introduce an artificial day on a button to prevent it from being pressed too quickly in Reactive. Long Story Short, if the user presses the button too fast, some of the backend data isn't loaded yet and they get the wrong process.I've tried looking a t-i-m-e-r-s but all that brings up is process timers. There used to be a Loading Button component, but that doesn't seem to be available on my version anymore. (which is weird because I have another app that has it...)
I can't use a forge component, so I need to do something with what I have. I wouldn't mind the button being hidden or disabled for 5 seconds, but everything I tried for that failed.
I tried a setTimeout JS function, but it didn't work. I tried a process Wait, but couldn't get it into a client or server function to work.
I know I'm not the first to need something like this- but can't seem to find anything that helps.
Ideas?
Hello @Thomas Gooch ,
Here’s how you can achieve your use-case using a combination of local variables and JavaScript:
Define a Local Variable:
Create a Boolean local variable, e.g., IsButtonEnabled, and bind it to the Enabled property of your button.
Screen Action:
Create a screen action called EnableButton. In this action, set the IsButtonEnabled variable to True.
Button OnClick Logic: In the OnClick action of the button:
Set IsButtonEnabled to False as the first step.
Use the following JavaScript logic to re-enable the button, at the end of the action:
setTimeout(function() { $actions.EnableButton();}, 5000);
This approach ensures that the button is immediately disabled upon clicking and automatically re-enabled after 5 seconds. It provides a seamless user experience and prevents issues arising from rapid consecutive clicks.
I also attached an example OML.
I tried this, but it never re-enables the button. :( It just says disabled.
Can you please attach your OML ? Also did you check the OML I attached?
Hi @Thomas Gooch
I attached a OML for your scenario review it once .
Regards ,
Rajat
Instead use loading button.
you can check here
https://personal-u1aragiz.outsystemscloud.com/Disable/Sample?_ts=638737457530998721
I am attaching updated oml as well.
For demo purpose I used Sleep component to create a dummy pause.
hi Thomas,
attaching the OML for your reference, and the URL to check your requirement.
https://jozy-sohail.outsystemscloud.com/accor/Sheet1s?_ts=638737484667920714
hope it helps
In the Enabled property of the button you can use the "IsDataFetched" from the aggregates in your screen, that have to be fetched before you want your button enabled. Given, as an example, you have 2 aggregates named GetData1 and GetData2 you can put "GetData1.IsDataFetched and GetData2.IsDataFetched" in the enabled-property of the button.
The button will get enabled after both aggregates are fetched. This way you don't have to wait for "some" time, now the button is immediatly enabled if the data is ready.
> There used to be a Loading Button component, but that doesn't seem to be available on my version anymore.
It may be not selected in dependencies. Find it there and make sure it is checked:
Please find the below OML, i have implemented button loader with 5 secs delay loading. You can also follow the same and setTimeout() for the action you required.
Thank You.