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.

Sample Screen Image

Screen Image of Moving Items Between Lists (Image: Dmccreary, CC BY-SA 3.0)

Link to Working Form

Link to Working Form

Sample List Instances

Item One
Item Two
Item Three
Item Four
Item Five

Item Six
Item Seven
Item Eight
Item Nine
Item Ten

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.

• insert a new item in the list by doing a copy of the selected item to the opposite list
• delete the selected item

class="left span-3">
Left
nodeset="instance('save-data')/left-list/item" id="left-repeat">
ref="."/>

value="index('left-repeat')">
Left Index:

class="middle span-3">

Move Right
ev:event="DOMActivate">
nodeset="instance('save-data')/right-list/item"
origin="instance('save-data')/left-list/item[index('left-repeat')]"
at="last()" position="after" />
nodeset="instance('save-data')/left-list/item[index('left-repeat')]" />

Move Left
ev:event="DOMActivate">
nodeset="instance('save-data')/left-list/item"
origin="instance('save-data')/right-list/item[index('right-repeat')]"
at="last()" position="after" />
nodeset="instance('save-data')/right-list/item[index('right-repeat')]" />

class="right span-3">
Right
nodeset="instance('save-data')/right-list/item" id="right-repeat">
ref="."/>

value="index('right-repeat')">
Right Index:

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.

@namespace xf url("http://www.w3.org/2002/xforms");
.left, .middle, .right {border: solid gray 1px; background-color: lavender;}
.xforms-repeat-item-selected {color: blue; background-color: 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.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.