Hi @BartJansseune,
You can use the following UI Schema for the toogle and the rule:
{
"type": "Control",
"scope": "#",
"options": {
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/parent/properties/hasChild",
"options": {
"toggle": true
}
},
{
"type": "Control",
"scope": "#/properties/parent/properties/child",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/parent/properties/hasChild",
"schema": {
"const": true
}
}
}
}
]
}
}
}
Note however that there is no way of adding a “child” object as we don’t support adding explicit nested objects outside of an array by default. We only support this by rendering nested controls which then add the object implicitly. This works in all use cases except for the self-referential one of yours as this approach would lead to an endless loop.
If you need to support this then you need to add a custom renderer which offers to add such a single nested object. This should be straightforward to implement.
However what we support is adding nested objects in an array, so you could change your schema to this:
{
"definitions": {
"item": {
"type": "object",
"properties": {
"hasChild": {
"type": "boolean",
"title": "hasChild"
},
"child": {
"title": "child",
"type": "array",
"items": {
"$ref": "#/definitions/item"
}
}
}
}
},
"title": "nested example",
"type": "object",
"properties": {
"parent": {
"title": "parent",
"$ref": "#/definitions/item"
}
}
}
To support the “hide” functionality in all nested cases you can’t obviously use the “detail” approach as it would require indefinite nesting. What you can do instead is to use the “uischemas” registry. This registry will be queried for each nested object for a Ui Schema. There you can then generate and return a UI Schema with a rule as above, just with all scopes adjusted to the current nested level. Alternatively you could of course also just implement a custom renderer which is able to look up the sibling hasChild to determine whether it needs to be hidden.