Tags in select box, or Chips/badges with input

repeater-widget

#1

I’m trying to prototype a chip input (select box with multiple choice), smth. like this.

I used two repeaters: one for list (droplist would be preferable) and second for tags/chips that appear in the input to show selected options. For the tag repeater I adjust row width based on content - moving forward with @josephxbrick’s idea for adjustable row height (thanks a lot!)

What I can NOT cope with is “tag removal feature”. Unchecking an option in list works well, however clicking on a close icon removes tag from input, but doesn’t uncheck the corresponding option in list.

Live preview https://rbwujb.axshare.com

Axure file estelkhait_TagsInSelectBox.rp (75.4 KB)


#2

Hi!

Rather than adding and removing rows in the tags repeater, it’s better to treat it the same way as you do your list repeater: have all the items in the dataset from the start and filter them on the value of Item.Tagged. So basically both the checkbox in the list repeater and the X in the tags repeater behave the exact same way.

I updated your file with this approach, and changed the action of the Select all checkbox. Note that the list repeater no longer needs the tagwidth column in its dataset.

estelkhait_TagsInSelectBox.rp (83.8 KB)

[Edit] I notice that you’ll have to manage unchecking the Select All box. I’d just uncheck that whenever you uncheck any checkbox or tag.

Oh: I just noticed I was missing the Update Rows on the checkbox where it updates Tagged in the list repeater. That’s in there now. (Same link as above)


#3

Thanks @josephxbrick, you save me!

I recognised “Select/Unselect all” feature doesn’t work well, and forced it to react properly on single check/uncheck action. Here’s the final version estelkhait_TagsInSelectBox_ed3.rp (91.8 KB)

Preview https://rbwujb.axshare.com


#4

This looks great!

If your interested in optimizing it for speed, the best way to do this is to avoid updating the dataset values, which is a pretty slow operation. Instead, you can mark/unmark rows, and change your filters so that they filter on whether or not a row is marked. This is barely different from what you are doing now, but the speed improvement is great.

There is one gotcha to this approach: when you mark a row, the repeater does not redraw itself and the filters don’t run, so you have to force the repeater to redraw itself after you’ve marked rows. One way to do this is to use the command Set items per page to Unlimited on the repeater. Your items per page is already unlimited, but the repeaters will redraw anyway when it gets this command. It’s kind of a hack, but it works.

I updated your file to use this method if you are interested. Other changes:

For the select-all-items checkbox, I use the OnClick handler (of a hotspot covering the checkbox) to first toggle the checkbox and then (still in OnClick) update the repeaters based on whether the checkbox is checked or not. This is better than using OnSelected/OnUnselected of the checkbox to update the repeaters, as those events will also fire when you select/unselect the checkbox elsewhere (e.g., when you check it to indicate that all list items are selected). You only want it to update the repeaters if the user clicks on it.

I moved the logic for selecting/deselecting this select-all checkbox into OnItemLoad of the list repeater. Updating the selected-tags count is in the same place.

Here’s the updated file. You should notice a speed impovement: estelkhait_TagsInSelectBox_ed3.rp (82.9 KB)


#5

Is there away to do this so that you Add a row to the repeater that takes the text on the widget? In other words so you don’t have to seed the repeater with all the values and have them appear in the same sequence, regardless of the sequence in which you click the checkboxes.

Set text on Chip equal to '[[This.text]]"
Add rows 1 to repeater

Does this make sense?

However i’m struggling to resize the chip to accommodate the different text lengths