How can I achive that enable all checkboxes in jsonschema after I check radio button? - jsonschema

Question

Okey. I have a jsonschema as below. I am trying to get all the items (colors - checkboxes) clicked by default when the radio button "YES" is marked. On the contrary, if the "NO" button is clicked, all the colors will be unchecked.
JsonSchema
{
"title": "Item Type Filtering Form",
"description": "Form for filtering Item Types according to selected Attribute Values.",
"type": "object",
"properties": {
"colorAll": {
"type": "boolean",
"title": "Seat Color All",
"enum": [
false,
true
],
"enumNames": [
"NO",
"YES"
],
"default": true
},
"colorList": {
"type": "array",
"title": "Seat Color",
"items": {
"type": "object",
"enum": [
{
"id": 1,
"label": "RED"
},
{
"id": 2,
"label": "BLUE"
},
{
"id": 3,
"label": "GREEN"
}
],
"enumNames": [
"RED",
"BLUE",
"GREEN"
]
},
"uniqueItems": true
}
}
}
UISchema
{
"colorAll": {
"ui:widget": "radio",
"ui:options": {
"inline": true
}
},
"colorList": {
"ui:widget": "checkboxes",
"ui:options": {
"inline": true
}
}
}
I am practising it on the page https://mozilla-services.github.io/react-jsonschema-form/# but none of my tries is working how I described above...
I thought, that I can make it with "default:" keyword and put all the values into it -> JsonSchema is valided, but it didn't work.
Can somebody help me with it?

Answer 1

Currently It does not seems to be possible
{
"title": "Schema dependencies",
"description": "These samples are best viewed without live validation.",
"type": "object",
"properties": {
"conditional": {
"title": "Conditional",
"$ref": "#/definitions/person"
}
},
"definitions": {
"person": {
"title": "Person",
"type": "object",
"properties": {
"colorAll": {
"type": "string",
"enum": [
"No",
"Yes"
],
"default": "No"
}
},
"required": [
"colorAll"
],
"dependencies": {
"colorAll": {
"oneOf": [
{
"properties": {
"colorAll": {
"enum": [
"Yes"
]
},
"colorList": {
"type": "array",
"title": "Seat Color",
"items": {
"type": "string",
"enum": [
"RED",
"BLUE",
"GREEN",
"Yes Only",
"ABC"
]
},
"default": [
"RED",
"BLUE",
"Yes Only"
],
"uniqueItems": true
}
}
},
{
"properties": {
"colorAll": {
"enum": [
"No"
]
},
"colorList": {
"type": "array",
"title": "Seat Color",
"items": {
"type": "string",
"enum": [
"RED",
"BLUE",
"GREEN"
]
},
"uniqueItems": true
}
}
}
]
}
}
}
}
}
if you run the above in playground, the list of colors changes, but it does not select the default ones. but if you have colorList has standalone component, it selects the default ones.

Answer 2

To change the default selected values, you need to use the "onChange" property of the form (https://react-jsonschema-form.readthedocs.io/en/latest/#form-data-changes) and handle that logic on your own. Thus, you can check if the radio button was toggled to true or false, and if so, set colorList to
[
{
"id": 1,
"label": "RED"
},
{
"id": 2,
"label": "BLUE"
},
{
"id": 3,
"label": "GREEN"
}
]
or [] respectively.
Note the following warning in the doc:
WARNING: If you have situations where your parent component can re-render, make sure you listen to the onChange event and update the data you pass to the formData attribute.
Here's an example codepen I set up that manages the two properties:
https://codepen.io/anon/pen/VOjJmY
Also note that because the actual value is an object, I think you have to reuse the same object (hence the direct use of schema.properties.colorList.items.enum).
I think there is a bug with React JSON Schema Form because the checkboxes' UI state doesn't get updated in the right lifecycle or something. The state is correctly updated, but I can't the un-toggle all/toggle all effect to happen on correct state, but rather the follow toggle... Like on going from "YES" -> "NO" -> "YES" they all switch off, and then going from "YES" -> "NO" they would switch back on...