Set options on a control inside a list of objects

General
1

Hello,

I’m having trouble setting a checkbox to use the “toggle” option. Here is my JSON Schema:

{
    "type": "object",
    "properties": {
        "reporting_status": {
            "type": "object",
            "properties": {
                "title": {
                    "type": "string"
                },
                "status_types": {
                    "type": "array",
                    "items": {
                        "type": "object",
                        "properties": {
                            "value": {
                                "type": "string"
                            },
                            "hide_on_goal_pages": {
                                "type": "boolean"
                            }
                        }
                    }
                }
            }
        }
    }
}

And here is my UI Schema:

{
  "type": "Group",
  "label": "Reporting status",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/reporting_status/properties/title"
    },
    {
      "type": "Control",
      "scope": "#/properties/reporting_status/properties/status_types"
    }
  ]
}

My goal is to get the checkboxes inside the “statues_types” items to be toggles. I know that I need to use this somewhere:

options: {
    toggle: true
}

But I can’t figure out what I need to add to the UI Schema where I can place that. Any tips are appreciated!

2

Hi @brockfanning,

Whenever a Control points to an object or to an array, it will determine a UI Schema to render. The easiest way to hand over such a detail UI Schema is via options: detail, e.g.

{
  "type": "Group",
  "label": "Reporting status",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/reporting_status/properties/title"
    },
    {
      "type": "Control",
      "scope": "#/properties/reporting_status/properties/status_types",
      "options": {
        "detail": {
          "type": "VerticalLayout",
          "elements": [
           {
             "type": "Control",
             "scope": "#/properties/hide_on_goal_pages",
             "options": { "toggle": true}
           }]
        }
      }
    }
  ]
}

Alternatively you can use the uischemas registry which similar to the renderers is asked for a ui schema whenever a detail ui schema shall be rendered.

In both cases this will no longer render the array as a table but rather as a list. If you want to keep the table behavior you will need to implement a custom cell for this field as we don’t offer UI Schema support for table customizations.

1 Like
3

@sdirix Thanks for the info!