I need to render an array which have radio element whit some preset options and where last option will be “Other” which will enable a free text input when selected.
Radio is not mandatory I could achieve almost same result rendering a select box. See following pic.
“altro” field is enabled only when third radio is selected.
Thank you all!
[original thread by Alessandro Sebastiani]
Hi @sebbalex(sebbalex). There are multiple ways to achieve this, for example you could use an array which contains objects with an enum and an other property.
Schema:
{
"type": "object",
"properties": {
"inQualita": {
"type": "array",
"items": {
"type": "object",
"properties": {
"selectedOption": {
"type": "string",
"enum": ["1", "2", "3"]
},
"altro": {
"type": "string"
}
}
}
}
}
}
UI Schema
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/inQualita",
"options": {
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/selectedOption",
"options": {
"format": "radio"
}
},
{
"type": "Control",
"scope": "#/properties/altro",
"rule": {
"effect": "ENABLE",
"condition": {
"scope": "#/properties/selectedOption",
"schema": {
"const": "3"
}
}
}
}
]
}
}
}
]
}
The downside of this solution is that you have two separate properties in your schema (and therefore in your resulting data object) and selecting option 1 or 2 will not remove an already set other string.
If you would like to have only a single property in your schema you’ll need to write a custom renderer.
[Alessandro Sebastiani]
first, thank you! I was able to reproduce except for radio input, even if I specify
"options": {
"format": "radio"
}
I always get a select box, this is my code:
schema.yaml
type: object
properties:
SchedaAnagraficaSUAP:
$ref: "definitions.yaml#/schemas/SchedaAnagraficaSUAP"
definitions.yaml
SchedaAnagraficaSUAP:
properties:
dichiarante:
$ref: 'definitions.yaml#/schemas/Dichiarante'
procuratore:
$ref: 'definitions.yaml#/schemas/Procuratore'
Dichiarante:
properties:
inQualita:
type: array
items:
type: object
properties:
selectedOption:
type: string
enum:
- titolare
- legaleRappresentante
- altro
altro:
type: string
uischema.yaml
- type: HorizontalLayout
elements:
- type: Control
label: "In Qualità"
scope: "#/properties/SchedaAnagraficaSUAP/properties/dichiarante/properties/inQualita"
options:
detail:
type: VerticalLayout
elements:
- type: Control
scope: "#/properties/selectedOption"
options:
format: "radio"
- type: Control
scope: "#/properties/altro"
rule:
effect: SHOW
condition:
scope: "#/properties/selectedOption"
schema:
const: altro
sorry, it is a little verbose
[Alessandro Sebastiani]
woah never mind, I figured it out… I had some cache problem in my local env… sorry.
No problem 
The radio input was present but not properly dispatched to in previous versions of JSON Forms, so maybe you were still on an older version. Glad that it works now!
