...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
By default, a true-false component shows a tick box that is
- ticked where a value is true
- unticked where a value is false.
To represent true/false values with different images
...
- Rule Expression to
'true'. - Select a style with an image that represents the false state.
...
- #Rule '_form.value'
- Set the stop on true flag
- ormatting rule select a style with a background image that represents the true state and the second formatting rule should select a style with an image that represents the false state.
...
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
This page is for application designers who want to create a true-false representation that is different to the default tick box.
By default, a true-false component shows a tick box that is:
- ticked where a value is true
- unticked where a value is false.
You can use different images to represent true-false values. For example, the following image shows a slider that changes colour when the value is true.
To use an image other than the default tick box, use styles and formatting rules.
- Create two styles, one for the true state and one for the false state.
For each style, in the style Properties tab → Basic Settings → Background Image, add or select an image to represent the state; see Adding Images. - Edit the true-false component to create two formatting rules, one for the true state and one for the false state.
- In the Styles tab → Formatting Rules section, click
.Insert excerpt _add _add nopanel true - In the formatting rule Properties tab → Basic Settings section:
- For the true state, set:
- Rule Expression:
'true'. - Style: select the style with the background image that represents the true state.
- Rule Expression:
- For the false state, set:
- Rule Expression:
'_form.value' - Style:, select the style with the background image that represents the false state.
- Stop if True: tick
- Rule Expression:
- For the true state, set:
- Save each rule.
- In the Styles tab → Formatting Rules section, click
- Save the component.