2.2.7 Control the Visibility of an Element

Owned by Charles Evans (Unlicensed)
Last updated: Feb 25, 2019
2 min read


In most circumstances the visibility of a form element is dependant on some other action or condition.
 

This can be illustrated using the example in the FAB Demo form. 
 The Form is setup with a Form Element with a Label set to 'Conditionally Visible', a CheckBox with a Label 'Visible' and an Input Field.
 

When the CheckBox is ticked, the Input Field becomes visible. When the CheckBox is unticked the Input Field disappears. 
 
The set-up of the elements are as follows:

Checkbox:

The Checkbox is always visible but depending of whether it is tick or not a variable InputVisible is set to true or false

Input:

The Visible property of the Input element is set to be dependent on this variable InputVisible.

 When the CheckBox is ticked 'Set Fields if true' is set so that it makes the varaible InputVisible=true. This has the
 immediate effect of making the Input Field visible.
 
 When the CheckBox is unticked 'SetFields if false' is set so that it makes the variable InputVisible=false. This has the
 immediate effect of making the Input Field disappear.