XForms, Queue Management

Motivation

You want to manage a queue of items and be able to move items around the queue. Sample operations are move up, move down and move to top.

Screen Image

The up arrow will move the selected row up one item. The down arrow will move the selected item down one item. The triangle will move the selected item to the top of the queue.

Screen Image of Queue Manager (Image: Dmccreary, CC BY-SA 3.0)

Link to Working Example

Link to working example

Sample Code

Sample Model for Queue Manager:

id="save-data" xmlns="">

1
Item One Title

2
Item Two Title

3
Item Three Title

4
Item Four Title

5
Item Five Title

xmlns="" id="views">

id="delete-topic-trigger" nodeset="instance('views')/delete-topic-trigger"
relevant="instance('save-data')/item[2]"/>

Sample XForms Body Code

nodeset="instance('save-data')/item" id="id-repeat">
class="row1">
class="row">
ref="title" class="title"/>

ref="id" class="id"/>

src="images/up.png" alt="Move Up" height="23" width="23">
ev:event="DOMActivate">
ref="instance('views')/tmp" value="index('id-repeat')"/>
origin="instance('save-data')/item[index('id-repeat')]"
nodeset="instance('save-data')/item" at="index('id-repeat')-1" position="before"/>
nodeset="instance('save-data')/item[instance('views')/tmp +1]"/>

src="images/down.png" alt="Move Down" height="23" width="23">
ev:event="DOMActivate">
ref="instance('views')/tmp" value="index('id-repeat')"/>
origin="instance('save-data')/item[index('id-repeat')]"
nodeset="instance('save-data')/item" at="index('id-repeat') +1"/>
nodeset="instance('save-data')/item[instance('views')/tmp]"/>

src="images/top.png" alt="Move to Top" height="23" width="23">
ev:event="DOMActivate">
ref="instance('views')/tmp" value="index('id-repeat')"/>
origin="instance('save-data')/item[index('id-repeat')]" nodeset="instance('save-data')/item[1]" at="1" position="before"/>
nodeset="instance('save-data')/item[instance('views')/tmp + 1]"/>

bind="delete-topic-trigger">
Delete
nodeset="instance('save-data')/item[index('id-repeat')]" ev:event="DOMActivate"/>

Discussion

The key to this example is to understand how the insert and delete operations are used with different attributes.

The trigger that moves an item up will need to store its current location in a temporary item.

Note that the current version applies to the highlighted row, not the row that you select the button on.

Credits

This example contributed by Ann Kelly.

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.