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.

XForms Control Hidden (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

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.

XForms Control Visible (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Sample Code

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">;

Show/Hide Control

type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
body {font-family: Helvetica, sans-serif;}
xf|output > xf|label, xf|select > xf|label {font-weight: bold;}

xmlns="" id="save-data">

January May November

xmlns="" id="code-table">

January
February
March
April
May
June
July
August
September
October
November
December

id="hide">
ref="instance('save-data')/month-code">
Current Months:

Set Months
case="unhide" ev:event="DOMActivate" />

id="unhide">
ref="instance('save-data')/month-code" appearance="full">
Select Months
nodeset="instance('code-table')/month-code">
ref="."/>
ref="."/>

Hide
case="hide" ev:event="DOMActivate" />

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.