XForms/Insert

This lab allows you to insert a new row into a tabular structure. We don't use a HTML table here, just a form that updates two items in the model.

Here is the input before you add any new data:

Program 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 insert example</title>
      <xf:model>
         <xf:instance>
            <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>
            </PhoneList>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <fieldset>
         <legend>Company Phone List</legend>
         <p>
            <b>Name, Phone</b>
            <xf:repeat id="list" nodeset="/PhoneList/Person">
               <xf:input ref="Name" />
               <xf:input ref="Phone" />
            </xf:repeat>
         </p>
      </fieldset>
      <fieldset>
         <legend>Add New Person</legend>
         <p> <!-- here is where we get the new record -->
            <xf:input ref="/PhoneList/NewPerson/Name">
               <xf:label>Name:</xf:label>
            </xf:input>
            <br />
            <xf:input ref="/PhoneList/NewPerson/Phone">
               <xf:label>Phone:</xf:label>
            </xf:input>
            <xf:trigger>
               <xf:label>Insert After Selected Row</xf:label>
               <xf:action ev:event="DOMActivate">
                  <xf:insert nodeset="/PhoneList/Person" at="index('list')" position="after" />
                  <xf:setvalue ref="/PhoneList/Person[index('list')]/Name" value="/PhoneList/NewPerson/Name" />
                  <xf:setvalue ref="/PhoneList/Person[index('list')]/Phone" value="/PhoneList/NewPerson/Phone" />
               </xf:action>
            </xf:trigger>
         </p>
      </fieldset>
   </body>
</html>

Discussion

This program has a model of the existing phone list and one additional NewPerson data element at the end of the list. The new person data is linked to the two field form at the end of the table. When you hit the insert button (the trigger) it will copy the data elements from the mini-form and copy them into a new location inside the existing model. The entire list will then be updated. The exact location of where the insert occurs is determined by the index() function. The index is the number of the row you last selected.

There are two items to note. First of all, you can select any row just before you do an insert. The new item will be inserted just after this row.

The second thing to note is that you will still need to be able to delete a record. That is the next lab.

Next Page: Insert with Origin | Previous Page: Inline Repeats
Home: XForms