XForms Technique: Collapsing Sections

Steven Pemberton, CWI Amsterdam

Version: 2018-08-22.

Introduction

For long forms, you may want to collapse certain sections not currently relevant, either automatically, or by letting the user collapse them.

Here are two techniques: using switch and using relevance.

Using Switch

Here you use a switch with two cases, one for the open case, and one for the closed case. Each starts with a trigger that is used to select the other case. The closed case contains nothing else, and the open case contains the content you want to hide/reveal:

<group>
   <switch>
      <case id="closed">
         <trigger appearance="minimal">
            <label>⏵Section 1</label>
            <toggle case="open" ev:event="DOMActivate"/>
         </trigger>
      </case>
      <case id="open">
         <trigger appearance="minimal">
            <label>⏷Section 1</label>
            <toggle case="closed" ev:event="DOMActivate"/>
         </trigger>
         ... collapsible stuff ...
      </case>
   </switch>
</group>

Here it is in use:

Source

Using Relevance

Here we use a group with a ref to an administrative value that determines if the group is displayed or not, using relevance: the administrative value is relevant if the group is to be displayed, and non-relevant otherwise. The relevance can be set automatically, according to some condition, or can be set by the user, as in this case, using a trigger:

<instance id="admin">
   <admin xmlns="">
      <show/>
   </admin>
</instance>
<bind ref="instance('admin')/show" relevant=". = true()"/>
 ...
<group>
   <trigger appearance="minimal">
      <label><output value="if(instance('admin')/show=true(), '⏷Section 1', '⏵Section 1')"/></label>
      <setvalue ev:event="DOMActivate"
                ref="instance('admin')/show" value="not(boolean-from-string(.))" />
   </trigger>
   <group ref="instance('admin')/show">
      ... collapsible stuff ...
   </group>
</group>

Here it is in use:

Source