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:

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

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">;

XForms Delete Example
rel="stylesheet" type="text/css" href="delete2.css" />

id="people">
xmlns="">

Peggy
123

Dan
456

John
789

Sue
234

/>
/>

/>

nodeset="/PhoneList">

Company Phone List

id="person-repeat" ref="Person">
ref="Name" />
ref="Phone" />

Add Row
ev:event="DOMActivate">
nodeset="Person" at="index('person-repeat')" position="after" />
ref="Person[index('person-repeat')]/Name"
value="/PhoneList/NewPerson/Name" />
ref="Person[index('person-repeat')]/Phone"
value="/PhoneList/NewPerson/Phone" />

Delete Selected Row
ev:event="DOMActivate">
ref="instance('people')//Person[index('person-repeat')]"/>

/>
value="index('person-repeat')">
Selected Row=

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

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.