Serenity: How to enable/disable a certain field depends on the value of the clickable boolean field?

[fredvaliant]

Is there an attribute that a certain field when a certain boolean field is being change when adding or editing a form?

[JohnRanger]

Hi @fredvaliant ,

If I understand you correctly then you want to disable some fields on a form when on the same form a boolean field changes its value, correct?

If this is the case, attach an event handler to the change event of the boolean field - like this:

// *** What to do when the value of a checkbox field is changed by the user  ***
// *** What to do when the value of a checkbox field is changed by the user  ***
this.form.<yourCheckboxField>.element.bind('change',
    function (e) {

        if (this.form.<yourCheckboxFieldField>.value == true)
        {
            // *** because the value has not yet changed, do here the "false" action ***

            // *** e.g. ***
            Serenity.EditorUtils.setReadOnly(this.form.<yourField>, true); // *** we disable the field (still visible but not editable) ***
            this.form.<yourField>.getGridField().toggle(false);    // *** or if you want to hide the field, use this ***

        }
        else
        {
            // *** because the value has not yet changed, do here the "true" action ***

            // *** e.g. ***
            Serenity.EditorUtils.setReadOnly(this.form.<yourField>, false); // *** we enable the field ***
            this.form.<yourField>.getGridField().toggle(true);    // *** or if you want to unhide the field, use this ***
        }


    }.bind(this)
);

Hope this helps,

John

[Estrusco]

Also see here https://github.com/volkanceylan/Serenity/wiki/UI:-EnableDisableControls

[fredvaliant]

Thanks for the reply. I will try to use your suggestions. It would be a great help as I am new to this framework. Thanks guys.

[fredvaliant]

This might be helpful as well, sharing the updated code I am implementing.

constructor() {
        super();

        // Add change event to control field
        this.form.EnableField.change(e =>
        {
            Serenity.EditorUtils.setReadOnly(this.form.TestField, this.form.EnableField.value);
            Serenity.EditorUtils.setReadOnly(this.form.TestField1, this.form.EnableField.value);
            Serenity.EditorUtils.setReadOnly(this.form.TestField2, this.form.EnableField.value);
        }
   );