Xforms: a user-friendly multiple choice list

Xforms offers 2 renderings for multiple choice lists:

• the classic list which allows you to select several items via Ctrl + click,
• a series of checkboxes that allow you to check several values.

<xf:select ref= »… »>
…
</xf:select>

The classic multiple choice list has some advantages:

• compactness,
• allows you to take advantage of the functionalities that browsers offer on the lites (search for an element by typing, ...).

And many disadvantages:

• if the list is long, the readability is abysmal,
• the user is often not comfortable with the Ctrl + click (what could be more annoying than having chosen 3 values and releasing Ctrl before clicking on the 4th...),
• the rendering is often not fluid within a form (ugly even!).

<xf:select ref= »… » appearance= »full »>
…
</xf:select>

The series of checkboxes corrects a number of these drawbacks:

• instant view of all possible choices,
• extreme simplicity, the user ticks, can easily go back to the selection made, ...

But it comes with new drawbacks:

• the main one: unusable on long lists, beyond a dozen values the space taken is too important,
• no search for an item by typing.

A solution, admittedly more complex to implement than a simple select, provides a good compromise between these two solutions: the repetition of simple lists:

• The user is provided with a simple list by default to choose a single value,
• if he wants to add a 2nd value, a + button allows to add a list,
• a - button to remove a list and its value.

Almost all the advantages of the previous solutions are combined:

• very simple and intuitive to use,
• search for an item by typing / browser functionality on lists,
• compactness,
• and a big technical advantage, the XML link is different: the select feeds a single element/attribute, the values being separated by spaces, whereas with this solution an element is created for each value, which is much easier to index in an XML database

The disadvantages are:

• no immediate visibility of all choices,
• longer development time (to be developed once as a template and copied to this site!).

Let's finally get to the code!

<xf:repeat nodeset= »valeur_liste »>
    <xf:select1 ref= »@valeur »>
      <xf:itemset nodeset= »… »>
        <xf:label>
            …
        </xf:label>
        <xf:value ref= »@valeur » />
      </xf:itemset>
    </xf:select1>
    <xf:trigger appearance= »minimal » ref= ».[count(../jq:valeur_liste) &gt; 1] »>
      <xf:action ev:event= »DOMActivate » if= »count(../jq:valeur_liste)&gt;1″>
        <xf:delete nodeset= »current() » />
      </xf:action>
    </xf:trigger>
</xf:repeat>
<xf:trigger appearance= »minimal »>
  <xf:label appearance= »minimal »>
    …
  </xf:label>
  <xf:action ev:event= »DOMActivate »>
    <xf:insert nodeset= »jq:valeur_liste » at= »last() » position= »after » />
    <xf:setvalue ref= »jq:valeur_liste[last()]/@valeur » /> <!– On copie le dernier élément qui a déjà une valeur positionnée donc on enlève cette valeur après copie –>
  </xf:action>
</xf:trigger>

This solution has been proven on several forms of varying complexity and on lists of all sizes.