Implement Smart Dropdown and Enhance Picker Field with Auto-Search and Raw Text Input Formatting Logic

Question

Currently, when users paste multiple lines of data into these fields, Appian merges everything into a single line. 
 The requirement is to improve this behavior by allowing multi-line inputs to be preserved and formatted correctly&mdash;each line should be treated as a separate entry. 
 Based on this input, the system should identify and display relevant matching data for each line, helping users quickly find and select multiple valid options. 
 
 Example if we search - "Option 1", "Option 2", "Option 3" then relevant options should be displayed in the dropdown 
 a!localVariables(
 local!selectedData,
 {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!dropdownField(
 choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4",
 "Option 5", "Option 6", "Option 7", "Option 8",
 "Option 9", "Option 10", "Option 11", "Option 12"},
 choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},
 label: "Dropdown",
 labelPosition: "ABOVE",
 placeholder: "--- Select a Value ---",
 value: local!selectedData,
 saveInto: {local!selectedData},
 searchDisplay: "ON",
 validations: {}
 )
 }
 ),
 a!columnLayout(
 contents: {}
 ),
 a!columnLayout(
 contents: {}
 )
 }
 )
 }
)

Harsha Sharma · Answer

It is not possible to change the behaviour of search field in dropdown. Users should be trained to type in options instead of pasting a text string

Shubham Aware · Answer

You can't change OOB components to search for multiple values. However, we recently used an alternative approach to meet this requirement. Have a look at it. a!localVariables(
 /* Store the raw input text */
 local!inputText: "",
 /* Parse the input into individual lines */
 local!searchTerms: if(
 isnull(local!inputText),
 {},
 a!forEach(
 items: split(local!inputText, char(10)),
 expression: trim(fv!item)
 )
 ),
 /* Sample data - replace with your actual data source */
 local!allOptions: {
 a!map(id: 1, label: "Option 1", value: "OPT1"),
 a!map(id: 2, label: "Option 2", value: "OPT2"),
 a!map(id: 3, label: "Option 3", value: "OPT3"),
 a!map(id: 4, label: "Option 1A", value: "OPT1A"),
 a!map(id: 5, label: "Option 2B", value: "OPT2B"),
 a!map(
 id: 6,
 label: "Alternative Option 1",
 value: "ALT1"
 ),
 a!map(
 id: 7,
 label: "Alternative Option 2",
 value: "ALT2"
 ),
 a!map(
 id: 8,
 label: "Special Option 3",
 value: "SPEC3"
 )
 },
 /* Store selected values */
 local!selectedValues: {},
 /* Find matches for all search terms */
 local!matchedOptions: a!flatten(
 a!forEach(
 items: local!searchTerms,
 expression: if(
 len(trim(fv!item)) > 0,
 index(
 local!allOptions,
 wherecontains(
 lower(trim(fv!item)),
 lower(local!allOptions.label)
 ),
 {}
 ),
 {}
 )
 )
 ),
 /* Remove duplicates from matched options */
 local!uniqueMatchedOptions: a!forEach(
 items: union(
 index(local!matchedOptions, "id", {}),
 index(local!matchedOptions, "id", {})
 ),
 expression: index(
 local!allOptions,
 wherecontains(fv!item, tointeger(local!allOptions.id)),
 {}
 )[1]
 ),
 {
 a!sectionLayout(
 label: "Multi-line Search Input",
 contents: {
 /* Multi-line input field */
 a!paragraphField(
 label: "Paste or type search terms (one per line)",
 labelPosition: "ABOVE",
 value: local!inputText,
 saveInto: local!inputText,
 placeholder: "Option 1" & char(10) & "Option 2" & char(10) & "Option 3",
 height: "MEDIUM",
 helpTooltip: "Paste multiple lines of text. Each line will be treated as a separate search term."
 ),
 /* Display parsed search terms */
 a!richTextDisplayField(
 label: "Detected Search Terms",
 value: if(
 length(local!searchTerms) > 0,
 a!richTextItem(
 text: "Searching for: " & joinarray(local!searchTerms, ", "),
 style: "EMPHASIS",
 color: "ACCENT"
 ),
 a!richTextItem(
 text: "No search terms detected",
 color: "SECONDARY"
 )
 ),
 showWhen: len(local!inputText) > 0
 ),
 /* Multi-select dropdown with matched options */
 a!multipleDropdownField(
 label: "Select from Matched Options",
 labelPosition: "ABOVE",
 placeholder: if(
 length(local!uniqueMatchedOptions) = 0,
 "No matches found",
 "Select options..."
 ),
 choiceLabels: index(local!uniqueMatchedOptions, "label", {}),
 choiceValues: index(local!uniqueMatchedOptions, "value", {}),
 value: local!selectedValues,
 saveInto: local!selectedValues,
 disabled: length(local!uniqueMatchedOptions) = 0,
 helpTooltip: "Shows all options matching your search terms"
 ),
 /* Alternative: Checkbox layout for better visibility */
 a!checkboxField(
 label: "Or select using checkboxes",
 labelPosition: "ABOVE",
 choiceLabels: local!uniqueMatchedOptions.label,
 choiceValues: local!uniqueMatchedOptions.value,
 value: local!selectedValues,
 saveInto: local!selectedValues,
 choiceLayout: "STACKED",
 showWhen: length(local!uniqueMatchedOptions) > 0
 ),
 /* Display selected values */
 a!richTextDisplayField(
 label: "Selected Values",
 value: if(
 length(local!selectedValues) > 0,
 {
 a!richTextItem(text: "Selected: ", style: "STRONG"),
 a!richTextItem(
 text: joinarray(local!selectedValues, ", ")
 )
 },
 a!richTextItem(
 text: "No options selected",
 color: "SECONDARY"
 )
 ),
 showWhen: true
 )
 }
 ),
 
 }
)