Description
There's inconsistency with how we handle readonly fields. For standard text inputs we just display the value as text without an input at all, but for other types it's about 50% chance they will be rendered as text, and 50% chance they will be rendered as a disabled control. This is baked in to the engine so clearly something that was done by design, at least for some types.
For example, for geopoints instead of rendering buttons or maps, we just spit out the value, eg: "Accuracy: 0 m,Latitude: 50,Longitude: 50.". If instead we rendered a map with points that couldn't be moved that would provide more useful information for the user than the numeric values. It would also mean if the field were enabled (ie: the readonly value is based on a calculation), currently the form changes length and potentially causes the view port to jump. Instead if the readonly and editable versions were the same length then this calculation update would be more user friendly.
Where controls are used the readonly styling isn't great... some examples
- The rank control is hard to read because it has a "rank items" button that is disabled instead of just showing the current rank
- List groups, and selects with images have a hover behaviour which makes them look clickable
- Likert widgets have a select cursor which makes them look clickable
This form is a version of the all-questions form with every field disabled so you can see how it looks: https://github.com/user-attachments/files/25887068/all-question-types-v2024091201-4.xml
Checklist
- Does it need UI/UX design?
- Does it need API design?
- Does it need design around state flow?
- Does it need a test plan?
User Stories
- As a user,
I want disabled maps to show a map not a numeric long+lat
so that I can understand the information.
- As a user,
I want inputs that are readonly to be obvious,
so that I don't try to interact with them.
Design
- Figma: [Insert URL]
- Design Docs: [Insert URL
Description
There's inconsistency with how we handle readonly fields. For standard text inputs we just display the value as text without an input at all, but for other types it's about 50% chance they will be rendered as text, and 50% chance they will be rendered as a disabled control. This is baked in to the engine so clearly something that was done by design, at least for some types.
For example, for geopoints instead of rendering buttons or maps, we just spit out the value, eg: "Accuracy: 0 m,Latitude: 50,Longitude: 50.". If instead we rendered a map with points that couldn't be moved that would provide more useful information for the user than the numeric values. It would also mean if the field were enabled (ie: the readonly value is based on a calculation), currently the form changes length and potentially causes the view port to jump. Instead if the readonly and editable versions were the same length then this calculation update would be more user friendly.
Where controls are used the readonly styling isn't great... some examples
This form is a version of the all-questions form with every field disabled so you can see how it looks: https://github.com/user-attachments/files/25887068/all-question-types-v2024091201-4.xml
Checklist
User Stories
I want disabled maps to show a map not a numeric long+lat
so that I can understand the information.
I want inputs that are readonly to be obvious,
so that I don't try to interact with them.
Design