I have the following use case: I have a small form where the first property represent the dataTpe, this is a selectbox with a defined set of values (enum), the second property is the value, this is a numeric value. Depending on the value of dataType, I want the numeric input control rendered with a certain suffix (where the numeric value’s unit is displayed). I have a renderer where the suffix is handled using an options value in the UISchema.
What would be a good approach to handle this? In Vue I was thinking about listening to formData changes, and update the (computed) uischema accordingly.
I am very interested what is the generally accepted approach of altering control UI as a result of changing data in the same form. Basically it is how the Rules work but that only supports hiding, or disabling a control, I need to change other properties of the control as well. Thanks in advance!
All such use cases can easily be handled with custom renderers. A (custom) renderer can access the whole form-wide state and therefore consume also data which is “managed by another property”. This is true for any of the bindings, including Vue.
This can then be implemented ranging from a hard coded manner in which a renderer looks at a very specific property and then renders a hard coded suffix to a very generic implementation in which the look up paths and according suffixes are for example declaratively definable in the UI Schema.