Building chips in Axure

rp-7
newbie-question

#1

Hi everyone,

This is a complex design solution that I’m not sure how to begin begin building in Axure. Basically it would combine the functionality of a drop down menu with the functionality of email-like chips. Semantic-UI has a pattern you can view here under Multiple Search Selection: Dropdown | Semantic UI. I also uploaded a video here: https://youtu.be/sSrw_z4WR2I

Any thoughts? Where do I begin? Thanks in advance!


#2

Just to prove that I am not just looking for someone to do it for me, here’s a super rough and lo-fi example of what I’m driving toward: Untitled Document


#3

Hi rmstinson,

If you’re looking to keep your prototype from getting complicated, then using the hide/show method that you have in your sample is a good way to simulate the behavior without making the prototype too complex. An alternative would be to use a repeater to make your list of “chips” that get added from the dropdown. You would have the clicks on your dropdown items add a row to a repeater and have the text on the clicked widget be what gets added to the new repeater item. Repeaters can have rows added and removed, and you can limit how many items display per row. The catch is that widgets do not autofit to text in the browser, so if you have text of varying lengths then the widget in the repeater would not match the width of your widget text.


#4

Hi!

There are various tricks you can do with repeaters to get them to change their default behavior. This one involves offsetting each row horizontally and vertically from where Axure expects it to be, which for a horizontal repeater is x=(row number - 1) times the authored row width, and y=0. (You have to turn the repeater property “Fit to Content in HTML” off.)

It allows for chips of various widths, though you have to specify the chip width manually in the Add Row command; there is no way to get the pixel length of a string without a javascript call, which has timing issue since the call is synchronous.

It automatically wraps to the next line when you run out of horizontal room (specified the by the width of the containing dynamic panel - here colored pink), so you’re not stuck with a fixed number of chips per row as you would be if you specified items-per row-for the repeater.

Live sample

File: wrapping repeater.rp (82.8 KB)
wrapping repeater.rp (91.6 KB)


Tag input field
Repeater Widget resize depending on text length
#5

Oh my god, thank you so much! I’m new to repeaters so I never would have figured this out on my own! I was searching for an answer to this problem and actually stumbled upon my own forum asking this question. I had forgotten I asked already!

Thanks again!


Multi select dropdown
#6

Hello,

I am designing a similar search summary functionality and I have approached it too with repeaters.
When a filter is selected, a new “chip” is added as a new element of the repeater and it’s content is derived from the text of the filter widget which was clicked in the first place.

I have a small problem though.
The label of the filter widget contains a name and a numerical value (ex. Italy 1276), but I would like to avoid the numerical value to be added to the filter chip too.

Chip looking like, “Italy X” not like “Italy 1276 X”

Ideally, I would like to avoid having to specify the value of the widget text manually and instead reference to it while removing part of its text.
This would also give me more flexibility when trying to remove the chip based on a text match.

Hope I have explained my issue correctly.

Thanks!


#7

I think the cleanest way might be to use substring and lastIndexOf to get the text you want (assuming that your numbers are always at the end of the string seperated by a space):

[[LVAR1.substring(0,LVAR1.lastIndexOf(’ '))]]

Quick sample rp file attached.

You could also do some fancy stuff with regex, but I’m going to assume you’d like to stick with a simple native axure solution.

sample substring and lastindex of.rp (53.7 KB)


#8

Thanks a lot for your reply!

I was able to make it work, though I had to find a way to cater for line breaks within the function.


closed #9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.