XForms/Show-Hide Controls

Motivation
You want to only display a full representation of a control when the user wants to set or change the control's value.

Method
We will use the switch/case and toggle elements to conditionally display a custom control. When the user opens a form a small "show value" of this control is visible and a trigger to set or change the value of the control. After the user selects a value the control reverts to a view that minimizes the screen area.

Screen Images
There are two ways that this control is viewed. The first takes only a small areas of the form and is a read-only view. It shows all the current values of the months selected. When the users select the "Set Months" trigger the full control is made visible. When you are done setting the months the control is set back to the hidden mode.

Sample Code
       Current Months:   Set Months    <xf:case id="unhide"> <xf:select ref="instance('save-data')/month-code" appearance="full"> <xf:label>Select Months</xf:label> <xf:itemset nodeset="instance('code-table')/month-code"> <xf:label ref="."/> <xf:value ref="."/> </xf:itemset> </xf:select> <xf:trigger> <xf:label>Hide</xf:label> <xf:toggle case="hide" ev:event="DOMActivate" /> </xf:trigger> </xf:case> </xf:switch>