Multiple Dropdown Sort by Selected Values?

TomWould 6 months ago

Hello,

I have a multiple dropdown where sometimes so many values are selected that it is hard to find them in the list. Is it possible to have a multiple dropdown sort by the values that are selected?

For example, in the below screen shot you can see all of the selected values highlighted in blue. Is it possible to have the dropdown sort by showing the highlighted/selected values at the top of the dropdown list? This would make it easier to remove values that we need to when editing/updating. Thanks in advance!

Discussion posts and replies are publicly visible

Top Replies

Stefan Helzle 6 months ago +1
Certified Lead Developer

You can show the values in any way you want. But it might be a weird experience for the user when the just clicked value is moved in the list. I think that consistent ordering is important. Seems like…

Parents

0 Hamsadhwani Esakki

Certified Senior Developer

6 months ago

As Stefan Suggested, we should consider using a picker field. But if it necessarily has to be a multiple dropdown, Try the code below by converting the data to a data subset to sort and then displaying it.

a!localVariables(
  local!selectedValues,
  local!data: a!forEach(
    items: {
      "Choice 1",
      "Choice 2",
      "Choice 3",
      "Choice 4",
      "Choice 5",
      "Choice 6",
      "Choice 7",
      "Choice 8",
      "Choice 9",
      "Choice 10"
    },
    expression: a!map(label: fv!item, value: fv!index, sort: 0)
  ),
  local!map: todatasubset(
    local!data,
    a!pagingInfo(
      startIndex: 1,
      batchSize: 10,
      sort: {
        a!sortInfo(field: "sort", ascending: false),
        a!sortInfo(field: "value", ascending: true)
      }
    )
  ),
  {
    a!multipleDropdownField(
      choiceLabels: property(local!map.data, "label", null),
      choiceValues: property(local!map.data, "value", null),
      label: "Multiple Dropdown",
      labelPosition: "ABOVE",
      value: local!selectedValues,
      saveInto: {
        local!selectedValues,
        if(
          not(a!isNullOrEmpty(value: local!selectedValues)),
          {
            a!save(
              local!data,
              a!forEach(
                local!data,
                if(
                  contains(
                    local!selectedValues,
                    property(fv!item, "value", null)
                  ),
                  a!update(data: fv!item, index: "sort", value: 1),
                  a!update(data: fv!item, index: "sort", value: 0)
                )
              )
            )
          },
          {}
        )
      },
      searchDisplay: "AUTO",
      validations: {}
    )
  }
)

Reply

0 Hamsadhwani Esakki

Certified Senior Developer

6 months ago

a!localVariables(
  local!selectedValues,
  local!data: a!forEach(
    items: {
      "Choice 1",
      "Choice 2",
      "Choice 3",
      "Choice 4",
      "Choice 5",
      "Choice 6",
      "Choice 7",
      "Choice 8",
      "Choice 9",
      "Choice 10"
    },
    expression: a!map(label: fv!item, value: fv!index, sort: 0)
  ),
  local!map: todatasubset(
    local!data,
    a!pagingInfo(
      startIndex: 1,
      batchSize: 10,
      sort: {
        a!sortInfo(field: "sort", ascending: false),
        a!sortInfo(field: "value", ascending: true)
      }
    )
  ),
  {
    a!multipleDropdownField(
      choiceLabels: property(local!map.data, "label", null),
      choiceValues: property(local!map.data, "value", null),
      label: "Multiple Dropdown",
      labelPosition: "ABOVE",
      value: local!selectedValues,
      saveInto: {
        local!selectedValues,
        if(
          not(a!isNullOrEmpty(value: local!selectedValues)),
          {
            a!save(
              local!data,
              a!forEach(
                local!data,
                if(
                  contains(
                    local!selectedValues,
                    property(fv!item, "value", null)
                  ),
                  a!update(data: fv!item, index: "sort", value: 1),
                  a!update(data: fv!item, index: "sort", value: 0)
                )
              )
            )
          },
          {}
        )
      },
      searchDisplay: "AUTO",
      validations: {}
    )
  }
)

Children

No Data