Moving selected list box options between two list boxes

#1

Hi all,

I’m trying to create a very common list box multi-section control in axure. See picture below:

48%20AM
Screen Shot 2020-05-18 at 11.28.48 AM.png1902×342 65.2 KB

Desired interactions when selecting elements from the right hand side list box

  • Second button to become active
  • Count updates to reflect numbers of elements selected
  • When the button is clicked (to move items from right-to-left), have all selections removed from right and added to the left list box

Additional (but not necessary for the prototype)

  • A way to revert or move them back to the right (basically revert the process, or create a “move all” action)

Is this possible in axure? I’ve been at it for a couple of days and I can’t figure it out! Any pointers will be highly appreciated.

Best,
-r

#2

I can help you with this but not until next week -please pm me for a reminder. the solution is based on repeaters

#3

Hi Ritch,

I totally appreciate your help with this.

Quick question: can you repeat the multiselection with repeaters? a) selecting a range using the shift key ?AND b) selecting multiple while holding the command (mac) key?

Best,
-r

#4

Hi, your are welcome

Yes, the pattern is:
build the option as a repeater…
put the repeater in a master then add two instances of the master to the page to make the ‘to’ and ‘from’.
The functionality then relies in simultaneously filtering both instances with a mutually exclusive directive ie, the selected item is filtered out of the source instance and filtered into the destination instance.

If that makes seen great other wise I will send one soon.

#5

Any chance you can share your RP. I am doing the exact same thing but can’t figure out how to revoke users back.

#6

Keep in mind this thread is from 3 years ago! Expecting a reply from OPs is pretty optimistic. If you don’t get a reply with the original solution you could try attaching your file and we could move forward from there. Probably also best if you just start a new thread with your specific questions or requests.

What do you mean by “revoke users back”? Do you mean resetting the two repeaters to default, i.e., the “Exclude all >” button, or moving item(s) left to right, i.e., the “N Selected >” button, or something else?

The solution mentioned here relies on filtering both repeaters. By default, the repeater on the left would filter out everything and the repeater on the right would have no filter–thus showing everything. So, the “Exclude all >” button would simply restore this, with something like,

Add Filter
Repeater-Left add [[TargetItem.Column0 == “”]], remove other filters
Remove Filter
Repeater-Right remove all

…where the filter rule here means, "Show all rows (target items) where the datasheet column named, “Column0” are blank. As long as all valid rows are non-blank then this would hide all rows. Removing all filters from Repeater-Right would show all rows in its datasheet.

The “N Selected >” button would add a filter to the repeater on the right to match the selected items in the left repeater. You can keep track of selected items in each repeater with a column, or by marking the row when it is clicked, and also marking the corresponding row in the other repeater. Something like,

Mark Rows
Repeater-Left, this row
Repeater-Right, where [[TargetItem.Column0 == Item.Column0]]

…Then when the button is clicked, add a filter to each repeater with opposing logic, hiding marked rows on the left and showing marked rows on the right. Something like,

Add Filter
Repeater-Left add [[TargetItem.isMarked == “false”]], remove other filters
Repeater-Right add [[TargetItem.isMarked == “true”]], remove other filters

…and then unmark all rows in both repeaters. Actually, you’d probably want to keep all the visible rows in Repeater-Right marked so they would still be shown when applying the filter rule above–in other words, when the “N Selected >” button is clicked again.

Hope this makes sense! I might be forgetting or glossing over some details. Again, best if you can create a new thread and post a sample .rp file for me and/or other users here to look into and propose solutions for you.