Show & hide

With visibleIf keyword, you can conditionally hide portions of the form.

Interface

Option

Type

$eval

string

Your JS code to determine if layout should be displayed. Code must return true or false. Do not forget to return value!

dependencies

string[]

If your code depends on changes of other properties in schema, list them here.

Example

Example showing image only if showImage checkbox is checked.

{
  "schema": {
    "type": "object",
    "properties": { "showImage": { "type": "boolean" } }
  },
  "layout": {
    "type": "div",
    "items": [
      { "type": "image", "src": "http://example.org/image.png",
        "visibleIf": {
          "$eval": "return $val.showImage == true",
          "dependencies": [  "showImage" ]
        }
      }
    ]
  }
}

Last updated

Was this helpful?