The if element

The if element toggles the visibility of a group of controls dynamically, based on a predefined condition.

Usage

<if
  id='id'
  cond='cond'>
  content
</if>

Fields

Field	Description
id	Identifies the control when it is referenced in data-binding queries, reports, and workflow scripts.

Properties

Property	Type	Description
cond (required, submitted)	boolean	The condition that determines whether the child controls in the `if` are visible or not. If `cond` evaluates to `true`, the controls are displayed; if it evaluates to false, the controls are hidden.

Traits

Trait	Description
declarations	A collection of zero or more variable declarations (let elements) that can be referenced in solution-wide query expressions.
validation	A collection of zero or more validation rules (validator elements) that evaluate user input in the control at runtime, and prevent the user from submitting the form if the `cond` of any of the validators evaluates to `false`.
content	Zero or more miscellaneous controls that are displayed in the form only if the `cond` property evaluates to true.

Remarks

If the if has an id, you can reference the condition elsewhere in the form, and the property gets submitted to the server with the form, so it is also available as a reference in workflow scripts.

ifSample.fls.xml

...
<checkbox id="checkboxBroo"
  text="Know what I mean? Know what I mean?"/>
  <if id="ifAoo"
  cond='{checkboxBroo.checked}'>
  <textview id="textviewSwoo"
    text="Nudge, nudge. Wink, wink. Say no more!"/>
  </if>
  <if cond='{ifAoo.cond == false}'>
    <textview
      text="I'm afraid I don't quite follow you."/>
  </if>
...

Figure 235. A second if element references the condition of the ifAoo if

Regardless of having an id, and even if the conditional child controls of the if are hidden (because the cond expression evaluates to false or NULL), the submitted properties of all the child controls with an id are still submitted to the server with the form, and they are also data-bindable, just as if the child controls were displayed.

ifSample.fls.xml

...
<checkbox id="checkboxBroo"
  text="Know what I mean? Know what I mean?"/>
<if id="ifAoo"
  cond='{checkboxBroo.checked}'>
  <textview id="textviewSwoo"
    text="Nudge, nudge. Wink, wink. Say no more!"/>
</if>
...
<textview
  label="Here's the text of the hidden textview again:"
  text='{ifAoo.textviewSwoo.text}'/>

Figure 236. A textview control references the text property of the hidden control

Sample

ifSample.fls.xml

<form id='if'
  menuName='Show/hide elements in a form'
  platforms='web'
  xmlns='http://schemas.mobilengine.com/fls/v1'>
  <checkbox id="checkboxBroo"
    text="Know what I mean? Know what I mean?"/>
  <if id="ifAoo"
    cond='{checkboxBroo.checked}'>
    <textview
      text="Nudge, nudge. Wink, wink. Say no more!"/>
  </if>
</form>

The child control of the if is displayed only when the checkboxBroo checkbox is selected

{
  checkboxBroo: {checked: true},
  ifAoo: {cond: true},
...}

See the workflow script reference guide for more details on data type mapping.

Related links

The id field

The label property

Developer Documentation

Controls overview

The if element