The switch element
A switch element is a container form control that allows the creation of user interfaces where the user interface can be varied based on user actions and events.
This element contains one or more case elements, any one of which is rendered at a given time.
Example
| XML |
Copy Code
|
|---|---|
<xf:switch> <xf:case id="in" selected="true"> <xf:input ref="yourname"> <xf:label>Please tell me your name</xf:label> </xf:input> <xf:trigger> <xf:label>Submit</xf:label> <xf:toggle ev:event="DOMActivate" case="out"/> </xf:trigger> </xf:case> <xf:case id="out" selected="false"> <xf:label>Hello <xf:output ref="yourname" /></xf:label> <xf:group> <xf:trigger id="editButton"> <xf:label>Edit</xf:label> <xf:toggle ev:event="DOMActivate" case="in"/> </xf:trigger> </xf:group> </xf:case> </xf:switch> |
|
In the above example, the user interface contained within the first case is being displayed initially. This prompts for the user's name; filling in a value and pressing the submit trigger results in switching to the alternate case, with a read-only output rendering. Activating the trigger labeled Edit in turn switches back to the original case.
Attributes
| Name | Required / optional | Description |
|---|---|---|
| Common Attributes | optional | Any attribute from the Common Attributes collection (e.g. id). |
| Single Node Binding Attributes | optional | One or more attributes from the Single Node Binding Attributes group (ref, model, bind). |
| UI Common Attributes | optional | Any attribute from the UI Common Attributes group (appearance, class, navindex, accesskey). |
Content
Within an switch element, the following child elements are allowed:
| Element Name | Required / optional | Description |
|---|---|---|
| case | required | One or more case elements. |
Specification
Link to the XForms specification: the switch element.