Last modified on 28 July 2011, at 18:16

XForms/Queue Management

MotivationEdit

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 ImageEdit

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 ExampleEdit

Link to working example

Sample CodeEdit

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 CodeEdit

<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>

DiscussionEdit

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.

CreditsEdit

This example contributed by Ann Kelly.

Next Page: none | Previous Page: Moving_Items_Between_Lists

Home: XForms