Turn all buttons to Button Loading in an easy way
4612
Views
9
Comments
New
Frontend (App Interfaces)

An often-occuring issue is that user click on an action twice, which causes an action to run twice. This leads to very nasty issues where data is created and/or processed twice.

One way to prevent this, is to wrap your Button into a 'Button Loading' widget, and adding an IsLoading widget to the page.

It would be nice to support this in an easier way, either by:

  • Adding a property to the button that adds 'IsLoading' behaviour to it
  • Add ButtonLoading widgets around all your button widgets in your apps
  • Any other ideas to achieve the same result?

A well-reasoned observation. @Remco Snijders  

A simple enhancement would be to add a built-in DisableOnClick property to the Button widget in OutSystems. When enabled, the button would automatically disable itself on the first click and re-enable only after the action finishes. This would prevent double submissions without needing additional widgets or custom JavaScript. 

Yes, I totally agree! I’ve seen this issue happen when users click buttons multiple times quickly. Using the 'Button Loading' widget sounds like a smart fix. It would be really helpful if the button itself had an 'IsLoading' option, it would save time and make things easier.

Yes, I completely agree! I've encountered this issue when users rapidly click buttons. Implementing the 'Button Loading' widget is a smart solution. It would be even better if the button had a built-in 'IsLoading' option — it would streamline the process and enhance usability.


Good idea

Yes it's a common issue which needs to be handled.

Having a built-in property on the button to automatically handle loading states would be fantastic in the low-code world. It would simplify development and improve UX by preventing multiple submissions without extra code. 

I do agree with you, Remco Snijders. It would provide a better user experience for the developers.

But, till OutSystems add this features, you can achieve the loading effect on a group of buttons using CSS. You can also prevent them from being clicked. You can find a demo in the link below:

OutSystems Button Group Loading Demo

Hope this would be a help for you.

In my component Dev Patterns I developed a way to do exactly this.

You might also want to look at Interaction Guard (also in Dev Patterns) that allows you to disable all interactive elements in the page - so you can extend the "locked" behavior to links.

Hope it helps!





I agree with this and seems easy to the end-user to know the process is going on