XForms/Binding in Repeats

MotivationEdit

You have a list of items and you want a simple way of conditionally displaying fields within a repeated group.

MethodEdit

We will do this is two ways. First we will use a bind expression in the model. The second method of doing this will be to use a group element with a ref attribute.

Sample DataEdit

<data xmlns="">
    <group>
        <code>yes</code>
        <field>display 1</field>
    </group>
    <group>
       <code>no</code>
       <field>display 2</field>
    </group>
    <group>
       <code>yes</code>
       <field>display 3</field>
    </group>
</data>

Sample RepeatEdit

<xf:repeat nodeset="instance('my-data')/group" id="my-repeat">
     <fieldset>
 
         <legend>
             Group # <xf:output value="count(preceding-sibling::*) +1"></xf:output>
         </legend>
 
         <xf:select1 ref="code">
             <xf:label>Display Input Field: </xf:label>
             <xf:item>
                 <xf:label>Yes</xf:label>
                 <xf:value>yes</xf:value>
             </xf:item>
             <xf:item>
                 <xf:label>No</xf:label>
                 <xf:value>no</xf:value>
             </xf:item>
         </xf:select1>
 
 
         <xf:input ref="field" >
             <xf:label>Conditional Display: </xf:label>
         </xf:input>
 
     </fieldset>
</xf:repeat>

Solution Using Relative BindsEdit

In this example we use a relative statement to indicate that the field should only be displayed if the code value is "yes". Note that the context of the relevant expression is the result of each nodeset item.

<xf:bind id="field" 
   nodeset="instance('my-data')/group/field"
   relevant="../code = 'yes'"/>

Solution Using Group ElementEdit

We can use the ref attribute to conditionally display any field within a repeat. We do this by starting the group ref attribute with "." to give it the current context. Then we add a predicate to turn on or off that entire group. In this case if the code is "yes" the input field will be displayed. If it is not the field will be hidden.

<xf:group ref=".[code='yes']">
   <xf:input ref="field">
      <xf:label>Conditional Display: </xf:label>
    </xf:input>
</xf:group>

Complete ExampleEdit

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>Binds in Repeats</title>
        <style type="text/css">
            @namespace xf url("http://www.w3.org/2002/xforms");
            body {{
                font-family:Helvetica, sans-serif;
            }}</style>
        <xf:model>
            <xf:instance id="my-data">
                <data xmlns="">
                    <group>
                        <code>yes</code>
                        <field>display 1</field>
                    </group>
                    <group>
                        <code>no</code>
                        <field>display 2</field>
                    </group>
                    <group>
                        <code>yes</code>
                        <field>display 3</field>
                    </group>
                    <group>
                        <code>no</code>
                        <field>display 4</field>
                    </group>
                </data>
            </xf:instance>
 
 
            <xf:bind id="field" 
                nodeset="instance('my-data')/group/field"
                relevant="../code = 'yes'"/>
 
 
        </xf:model>
    </head>
    <body>
        <h1>Test of binding rules within a repeat</h1>
        <xf:repeat nodeset="instance('my-data')/group" id="my-repeat">
             <fieldset>
                 <legend>
                     Group # <xf:output value="count(preceding-sibling::*) +1"></xf:output>
                 </legend>
                 <xf:select1 ref="code">
                     <xf:label>Display Input Field: </xf:label>
                     <xf:item>
                         <xf:label>Yes</xf:label>
                         <xf:value>yes</xf:value>
                     </xf:item>
                     <xf:item>
                         <xf:label>No</xf:label>
                         <xf:value>no</xf:value>
                     </xf:item>
                 </xf:select1>
 
 
                 <xf:input ref="field" >
                     <xf:label>Conditional Display: </xf:label>
                 </xf:input>
 
             </fieldset>
        </xf:repeat>
 
        <xf:output value="index('my-repeat')">
            <xf:label>Current Selected Group: </xf:label>
        </xf:output>
    </body>
</html>
Last modified on 19 September 2012, at 13:34