Issue with rendering nested fields

General
1

Hello, I’m trying to re-arrange the structure of my schemas by nesting some properties for better categorization. I’m running into an issue where certain properties are ignored (such as labels). As if it is generating its own custom schema.

Running the schemas through the material renderers, I get the following output:

CleanShot 2024-12-11 at 14.22.29@2x
CleanShot 2024-12-11 at 14.22.29@2x764×728 11.4 KB

You can see that my enabled_templates and one slot template labels from ui-schema are ignored.

Any idea what is going on?

schema.json

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "surf": {
      "type": "object",
      "properties": {
        "enabled_templates": {
          "type": "object",
          "properties": {
            "one_slot_template": {
              "type": "boolean"
            }
          }
        }
      }
    }
  }
}

ui_schema.json:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Group",
      "elements": [
        {
          "type": "Input",
          "scope": "#/properties/name",
          "label": "Name",
          "options": {
            "placeholder": "concept_x"
          }
        }
      ]
    },
    {
      "type": "Control",
      "scope": "#/properties/surf",
      "label": "surf",
      "elements": [
        { 
          "type": "Control",
          "scope": "#/properties/enabled_templates",
          "title": "enabled_templates",
          "elements": [
            {
              "type": "Switch",
              "title": "one slot template",
              "scope": "#/properties/one_slot_template"
            }
          ]
        }
      ]
    }
  ]
}
2

Hi @jordykoppen,

In default JSON Forms, sub UI Schemas are specified via options.detail, i.e. you need to restructure your UI Schema like this:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Group",
      "elements": [
        {
          "type": "Input",
          "scope": "#/properties/name",
          "label": "Name",
          "options": {
            "placeholder": "concept_x"
          }
        }
      ]
    },
    {
      "type": "Control",
      "scope": "#/properties/surf",
      "label": "surf",
      "options": {
        "detail": {
          "type": "Control",
          "scope": "#/properties/enabled_templates",
          "title": "enabled_templates",
          "options": {
            "detail": {
              "type": "Switch",
              "title": "one slot template",
              "scope": "#/properties/one_slot_template"
            }
          }
        }
      }
    }
  ]
}

However, it seems you are using custom renderers as JSON Forms does not support "type": "Input" nor "type": "Switch" in any of the off-the-shelf-renderers. Also you are using both title and label in your UI Schema.

As you are using custom renderers, my suggestion is of limited value, as I don’t know how they are implemented. They might very well support elements within a Control.