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|center Link to Working Example Link to working example Sample Code Sample Model for Queue Manager: <xf:model> <xf:instance id="save-data" xmlns=""> <queue> <item> <id>1</id> <title>Item One Title</title> </item> <item> <id>2</id> <title>Item Two Title</title> </item> <item> <id>3</id> <title>Item Three Title</title> </item> <item> <id>4</id> <title>Item Four Title</title> </item> <item> <id>5</id> <title>Item Five Title</title> </item> </queue> </xf:instance> <xf:instance xmlns="" id="views"> <data> <delete-topic-trigger/> <tmp/> </data> </xf:instance> <xf:bind id="delete-topic-trigger" nodeset="instance('views')/delete-topic-trigger" relevant="instance('save-data')/item[2]"/> </xf:model> Sample XForms Body Code <xf:repeat nodeset="instance('save-data')/item" id="id-repeat"> <div class="row1"> <span class="row"> <xf:output ref="title" class="title"/> </span> <xf:input ref="id" class="id"/> <xf:trigger> <xf:label><img src="images/up.png" alt="Move Up" height="23" width="23"></img></xf:label> <xf:action ev:event="DOMActivate"> <xf:setvalue ref="instance('views')/tmp" value="index('id-repeat')"/> <xf:insert origin="instance('save-data')/item[index('id-repeat')]" nodeset="instance('save-data')/item" at="index('id-repeat')-1" position="before"/> <xf:delete nodeset="instance('save-data')/item[instance('views')/tmp +1]"/> </xf:action> </xf:trigger> <xf:trigger> <xf:label><img src="images/down.png" alt="Move Down" height="23" width="23"></img></xf:label> <xf:action ev:event="DOMActivate"> <xf:setvalue ref="instance('views')/tmp" value="index('id-repeat')"/> <xf:insert origin="instance('save-data')/item[index('id-repeat')]" nodeset="instance('save-data')/item" at="index('id-repeat') +1"/> <xf:delete nodeset="instance('save-data')/item[instance('views')/tmp]"/> </xf:action> </xf:trigger> <xf:trigger> <xf:label><img src="images/top.png" alt="Move to Top" height="23" width="23"></img></xf:label> <xf:action ev:event="DOMActivate"> <xf:setvalue ref="instance('views')/tmp" value="index('id-repeat')"/> <xf:insert origin="instance('save-data')/item[index('id-repeat')]" nodeset="instance('save-data')/item[1]" at="1" position="before"/> <xf:delete nodeset="instance('save-data')/item[instance('views')/tmp + 1]"/> </xf:action> </xf:trigger> <xf:trigger bind="delete-topic-trigger"> <xf:label>Delete</xf:label> <xf:delete nodeset="instance('save-data')/item[index('id-repeat')]" ev:event="DOMActivate"/> </xf:trigger> </div> </xf:repeat> 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. none Moving_Items_Between_Lists