XForms/Moving Items Between Lists

Motivation
You have two lists and you would like to move selected items between the lists. This is typically known as a column chooser.

Method
The user interface will have two lists, one on the right and one on the left. Between the lists we will see two buttons; Move Left and Move Right. The user can check any number of items on the left list and press the Move Right button to move these items to the right list. The user can also add any number of items on the right list and then by pushing the Move Left button, these items would be moved to the left list.

Note that a "move" is technically two separate operations, a copy followed by a delete. But the user does not see these separate steps.

Link to Working Form
Link to Working Form

Sample XForms
The following form has three columns. One for the left list of items, one for the middle column of move buttons and one for the right list of items.

The Move buttons have two actions.
 * 1) insert a new item in the list by doing a copy of the selected item to the opposite list
 * 2) delete the selected item

Sample CSS
The "span-3" tags use the standard blueprint framework to span three columns in a 24 column page.

The other CSS tags are used below with XSLTForms. Note that the selected item on the list is white.

Discussion
The list on the right side could also be re-orderable. This is typically a use-case for a report-writing tools that allows a user to select columns from a list for a report.