conditional show/hide of group fields

[gpetrov]

Is it possible to define in a scheme that the editor should show or hide specific fields depending on values of others?

Like for example if I have a choice checkbox field "use credit card" and only when it is checked then an additional group of fields should be show for all credit card details ...

Save is also valid for the validation - when the group is hidden - now validation on it should be done.

That will be definitely an awesome feature!

[LorenzBischof]

I would also like to know if this is possible.

[gpetrov]

implemented dynamic schemas with #322

[mbrodala]

This should be possible with schema dependencies like this:

{
  "type": "object",

  "properties": {
    "name": { "type": "string" },
    "credit_card": { "type": "number" }
  },

  "required": ["name"],

  "dependencies": {
    "credit_card": {
      "properties": {
        "billing_address": { "type": "string" }
      },
      "required": ["billing_address"]
    }
  }
}

Apparently this is not fully supported: Object is missing the required property 'billing_address'

[samvaughton]

What is the status of this? Would this also support toggling fields based on the value of a select element?

[HaNdTriX]

+1

[shikshik]

+3

[stefanocudini]

+3K

[kavod]

+3M

[oadam]

Another possibility would be that strings corresponding to boolean expression are supported for the hidden option of the editor. With the help of the watch property, that would enable dynamic hiding of parts of the form.
For example, to hide billing address unless card number is specified, one would use :

{
 "type": "object",

"properties": {
  "name": { "type": "string" },
  "credit_card": { "type": "number" },
  "billing_address": {
    "type": "string",
    "watch": {
      "ccard": "credit_card"
    },
    "hidden": "!ccard"
  }
}

[gfb107]

Do it using oneOf
There's too much whitespace in the rendered UI (I disable the collapse, edit JSON and properties buttons), but it works

{
  "title": "Payment Method",
  "oneOf": [
    {
      "title": "Bank EFT",
      "type": "object",
      "properties": {
        "bankName": { "title": "Bank name", "type": "string" },
        "routingNumber": { "title": "Rounting number", "type": "string" },
        "accountNumber": { "title": "Account number", "type": "string" }
      },
      "additionalProperties": false
    },
    {
      "title": "Credit Card",
      "type": "object",
      "format": "grid",
      "properties": {
        "cardType": { "title": "Card type", "type": "string", "enum": [ "Amex", "Discover", "MasterCard", "Visa" ]},
        "cardNumber": { "title": "Card number", "type": "string", "minLength": 15, "maxLength": 16 },
        "expiration": { "title": "Expiration month", "type": "string", "format": "month" },
        "CCV": { "type": "string", "maxLength": 4, "minLength": 3, "pattern": "[0-9]*" }
      },
      "additionalProperties": false
    }
  ]
}

Try it here

[ThomasSteiner]

One question about this. The above solution forces the driver of the dependency (Payment Method) to be a dropdown selection. It doesn't appear that any other format is supported (i.e. checkbox, per the original ask). In other words, I would like to be able to ask for a first condition in boolean format (i.e. 'Show form') and depending on whether that box is checked, then you would either get one of the forms or nothing.

{ "title": "Show form", "oneOf": [{ "title": "True", "type": "object", "properties": { "bankName": { "title": "Bank name", "type": "string" }, "routingNumber": { "title": "Rounting number", "type": "string" }, "accountNumber": { "title": "Account number", "type": "string" } }, "additionalProperties": false }, { "title": "False", "type": "object", "properties": {}, "additionalProperties": false }] }

Per the example above, I would want to have that first 'Show form' condition determine whether or not the rest of the form appears. Obviously, this isn't set up as a boolean so I can't just set the format to checkbox but are there alternatives to getting a boolean to determine whether another item shows up or not?

[gfb107]

The original request was to have values appear and disappear in the UI and the produced JSON value based on user interaction and the value of a property. It was suggested this could be done using schema dependencies, but that doesn't work.

A behavior similar to the original request can be achieved using oneOf, possibly in addition to the other suggestions above

If you set the first entry in your oneOf array to be a schema with "type": "null", it results in a UI that I find workable.

There's still a problem with excessive white space, that the author should fix. The problem is the container for the Collapse, Edit Json, and Properties controls isn't removed/hidden when those are all disabled.

See it here

{
  "title": "Payment Method",
  "oneOf": [
    {
      "title": "None",
      "type": "null"
    },
    {
      "title": "Bank EFT",
      "type": "object",
      "format": "grid",
      "properties": {
        "bankName": {
          "title": "Bank name",
          "type": "string",
          "minLength": 5
        },
        "routingNumber": {
          "title": "Routing number",
          "type": "string",
          "minLength": 9
        },
        "accountNumber": {
          "title": "Account number",
          "type": "string",
          "minLength": 12
        }
      },
      "required": [ "bankName", "routingNumber", "accountNumber" ],
      "additionalProperties": false
    },
    {
      "title": "Credit Card",
      "type": "object",
      "format": "grid",
      "properties": {
        "cardType": {
          "title": "Card type",
          "type": "string",
          "enum": [
            "Amex",
            "Discover",
            "MasterCard",
            "Visa"
          ]
        },
        "cardNumber": {
          "title": "Card number",
          "type": "string",
          "minLength": 15,
          "maxLength": 16
        },
        "expiration": {
          "title": "Expiration month",
          "type": "string",
          "format": "month"
        },
        "CCV": {
          "type": "string",
          "maxLength": 4,
          "minLength": 3,
          "pattern": "[0-9]*"
        }
      },
      "required": [ "cardType", "cardNumber", "expiration", "CCV" ],
      "additionalProperties": false
    }
  ],
  "options": {
    "theme": "bootstrap3",
    "disable_collapse": true,
    "disable_edit_json": true,
    "disable_properties": true
  }
}

[ThomasSteiner]

Right, apologies if I wasn't clear but my specific question is around that first layer and specifically using a boolean to determine if a dependent option is visible. The primary reason for wanting this to be a boolean, is such that I can use the checkbox format. I basically want to have a first checkbox (not a drop down) where I set a value to true or false. If set to true, I get an additional form with a set of options. If set to false, I get nothing.

The example you provided is in line with my original post where you get have to use a drop down since oneOf doesn't work like a boolean.

Thanks!

[gfb107]

I don't think there's a way to achieve what you want. Using oneOf is the only thing currently available. In a way, it seems more complicated to use 2 controls (a check-box and a drop-down) to get the same end results with just a drop down that has "None" (or equivalent) as the first choice of many. Having said that, if there's only one choice other than "None", a checkbox is better.

If you think about it, what you're asking for is a simpler interface for non-required (aka optional) properties. Currently their presence is controlled using a checkbox in the Properties drop-down. It would be simpler if the checkbox were shown with the label for the property. The label for optional fields would always be shown, but the UI elements for the property would only be shown if the checkbox is checked.

This is still not exactly what was requested in the original request as the behavior is not controlled by the value of another property. Instead it is controlled by whether or not the property is required.