UI Schema

The rjsf uiSchema provides built-in ways to control the appearance and behavior of many fields. urljsf adds some extra features.

urljsf:grid

By default, rjsf will draw all properties of an object as a vertical, scrollable list.

Sometimes, it may be desirable to use other layouts enabled by the existing Bootstrap grid classes. Combined with the order field (as opposed to order-specific classes), this can provide a more logical experience.

{
  "ui:options": {
    "label": false,
    "order": ["package", "spec", "channel"],
    "urljsf:grid": {
      "children": {
        "package": ["col-md-4"],
        "spec": ["col-md-4"],
        "channel": ["col-md-4"]
      }
    }
  }
}

urljsf:datalist

Show autocompletion for text fields with very large domains

Wherever possible, using JSON Schema enums will provide a good experience for filling in string values. However, for very large, but potentially inexhaustive, enums, rjsf will struggle to (re)render all the elements.

For this case, a custom widget is available which will provide autocompletion based on the HTML5 datalist element. For example this JSON schema:

{
    "properties": {
        "entry": {
            "description": "an entry from an encyclopedia"
            "type": "string"
        }
    }
}

And a UI schema:

{
  "entry": {
    "ui:options": {
      "widget": "urljsf:datalist",
      "options": ["aardvark", "...", "zyvzza"]
    }
  }
}

When a user types at least one character, then selects an item from the list, a visual checkbox indicator will reflect that it appears in the datalist. Form submission will not be blocked, though this can be added as a check, as the config.forms.*.ui_schema is available.