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

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.