Request for multi-select bar asset/widget


#1

We use a multi-select/searchable list widget like the one seen here: http://harvesthq.github.io/chosen/ but there are no pre-set/default widgets/assets in Balsamiq that I can use that model that UI. It’s tedious to have to make my own (I can), but since it’s becoming a standard type of element, I wondered if B3 was intending to add this asset by default any time soon? Or does it exist and I somehow missed it?


#2

Hey @grebe, thanks for checking on this. We do not have a control for this built-in already. This is on our list for the future, and I have added your vote to our internal tracker.

One thing that you could do is to create the element as a symbol, and then you can easily reuse it different places. Just in case, learn more about symbols here: http://help.balsamiq.com/symbols. Thanks!


#3

Thanks for the quick reply! The symbol option works ok, but not great. The “x” of the selected option needs to be right aligned to the text each time, and so there’s a good amount of time invested to move it and resize the selected option container each time. In an ideal world, I’d just type the options I wanted selected, and the UI would be custom built to contain those words, and wrap to multiple lines (based on the width) as needed (not too different from how the table UI widget works to dynamically fit content).

Looking forward to the future with this widget!


#4

Solved this for you (sort of)

Just follow these steps

  1. Create arrow at 10 width x 10 height
  2. Type your selected option (ie. Otters)
  3. Press SPACE twice, then capital X

The nice thing about this is no need to right align (which saves you a button click when designing), and no need to worry about the text wrapping
Should look something like this

#Otters X

Here is an image of it

Some more familiar examples
The first image is with markup hidden, which shows the blue rectangle indicating a selection will be made.

This next image is after the markup is shown, which makes the button appear with a cursor next to it.

I am in the process of writing up the notes for what each symbol means and the properties and sizes that go along with them.


#5

That works as a quick hack for sure. It’s great when mockups can be more nuanced (e.g. have the “x” be grey because it’s a secondary action), but what you describe above surely is the right 80/20 in the short term!