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

Certified Associate Developer

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—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: {}
        )
      }
    )
  }
)


  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer

    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 

  • 0
    Certified Associate Developer
    in reply to Harsha Sharma

    Hi Harsha is there any alternate option through which we can achieve this functionality

  • 0
    Certified Lead Developer
    in reply to vaibhavm7394

    You can use a custom picker field. Your requirement means, that you have to parse the search string and create multiple queryFilters to find matching items.

    But, in contrast to a drop down field, a picker field cannot show all items.

  • 0
    Certified Lead Developer

    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
            )
          }
        ),
        
      }
    )