Option Tree Field

The optiontree field.

Properties

Title Option Tree
Description Text field for lowercase text
Field Type optiontree
Base Field Type text

Schema

Property Type Default Description
allowOptionalEmpty Allows this non-required field to validate when the value is empty
autocomplete string Allows you to specify the autocomplete attribute for the underlying input control whether or not field should have autocomplete enabled.
data object Allows you to specify a key/value map of data attributes that will be added as DOM attribuets for the underlying input control. The data attributes will be added as data-{name}='{value}'.
disallowEmptySpaces boolean Whether to disallow the entry of empty spaces in the text
disallowOnlyEmptySpaces boolean Whether to disallow the entry of only empty spaces in the text
enum array List of specific values for this property
inputType string Allows for the override of the underlying HTML5 input type. If not specified, an assumed value is provided based on the kind of input control (i.e. 'text', 'date', 'email' and so forth)
maskString string Expression for the field mask. Field masking will be enabled if not empty.
placeholder string Field placeholder.
size number 40 Field size.
trim boolean Remove whitespace from the beginning and end of string
typeahead Provides configuration for the $.typeahead plugin if it is available. For full configuration options, see: https://github.com/twitter/typeahead.js

Options

Property Type Default Description
name string Field Name.
sort function Defines an f(a,b) sort function for the array of enumerated values [{text, value}]. This is used to sort enum and optionLabels as well as results that come back from any data sources (for select and radio controls). By default the items are sorted alphabetically. Don't apply any sorting if false.
tree object

The optiontree field provides a text entry field with optional selectors that serve to lead the user down a selection path to a value. The field is useful in scenarios where a user must provide information that they may not have at hand. The selectors provide the user with an ability to narrow down their criteria until they arrive at the result.

This field is essentially a composite field in that it allows you to wire together multiple sub-fields to serve as the selectors. These include drop-down lists, checkbox selectors and anything else you elect to wire in. The only requirement is that the selector fields must return scalar (non-object, non-array) values.

This field takes in a configuration object that describes:

  • options - the field configuration for selectors
  • order - the order of option fields
  • data - the data attributes and value

The field sorts through the data and handles the creation and display of sub-fields as the user clicks and changes values.

Example 1

value. Here, we provide a sequence of dropdowns to let them select a sport, team and athlete. The jersey number is then automatically filled in.

{% raw %} {% endraw %}

Example 2

merged with some inline options that provide to override a submit click handler.

{% raw %} {% endraw %}