How to allow a checkbox to create a greyed out/disabled field

Hi everyone,

 

This may be a simple fix, but I cannot get it right. I have created a form where the user can input their SSN. If they do not have a SSN, they have to check a checkbox and the field for Social security number should become greyed out/disabled but that is not working currently. I am only able to make the field null. Currently, these are the relevant pieces of my code:

rule!AF_CMPT_General_booleanCheckBoxField(
choiceLabel: "I don't have an SSN",
choiceValue: {
true
},
value: local!checkbox,
saveInto: {
local!checkbox
}
),

}
),

rule!AF_CMPT_General_textField(
label: cons!SOCIAL_SECURITY_LABEL,
readOnly: if(
isnull(
local!checkbox
),
false,
true
), 
value: 
if(
isnull(
local!checkbox 
),
ri!boardUser.socialSecurityNumber,
{}
)

The {} is where the number currently is blank if the user checks the "I don't have an ssn" checkbox.

 

Any help would be appreciated.

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer

    I've previously written a Boolean Checkbox component that pretty solidly satisfies most use cases I've found for a boolean checkbox - it involves a little bit of trickery to get it to work as one might expect.  I suggest you upgrade yours a bit, feel free to borrow from the below code:

    =/*  Boolean Checkbox Component  */
    
    a!checkboxField(
      label: ri!label,
      labelPosition: ri!labelPosition,
      instructions: ri!instructions,
      choiceLabels: {ri!checkboxLabel},
      choiceValues: {ri!trueValue},
      value: if(
        ri!value = ri!trueValue,
        ri!value,
        null()
      ),
      saveInto: {
        a!save(
          ri!saveInto,
          if(rule!APN_isEmpty(save!value), ri!falseValue, ri!trueValue)
        )
      },
      required: ri!required,
      disabled: ri!readOnly,
      validations: ri!validations,
      align: ri!align
    )

    For this component, you simply pass in values for "trueValue" and "falseValue" (in your case just pass in true() and false()), and make sure to handle the default value (i.e. initializing your local variable to a value of false()).

    Then for your SSN field, set the readOnly parameter just to the value of local!checkbox, no need to do the "if(isnull(local!checkbox).." stuff.

    rule!AF_CMPT_General_textField(
      label: cons!SOCIAL_SECURITY_LABEL,
      readOnly: local!checkbox,
      value: if(
        local!checkbox,
        "",
        ri!boardUser.socialSecurityNumber
      )
    )

  • Please update your textField rule to following (Instead of readOnly, user disabled parameter from the textField):
    rule!AF_CMPT_General_textField(
    label: cons!SOCIAL_SECURITY_LABEL,
    disabled: if(
    isnull(
    local!checkbox
    ),
    false,
    true
    ),
    value:
    if(
    isnull(
    local!checkbox
    ),
    ri!boardUser.socialSecurityNumber,
    {}
    )

    I hope, this helps.
  • 0
    Certified Lead Developer

    Hi dcuser12 Also you can have a look into this sample code for your requirement, where the SSN field gets disabled and empty when a user click on the Checkbox.

    load(
      local!checkbox,
      local!SSN,
      a!formLayout(
        label: "Test Form",
        contents: {
          a!textField(
            label: "SSN",
            value: local!SSN,
            saveInto: local!SSN,
            disabled: if(
              not(isnull(local!checkbox)),
              local!checkbox,
              false()
            )
          ),
          a!checkboxField(
            choiceLabels: {"I don't have SSN"},
            choiceValues: {true()},
            value: local!checkbox,
            saveInto: {
              local!checkbox,
              a!save(local!SSN, null())
            }
          )
        }
      )
    )

    Hope this will help you