javascriptbuttonsapui5isenabled

How to make a button seem enabled for UX reasons, however it is supposed to be disabled


The Title seems a bit confusing so let me explain.

A button does have the property .setEnabled("false"), in which case it will be disabled i.e. you wouldn't be able to click it. However for cosmetic reasons i would like for it to be clickable (as if .setEnabled("true") had been called) but the functionality to be disabled. If the user fulfilled a specific Form, they can submit it, if not they get an Error message.

What I tried: this thing with Button.setEnabled(false)

sap.ui.getCore().byId("Button").setEnabled(false)

Expected Results: For it to be clickable, however if the form is not fulfilled, there should be an Error Message.

Actual Results: Unclickable Button


Solution

  • Instead of disabling the button you should add form-field-validations as described in the Fiori UX guidance. If you in addition need some checks to be performed across several form fields, you can then handle the button press to validate the form fields individual status and the combination of its values to raise errors accordingly as explained in the Fiori UX guidance for forms.

    Disabling the button is only intended for cases where it makes no sense to press the button (e.g. you are not in Edit mode) and you have the need to illustrate this to the end-user. In all other cases you keep it enabled and present proper error messages.