Hey there,I have a screen with 4 general buttons and a table with a delete link per row.Now imagine the user wants to delete 2 rows from that table and then click one of the buttons to do something else (it doesn't matter what).What is the good practices way of preventing a user from clicking the second delete link before the first one finished executing everything?And the question would be the same for the button. I need to find a way to disable all click events during the time that some action is executing. This is happening because the system is somewhat slow (not because the actions are code heavy).regards
Hey @Gonçalo Almeida, hope You're well!
I would try to go with a combination from @Daniel Kuhlmann and @Mika Grootenboer sugestions.
Try using the enable/disable booleam variables only on the buttons you need, leaving the user free to run the other actions you want him to be able to.
Aditionally I would use the LoadingButton approach for the same controls you are disabling/enabling to inform the user those buttons are not available for the moment.
The flow would be something like: the user clicks a button and, as a result, some other buttons (just the ones you choose, not all of them) would be disabled and showing the load spin until the original action is completed.
Hope it helps.
Best regards
Hello @Goncalo Almeida,
One of the solutions you can implement is to create a local variable that switches from true to false when a button or delete link is clicked and set this local variable in the enabled of all the button and links.
And ofcourse set it back from false to true when the action is finished.
Hope this helps.
Hi Mika,
I was kind of hoping to avoid that since there are many actions the user can execute on the screen, but if no other solution comes along I'll have to do it ;)
Thanks
Hi,
You could consider using the LoadingButton widget from OutSystemsUI:https://success.outsystems.com/documentation/11/developing_an_application/design_ui/patterns/using_mobile_and_reactive_patterns/utilities/button_loading/
See for example code here: https://www.outsystems.com/forums/discussion/74205/prevent-multiple-clicks-on-button-in-reactive-web/
There is also another Forge component with a solution to your problem: https://www.outsystems.com/forge/component-overview/13949/prevent-buttons-double-click
Regards,
Daniel
Hey @Gonçalo Almeida,
you can always prevent this on server-side, with an aux entity, for example, where you create a record at the beginning of an action and delete it at the end. Then, use the same validation upon the other actions, to make sure you have nothing running on the side. Best regards
You can implement a loader. Whereas a new loader container will come top of the screen. So buttons or other containers are not accessible. You can toggle the loader variable during the delete call.
There are many solutions but this is one of the way to prevent this scenario.