The Simple UI allows you to specify various types of controls.
General parameters
All controls have the following parameters.
paramName
Specifies the internal parameter name that this control is bound to
controlType
Specifies the control type. See "Control Types" below.
label
Specifies the text that appears next to or above the control.
Control types
The following control types are valid. Any properties in addition to the standard properties described above will be specified here.
Note that control types are case-sensitive.
ValueSlider
Provides a slider for adjusting a numeric value.
minValue
Specifies the smallest numeric value that can be selected
maxValue
Specifies the largest numeric value that can be selected
ticks
Specifies the tick frequency, providing a rough idea of granularity. Final appearance depends on system implementation and can change over time.
valuePrefix
Specifies a text prefix to prepend to the displayed value (not the actual numeric value provided to the extension).
valueSuffix
Specifies a text suffix to append to the displayed value (not the actual numeric value provided to the extension).
For example, you could specify a percent sign (%) or a unit.
valueDecimal
Specifies the number of decimal places to format the value with. For example, with a value of 2, a numeric value of "450" will appear as "4.5".
Label
Provides a simple text label using the label
property.
multiLine
If true, the label expands to fit multiple lines of text. If false, the label remains one line and forms an ellipsis.
DirectionPicker
Provides a means of selecting a direction. This is limited to North, Northeast, East, Southeast, South, Southwest, West, and Northwest.
ColorPicker
Provides a means of selecting a color.
allowTransparency
If true, alpha values are passed directly to the filter. If false, only fully-opaque colors can be selected.
Dropdown
Displays a predefined list of options. These should map to an Enum within your filter's code.
list
A JSON array specifying the display names of items within the list
inline
If true, displays the dropdown to the right of its label. If false, displays the dropdown underneath its label.
RadioButton
Much like Dropdown, this also displays a predefined list of options but using radio buttons instead of a dropdown control.
These should map to an Enum within your filter's code.
list
A JSON array specifying the display names of items within the list
CheckBox
Allows the selection of a boolean value
TextBox
Allows the entry of text
inline
If true, displays the text box to the right of its label. If false, displays the text box underneath its label.
Advanced logic
The Simple UI provides a limited manner of adjusting properties of controls in response to changing values of another control.
This is done via the "conditionalXXXX" properties.
We will define the "source" control to be the property we're reacting to, and the "target" control to be the property we're changing.
conditionalProperty
This is the property to react to on the target control. Specify the name of another property within your UI. When that property changes,
the other conditional directives will modify your target control as specified.
Watch out for infinite loops where control A modifies a property on control B, which modifies that same property on control A, etc.
Reacting to conditionals
The property to change is specified by this directive. Valid values are:
conditionalLabel
- changes the label of the target control
conditionalValue
- changes the value of the target control. Valid values depend on the control type. For example a checkbox can only have "true" and "false" specified.
conditionalMinValue
- changes the minimum value of the target control
conditionalMaxValue
- changes the maximum value of the target control
The value of this directive is a JSON object that's a key-value pair. The key is the value of the conditional property on the source control,
and the value in the pair is the value to set on the target control.
The below example first defines a dropdown with 3 items. When the value is changed, it updates a checkbox's label and value.
{
"paramName": "Source",
"controlType": "Dropdown",
"label": "Source",
"list": [
"First, checked",
"Second, unchecked",
"Third, checked"
]
},
{
"paramName": "Target",
"controlType": "CheckBox",
"label": "",
"conditionalProperty": "Source",
"conditionalLabel": {
"0": "First selected",
"1": "Second selected",
"2": "Third selected"
},
"conditionalValue": {
"0": true,
"1": false,
"2": true
}
}