Custom Picker Component

Custom Picker

Function: a!pickerFieldCustom()

Displays an autocompleting input for the selection of one or more items from an arbitrary data set.

See Also: DataSubset, Interface Recipe: Configure an Array Picker, Interface Recipe: Configure an Array Picker that Ignores Duplicates, Interface Recipe: Configure an Array Picker with a Show All Option


Name Keyword Type Description
Label label Text Optional text to display as the field label to the left of the picker.
Label Position labelPosition Text Optional text to determine where the label appears. Valid values include
  • "ABOVE" (default) Displays the label above the component.
  • "ADJACENT" Displays the label to the left of the component.
  • "COLLAPSED" Hides the label. The label will still be read by screen readers; see accessibility considerations for more information.
  • "JUSTIFIED" Aligns the label alongside the component starting at the edge of the page.
Instructions instructions Text Optional text displayed below the picker.
Help Tooltip helpTooltip Text Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is "COLLAPSED".
Placeholder placeholder Text Optional text to display in the field when it is empty. Does not show if the field is read only.
Max Selections maxSelections Integer Once this number of selections has been reached, further selections are blocked until a selection is removed.
Suggestion Function suggestFunction Any Type A reference to a rule or function that populates the suggestion pane by taking a single Text parameter and returning a DataSubset:
  • The data of the DataSubset will be displayed as text in the suggestion pane.
  • The identifiers of the DataSubset define what is saved when an item is selected.
Selected Labels selectedLabels Text Array Labels describing each of the currently selected items.
Selected Tooltips selectedTooltips Text Array Tooltips describing each of the currently selected items.
Selected Links selectedLinks Array of Links Links relating to each of the currently selected items. Create links with
Selected Values value Any Type Value array containing the identifiers of the selected items. The identifiers field of the DataSubset returned by the suggestFunction is used to update the value.
Save Selection To saveInto Save Array One or more variables that are updated with the array of selected identifiers when the user adds or removes an item. Use a!save() to save a modified or alternative value to a variable.
Required required Boolean Determines if a value is required to submit the form. Default is false.
Required Message requiredMessage Text Custom message to be displayed when the field's value is required and not provided.
Disabled disabled Boolean Determines if the user is prevented from changing the value. Default is false.
Validations validations Text Array Validation errors to be displayed below the field when the value is not null.
Validation Group validationGroup Text When present, this field is only validated when a button in the same validation group is clicked.
Visibility showWhen Boolean Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.


  • When a user types in the picker's text box, the text they type is passed to the Suggestion Function. The returned DataSubset must have a Text array as data. Each item in that array is a selectable suggestion in the pane. If a suggestion is picked, the component's value is updated with the object at the same index of the DataSubset's identifiers array (in addition to any existing selected identifiers).
  • Selected Labels, Selected Values, Selected Links, and Selected Tooltips must all be the same length.
  • Whether placeholder text clears on focus or input varies by device and browser.
Open in Github

On This Page