Tip: Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
Allow users to choose from a long text array using an autocompleting picker and prevent any choice from being picked multiple times.
The main expression uses a supporting rule, so let's create them first.
ucArrayPickerFilter
: Scans labels that match the text entered by the user and returns a DataSubset for use in the picker component.Create expression rule ucArrayPickerFilter
with the following rule inputs:
Enter the following definition for the rule:
1
2
3
4
5
6
7
8
9
10
11
12
a!localVariables(
local!matches: where(
a!forEach(
items: ri!labels,
expression: search( ri!filter, fv!item)
)
),
a!dataSubset(
data: index( ri!labels, local!matches),
identifiers: index( ri!identifiers, local!matches)
)
)
Now that we've created the supporting rule, let's move on to the main expression.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
a!localVariables(
local!pickedStates,
local!stateLabels: { "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming" },
local!stateAbbreviations: { "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY" },
{
a!pickerFieldCustom(
label: "States",
instructions: "Select up to three desired office locations",
maxSelections: 3,
/*
* To use with your data, replace local!stateLabels with the datapoint you wish to be displayed and
* local!stateAbbreviations with the datapoint you eventually want to save.
*/
suggestFunction: rule!ucArrayPickerFilter(filter: _, labels: local!stateLabels, identifiers: local!stateAbbreviations),
selectedLabels: a!forEach(
items: local!pickedStates,
expression: index(local!stateLabels, wherecontains(fv!item, local!stateAbbreviations))
),
value: local!pickedStates,
/* The union() function allows duplicate states to be ignored, returning only unique elements.*/
saveInto: a!save(local!pickedStates, union(save!value, save!value))
)
}
)
maxSelections
configuration, once you select three states you must remove at least one of them before selecting another one.Configure an Array Picker that Ignores Duplicates