Skip to main content
Version: 8.1

Vision - List

Component Palette Icon:

Description

The List component displays a list of options, allowing freeform selection of the items. It is powered by a Dataset, from which it displays the first column.

Properties

PropertyDescriptionProperty TypeScriptingCategory
Background ColorThe background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.Color.backgroundAppearance
BorderThe border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.
Note: The border is unaffected by rotation.

Changed in 8.1.21
As of 8.1.21, the "Button Border" and "Other Border" options are removed.
Border.borderCommon
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.int.cursorCodeCommon
DataA dataset that The data for the list. If multiple columns exist, the first will be used.Dataset.dataData
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
FontFont of text on this component.Font.fontAppearance
Foreground ColorThe foreground color of the component. See Color Selector.Color.foregroundAppearance
Layout OrientationThis property defines the orientation of the list elements.int.layoutOrientationAppearance
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
OpaqueIf false, backgrounds are not drawn. If true, backgrounds are drawn.boolean.opaqueCommon
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityData
Row HeightAn integer specifying the row height, or -1 for automatic row height.int.rowHeightAppearance
Selected BackgroundThe color of the background for the selected cell(s).Color.selectedBackgroundAppearance
Selected Focus BorderThe border for the selected, focused cell.Border.selectedFocusBorderAppearance
Selected ForegroundThe color of the foreground for the selected cell(s). See Color Selector.Color.selectedForegroundAppearance
Selected IndexThe index of the selected cell, or -1 if none.int.selectedIndexData
Selection ModeThis mode determines if only one cell can be selected at once, or single or multiple intervals.int.selectionModeBehavior
StylesContains the component's styles.Dataset.stylesAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon
Visible Row CountAn integer specifying the preferred number of rows to display without requiring scrolling.int.visibleRowCountAppearance

Deprecated Properties

PropertyDescriptionProperty TypeScriptingCategory
Data QualityThe data quality code for any Tag bindings on this component.int.dataQualityDeprecated

Scripting

See the Vision - List Scripting Functions page for the full list of scripting functions available for this component.

Event Handlers

Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page.

Customizers

Examples

Code Snippet
# This example will create a dataset, and assign the dataset to
# the List component's Data property.
headers = ["my header"]
data = [["Thing 1"],["Thing 2"],["Thing 3"]]

dataset = system.dataset.toDataSet(headers, data)

# Assign the dataset. The path below may need to change depending on
# what component is triggering this script.
event.source.data = dataset
Code Snippet
# The following code will print the selected value to the console when called on the 'mouseClicked' event handler.
value = event.source.getSelectedValue()
print(value)
Code Snippet
# The following code uses setSelectedValues to set the selection on the component.
# Assuming the List component contains string values of either "Thing 1" or "Thing 2", both items will be selected.

# Build a Python list of things to check for in the List component
valueList = ["Thing 1", "Thing 2"]

# Locate the List component in the window, and call setSelectedValues, passing the valueList as an argument.
event.source.setSelectedValues(valueList)