Simple UI Reference

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
  }
}