XForms/Delete

Deleting an item from a list

Here is a sample program to delete an item from a list of items. The selected item can be deleted by selecting the row you wish to delete and selecting the "Delete" button. This trigger has the following format:

<xf:trigger>
  <xf:label>Delete</xf:label>
    <xf:action ev:event="DOMActivate">
        <xf:delete ref="//Person[index('person-repeat')]"/>
     </xf:action>
</xf:trigger>

There are two attributes to the delete element. The nodeset indicates what set of nodes you select the item from and the at indicates the node number. We used the index function to get the number of the selected node.

Screen Image

The form has a list of people. You can add and delete to the selected row.

Sample Program

XForms code

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>XForms Delete Example</title>
	<link rel="stylesheet" type="text/css" href="delete2.css" />
      <xf:model>
         <xf:instance id="people">
            <PhoneList xmlns="">
               <Person>
                  <Name>Peggy</Name>
                  <Phone>123</Phone>
               </Person>
               <Person>
                  <Name>Dan</Name>
                  <Phone>456</Phone>
               </Person>
               <Person>
                  <Name>John</Name>
                  <Phone>789</Phone>
               </Person>
               <Person>
                  <Name>Sue</Name>
                  <Phone>234</Phone>
               </Person>
               <NewPerson>
                  <Name />
                  <Phone />
               </NewPerson>
               <SelectedRow />
            </PhoneList>
         </xf:instance>
     </xf:model>
   </head>
   <body>
      <xf:group nodeset="/PhoneList">
        <fieldset>
           <legend>Company Phone List</legend>
           <!-- this lists all the people -->
           <xf:repeat id="person-repeat" ref="Person">
              <xf:input ref="Name" />
              <xf:input ref="Phone" />
           </xf:repeat>
        </fieldset>
        <xf:trigger>
         <legend>Add Row</legend>
            <xf:action ev:event="DOMActivate">
               <xf:insert nodeset="Person" at="index('person-repeat')" position="after" />
               <xf:setvalue ref="Person[index('person-repeat')]/Name"
                            value="/PhoneList/NewPerson/Name" />
               <xf:setvalue ref="Person[index('person-repeat')]/Phone"       
                            value="/PhoneList/NewPerson/Phone" />
            </xf:action>
         </xf:trigger>
      <xf:trigger>
         <xf:label>Delete Selected Row</xf:label>
         <xf:action ev:event="DOMActivate">
            <xf:delete ref="instance('people')//Person[index('person-repeat')]"/>
         </xf:action>
      </xf:trigger>
	<br />
      <xf:output value="index('person-repeat')">
         <xf:label>Selected Row= </xf:label>
      </xf:output>
      </xf:group>
   </body>
</html>

CSS stylesheet

* {
	font-family: Arial, Helvetica, sans-serif;
}
label, legend {
  	font-weight: bold;
}
contextcontainer {
	display: table-row;
}
input {
	display: table-cell;
	color: white;
	background-color: gray;
}
/* Display for the selected line */
.xf-repeat-index input {
   color: black;
   background-color: white;
}

Discussion

Note that you can still select a row and insert a new record after it. But you can also select any row and now delete it.

To keep this example simple the header of table columns have been forgotten (see Repeat into table how the table should behave).

The code for the selected line should be:

*::repeat-index input {
   color: black;
   background-color: white;
}

but this doesn't work with Firefox 2.0.0.14 + Mozilla XForms 0.8.5

To Do

Figure out how to modify the style sheet so that the selected row is hilighted. The XForms documentation implies that ::value is the active areas, ::repeat-item is a single item from a list of repeating sequence and that ::repeat-index is the current item of a repeating sequence

These do not appear to work with the style sheet under FireFox 0.6.

Potential problem: when you have deleted all the nodes, the insert trigger does not work anymore. This is because the nodeset selection on the insert element is empty in that situation. If the nodeset selector is empty, the insert trigger has no meaning (see the first rule in 'rules for insert processing')

Next Page: Disable Trigger | Previous Page: Insert with Origin
Home: XForms