Perspective Dropdown Multi Select

Ignition
,
1

I have dropdown configured for the a days of week selection in a table.

The user experience is not great, as there is not enough space to show all the pills selected. See below:
image

All weekdays are actually selected in the bottom example, but there’s no way to see that.

I’ve seen other dropdown multi selection elsewhere that solves this problem as follows:
image

Is there a way to solve this in Perspective, or is it feature request time?

1 Like
2

There is no “solution” because it’s all a matter of how much space each option takes up versus how much space you’ve allocated for the component.

We can only give you the tools, but deciding how and when to use them is the tricky part. For this Dropdown example specifically, you could span multiple columns, or make the Dropdown taller. That’s it - those are the solutions. Your example from another location will stop working the moment a user selects one more option.

An alternative is to move away from the Dropdown with some custom complicated UI.

  1. Create a session property (array), and add an object entry for each option you need, where the object contains the option text and a boolean variable which reflects the selection status.
  2. Create a new (small) View which will act as your custom dropdown option selection, most likely containing checkboxes for each option.
  3. Instead of a Dropdown, now you just supply an Icon which opens your View, and the icon should be accompanied by a Label which reflects the current selection status.
3

I thought I might have to build something.

Regarding the other example: that solution actually works quite well as you can still access all the selected options as they remain the in scrollable dropdown list. The 3 selected options do fill up the collapsed box, but you can still see the rest if you expand (and potentially scroll).

In Perspective, the selected items are removed from the list and are seems to be only visible as the pills. When that area runs out, I don’t know which are already selected.

If the selected pills remained in the list the list, decorated with a selected state (grey pill?), it would work perfectly

1 Like
4

Oh, so you’d prefer the options remain in the dropdown list? I would prefer that too, but it would break a feature we’re working on right now. You could always throw it on the ideas site.

5

Yes, either stay in the list or move to some selected area at the top?

I’m open to anything that works for a scalable number of selected items. Right now I can’t see which days are selected, and I cannot remove an option that is not visible.

Hey, this can be painted as a bug. Cannot remove selected when selected items exceed available space :thinking:

6

We actually opened that as a bug in the past, which is why there is now a wrapMultiSelectValues property available. We determined there was no good solution because there could be hundreds of options in the dropdown and an unknown amount of space (paraphrasing IGN-3413, along with my own memories of automated testing encountering this). That prop was - and still is - considered the best option.

7

Another option for you to consider:
You could put a label next to it showing the values chosen:
image
I bound the label text to the value prop of the dropdown and used this script transform:
return "Chosen Vals: " + ", ".join(value) + "."

8

Or use what mentioned @Daniel.Snyder and display in the dropdown tooltip.

2 Likes
9

Displaying the values in either a tooltip or in a label next to the dropdown does not address the problem adequately.

It does not scale beyond the space you allow in the label next to it or the tooltip (you might have a massive tooltip)

It also does not allow you to edit the selected values in the dropdown as you cannot actually get to them.

I still believe that the checked dropdown addresses all of these. Scroll down in the drop down options list to see all the available options. The same list shows you if it is selected or not and allows you to select or deselect. This works regardless of the number of options or selected items.

3 Likes
10

I agree, I also had to resort to non-ideal workarounds for arbitrary size multi-select dropdowns.

Now I'm curious what that feature is/was !

1 Like
11

I hacked together a very rough multi-select dropdown that looks like the screenshot from the first post. It can be improved in a lot of places, but I don't have time to track bugs, polish it or improve it in any way right now. It should get you started though.

There's a "test" view to showcase it.
multi_dd.zip (18.9 KB)

NOTE: There's a stylesheet and a library script. Be careful not to override your own stuff if you import it in a project that already has things in it.

image