Skip to main content
V
victoriab0001
February 25, 2022
Question

How can I make a drop down field read only?

  • February 25, 2022
  • 3 replies
  • 1 view

Hello all, 

depending on the user choices, they can either be able to change a value or to just read only the values in an Interface.

For the text field is easy I just apply the readOnly parameter : 

How can I make a dropdown field read only ?.

Kind Regards, 

    3 replies

    M
    markc4162
    February 25, 2022

    You can't make it inherently readOnly, but it can be disabled and not selected.  A more common pattern would be if(condition, readOnlyTextField, dropdownField)

      R
      richardn0004
      February 26, 2022

      To dive deeper into this, a disabled dropdown (revealing some previously selected choice, for example) is awkward.  Using a conditional display of a read-only text field is the simplest solution to more elegant UI experience.

      However,  even richer options exist when you abandon input components for read-only purposes.  You can conditionally use rich text fields and icons to display that information in a way that draws more attention to it.

      We have found two common use cases in a lot of our work.  

      One is where have a read-only interface that is separate from the input forms, used to display information to people who have a passive interest in the information.  In this case. we may craft an entire UI experience that is different from the data entry.

      Second where there are different business users who need to input information where the user's group membership or other criteria is used to determine whether a given field is read-only or available for edit.  In this case, we still have an opportunity to give them the richest possible experience using the construct that Mark has proposed.

      harshitb6843
      harshitb6843
      February 27, 2022

      Hi there,

      While working with showing values of a dropdown in a readOnly field (eg. richTextDisplayField() or textField()), do remember to use the displayValue() function to not show the selected value (which in the general case is not a user-friendly value) rather show the selected label. 

      Terms & ConditionsAccessibility statement