XForms, Referencing Items

Motivation

You wish to associate a form with a set of items. Once an item is referenced it should not be referenced again.

For example if you have a form that edits tasks you may want to associate a specific task with one or more projects. Once a project is associated with a task you want to remove it from the candidate list of projects it can be associated with.

The way to visualize this is to imagine a set divided into two distinct subsets: selected and un-selected items. As an item moves from the un-selected item set to the selected item set it must first be added to the new set and then deleted from the old set.

Method

This example uses a combination of the repeat and the switch/case. The currently referenced items are listed in a repeat loop. A button called "Add Reference" uses the toggle function to reveal a list of unselected items. As you select an item it is added to the selected list.

Sample Program

xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xf="http://www.w3.org/2002/xforms">;

Form References
type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
body {font-family:Helvetica, sans-serif}

xmlns="" id="unreferenced-items">

1
Reference 1

2
Reference 2

3
Reference 3

7
Reference 7

8
Reference 8

9
Reference 9

xmlns="" id="referenced-items">

4
Reference 4

5
Reference 5

6
Reference 6

Demonstration of Referencing External Items in an XForms Application
class="group-label">
Currently Referenced Items:
nodeset="instance('referenced-items')/reference">
ref="reference-name"/>

id="init">

Add Reference
case="add-reference" ev:event="DOMActivate"/>

ref="my-element">
Reference Name:

id="add-reference">
Un-Referenced Items:
nodeset="instance('unreferenced-items')/reference" id="unreferenced-item-repeat">

ref="reference-name"/>
ev:event="DOMActivate">
nodeset="instance('referenced-items')/reference" at="last()" position="after"/>

ref="instance('referenced-items')/reference[last()]/reference-name"
value=" instance('unreferenced-items')/reference[index('unreferenced-item-repeat')]/reference-name "/>

ref="instance('referenced-items')/reference[last()]/reference-id"
value=" instance('unreferenced-items')/reference[index('unreferenced-item-repeat')]/reference-id "/>
nodeset="instance('unreferenced-items')/reference" at="index('unreferenced-item-repeat')"/>

Discussion

The unreferenced items are not displayed unless the user selects the "Add Reference" trigger. When the user selects the Add Reference trigger the list of currently unreferenced items is displayed.

When the user selects the trigger of an unreferenced item a new item is added to the end of the referenced items list and removed from the unreferenced items list.

This pattern can be used in many examples. For example when you create a custom report you are presented with a list of columns to display. These columns are either referenced in the display list or not referenced.

The user interface sometimes shows these lists side-by-side. This can be accomplished by adding a class to each of the groups and using CSS to display the lists side-by-side.

The one problem with this example is the inability to place the items in the correct order after they are moved to a new list. Hopefully a future version of XForms will support this.

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.