Hi community,
I’d like to bring up another topic for discussion.
In some codes, I’ve noticed a recurring pattern: using an If widget to control whether buttons are displayed as enabled or disabled.
The idea behind this approach is to make the code “safer.” When the condition is True, the button is shown with its "real action"; when False, it displays a "DoNothing" action that performs no action.
My questions are:
Context: Reactive App.
Looking forward to hearing your thoughts!
Hi, Nivaldo!I'm sharing two links from the OutSystems documentation regarding this:Visible disabled ButtonBest practices for building screensBased on that, I'd recommend avoiding option number 2.
Best Regards,
Bernardo.
Have you tried inspecting the DOM to see the differences? That should tell you what you need to know to be honest.
When you only use the Enabled field, the DOM can still be manipulated to execute the Client Action.
If we talk security, I think both are not safe, but skills have to be much more advanced for the If widget.
I never saw this pattern of presenting a fake button, what is the thinking ? Hackers who want to tamper will be fooled into thinking they have success by just changing the enabled property of that fake button and look no further ?
But besides security, there is a whole world of use cases where the button's enablement is there to support functionality/business logic, I don't see any harm there in just using the property on the widget rather than wrapping in an If.
Another important difference is how this behaves in the HTML/DOM and when using JavaScript:
With the If widget, when the condition is False, the button simply does not exist in the DOM. This means that if you later need to access that button via JavaScript — by Id, by class, or using any query selector — you won’t be able to, because the element isn’t part of the HTML at all.
With the Enabled property, the button always exists in the DOM, it’s just disabled. This makes it accessible to JavaScript, so you can still attach events, apply styles, or manipulate it if needed.
Of course, there’s also a downside: because the button stays in the DOM, anyone with browser dev tools can inspect it and manually re-enable it — which reinforces the fact that you should never rely solely on UI logic for security.
It all depends
In Reactive, though it may not be in the DOM, it's certainly somewhere since when you change the variable(s) that are in the If, and the condition now evaluates to True, the Button is displayed again, all client-side. So a good "hacker" can make the button appear (or, just invoke whatever code is behind the button). That's why server-side role checking is always important.
Hi @Nivaldo Pereira in general I prefer the "If" widget, as I find it more visible for the developer to notice that there is a condition on the button. The "Enabled" and "Visible" properties cannot be seen from the widget tree, only when the developer focus on the button, he/she can see the logic applied.. But to answer your questions:
Do you think using the condition directly on the button’s Enabled property provides the same level of safety and code readability as wrapping it inside an If widget? Or is there a meaningful difference?
For the readability aspect, as mentioned before, I think that the "If" is better.
For the safety side, any one who use the browser inspector tool, can override the applied logic by removing the "disabled" attribute from the button.
Have you used this pattern in your projects?
Yes, but manly to avoid any unnecessary requests on the server.
I also prefer to apply a second layer of validation from the server side, just incase.
Do you consider it a good practice? Why or why not?
I think I covered this question on my answer for the first question. For the readability and safety.
In either case we should validate the action at server side. Relying on UI only won't solve any security Issue. But If widget is more reliable than Enable property for first step.