XForms Repeat Tutorial 🎯

Welcome to our comprehensive XForms Repeat tutorial! In this guide, we'll delve into one of the most powerful features of XForms - the repeat control. By the end of this tutorial, you'll be able to create dynamic forms that repeat sections based on data.

Let's start with the basics!

Understanding XForms Repeat 📝

The xforms:repeat control allows you to create a repeating group of controls within your XForms. This means you can create a form that can dynamically generate and manage multiple instances of a control group based on a data source.

Why use XForms Repeat? 💡

Improve user experience by creating dynamic forms that adapt to the data
Simplify form creation and maintenance by generating form fields based on data
Enable easy handling of complex data structures in forms

Setting Up the Environment 💻

To follow along with this tutorial, you'll need:

An XML editor (such as XML Notepad++)
Knowledge of XForms basic syntax (if you're new to XForms, consider checking out our XForms Basics tutorial)

Getting Started with XForms Repeat 🔧

Simple Example 💡

Let's create a simple example of an XForms repeat control. Here's a sample XML document:

xml

<?xml version="1.0" encoding="UTF-8"?>
<xForms xmlns="http://www.w3.org/2002/xforms">
  <model>
    <instance>
      <items>
        <item>
          <name>name1</name>
          <value>John</value>
        </item>
        <item>
          <name>name2</name>
          <value>Doe</value>
        </item>
      </items>
    </instance>
  </model>
  <xforms-repeat ref="instance/items" id="repeat">
    <xforms-output ref="."/>
    <xforms-input ref="instance/items/@name" label="Name" />
    <xforms-input ref="instance/items/@value" label="Value" />
  </xforms-repeat>
</xforms>

In this example, we have an instance with a list of items, each containing a name and a value. The xforms-repeat control iterates through the items list and creates an input field for each name and value.

Quick Quiz

Question 1 of 1

What does the `xforms-repeat` control do in this example?

Advanced Example 💡

Now, let's take it a step further and create a dynamic form for adding multiple addresses.

xml

<?xml version="1.0" encoding="UTF-8"?>
<xForms xmlns="http://www.w3.org/2002/xforms">
  <model>
    <instance>
      <addresses>
        <address>
          <street1>123 Main St</street1>
          <street2/>
          <city>Anytown</city>
          <state>NY</state>
          <zip>12345</zip>
        </address>
      </addresses>
      <currentAddress>
        <street1/>
        <street2/>
        <city/>
        <state/>
        <zip/>
      </currentAddress>
    </instance>
  </model>
  <xforms-repeat ref="instance/addresses" id="addressRepeat">
    <xforms-output ref="."/>
    <xforms-input ref="instance/addresses/street1" label="Street 1" />
    <xforms-input ref="instance/addresses/street2" label="Street 2" />
    <xforms-input ref="instance/addresses/city" label="City" />
    <xforms-input ref="instance/addresses/state" label="State" />
    <xforms-input ref="instance/addresses/zip" label="Zip Code" />
  </xforms-repeat>
  <xforms-group>
    <xforms-repeat ref="instance/currentAddress" id="currentAddressRepeat">
      <xforms-output ref="."/>
      <xforms-input ref="instance/currentAddress/street1" label="Street 1" />
      <xforms-input ref="instance/currentAddress/street2" label="Street 2" />
      <xforms-input ref="instance/currentAddress/city" label="City" />
      <xforms-input ref="instance/currentAddress/state" label="State" />
      <xforms-input ref="instance/currentAddress/zip" label="Zip Code" />
      <xforms-button value="Add Address" onclick="addAddress()" />
      <xforms-if test="instance/currentAddress/street1 = ''">
        <xforms-bind nodeset="instance/addresses[last()]" value="instance/currentAddress" />
      </xforms-if>
    </xforms-repeat>
  </xforms-group>
  <xforms-function name="addAddress">
    <xforms-sequence>
      <xforms-copy-instance-value instance="instance/currentAddress" destination="instance/addresses[last()]" />
      <xforms-clear-instance-value instance="instance/currentAddress" />
    </xforms-sequence>
  </xforms-function>
</xforms>

In this example, we have a form that allows you to enter multiple addresses. The first part of the form is a repeating group for addresses, and the second part is a group for the current address. There's also an "Add Address" button that copies the current address to the end of the addresses list whenever clicked.

Quick Quiz

Question 1 of 1

What does the `xforms-if` control do in this example?

Conclusion 🎉

You've now learned the basics of using the xforms:repeat control in XForms. With this knowledge, you can create dynamic forms that adapt to your data, making your forms more efficient and user-friendly. Happy coding! 🚀