Home You are viewing an offline copy of Help Table of Contents

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