Moving items to one column and back to the original column

newbie-question

#1

I have a question about a file I’m building. Has anybody designed a better way to add users to a list, rather than this option?

Any better options?
https://ndgdcs.axshare.com/#g=1&p=home
Move feature.rp
(61.4 KB)


#2

@PaulOlson,

Here is a solution for what I think you want. (I got a little confused by your DM earlier…)
I’ve made some assumptions about your “requirements”:

  • Clicking any item in Available Options list selects it, showing white-on-blue.
  • Clicking “Add >>” copies selected item from Available Options to Selected Options, and removes it from Available Options (thus a “virtual move” from one list to the other.)
  • Only one item may be selected at a time (not sure why, but this is how your proto behaves.)
  • Clicking any item in Selected Options list selects it, showing white-on-blue.
    • Clicking “<< Remove” copies selected item from Selected Options to Available Options, and removes it from Selected Options.

You’ve set up your prototype with a Menu widget to serve as the Available Options list, and this is placed on a List Box widget, maybe to make it look like a list box but you don’t want to use an actual list box for some reason? Then you’ve set up the Selected Option list as three Text Field widgets. A few problems with that approach: There is no reason to utilize the main features of a menu or text field, nor are you doing so ; I see no reason to use a different type of widget in the two lists–they should look and behave consistently; and most importantly, both those widget types are very limited in terms of interaction code, supported events, styling, etc;

The “gold standard” in Axure for flexible lists is the Repeater widget. They are certainly more advanced, can be tricky to set up and use, but in my opinion well worth the time to learn them. There are lots of demonstrations and answered questions in the forum here. All that said, I didn’t find one to quite fit your need (surprising, as this is a fairly common albeit dated pattern) …and I learned a little something in creating my solution.

So, here were my thoughts for setting up this thing. The Selected Options list (repeater widget named “Source”) can only contain items from the Available Options list (repeater option named “Destination”), so if both repeater datasets are the same (the set of possible items in each list) then a set of filters can show/hide specific items in each list. Specifically, when Destination is filtered to show “Option 1” then Source should be filtered to hide “Option 1”, and visa-versa. The Add button would just need to apply a filter, and the Remove button would remove that filter.

So, clicking an item in Source will select it and mark its row. It also marks the matching row in Destination. Clicking the same item again will unselect it and unmark those rows, such that clicking an item toggles its selection and marked status. Clicking the Add button will add a filter to show all marked rows in Destination and show only unmarked rows in Source. That accomplishes the “list move” action.

So the scheme here is that marked rows get hidden in Source and shown in Destination.

When a list item is clicked in Destination, it selects itself and unmarks its row and the matching row in Source. Likewise, clicking again unselects itself and marks these rows (so, it does the opposite of clicking an item in Source.)

It turns out that clicking the Remove button simply needs to reapply the existing filters, because if an item is selected in Destination, the appropriate rows are already unmarked and marked. To do this I employ a little trick that basically tells each repeater to refresh itself. The interaction code removes “none” filters from both repeaters. This code looks like it does nothing because it literally means, “remove no filters” --but it results in the repeater “being touched” and fires its OnItemLoad event, thus in effect reapplying the same filters.

See the Repeaters Solution page in this updated .rp file below. I also added a version that supports selecting multiple options (which seems logical given there is a separate Add button.) And, because it looked like you might want to support a scrollable list, I show a version with longer lists which can be scrolled within each box area.

Move feature.rp (151.3 KB)


#3

mbc66,

WOW, you set the bar very high. I cant tell you how much this exceeds my expectations, I have used repeaters in the past but now has opened my eyes. This will help in my explorations with the rest of the design.

If i have any questions, I’ll be sure to reach out! Hope your safe and healthy!
Paul


#4

hi @mbc66
Is there any solution to access selected item in ListBox???
I don’t want to use repeater :frowning_face:


#5

Not clear what you mean exactly by “access” …get, set, both? The OP wanted to dynamically change the items in a ListBox (setting as well as getting), which Axure does not support. If you need to do something like that, a repeater is the best solution. You could also manually build and control a list of rectangle widgets, but then you’d need to manually create the functionality that a repeater provides, and be limited to a set number of options.

For basic ListBox behavior, you can use the Selection Changed event to get the currently selected item when the selection changes. If you need to get the default selected item (e.g., at page load) you can either

  • Set this up by matching the default selection item in your file (e.g., assign the same text value to a widget or global variable)

or

  • Don’t set a default in the ListBox, but instead assign it with that widget’s Loaded event, combined with the Selection Changed event.

Here is a quick demo showing how to get the currently selected item, and set one item. Note this doesn’t support multiple selected items, like a repeater can.

ListBox Demo.rp (52.6 KB)