Page Comparison

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.

Image Modified

To You can use different images to represent true/false values with different imagesImage Removed-false values. For example, the following image shows a slider that changes colour when the value is true.

Image Added

To use an image other than the default tick box, use styles and formatting rules.

1. Create two styles, one for the true state and one for the false state. In the style properties →  Insert excerpt_property_tabs_property_tabsnamebasicnopaneltrue →
   For each style, in the style Properties tab → Basic Settings → Background Image, add or select an image to represent the state; see Adding Images.
2. Edit the true/-false component properties.Switch to the to create two formatting rules, one for the true state and one for the false state. 
   1. In the Styles tab →  Formatting Rules section, click 

      Insert excerpt
      _

   property_tabs

   1. add _

   property_tabsnamedesign

   1. add nopanel true

      .
    In the Formatting Rules section, create a rule for the true state. PhixFlow opens the formatting rule properties. in the Basic Settings section, set:Rule Expression to
   2. In the formatting rule Properties tab →  Basic Settings section:
      • For the true state, set: 
        • Rule Expression: 'true'.
   In
   1. • • Style
   , In Formatting Rules section, create another rule for 
   1. • • : select the style with the background image that represents the true state.
3. Save the "true" formatting rule.
4. 1. • For the false state
   and
   1. • , set:
        • Rule Expression
   to 
   1. • • : '_form.value'
   In _tick_tick 
   1. • • Style:, select the style with the background image that represents the false state.
   Insert excerpt
   1. • • Stop if True: tick
   2. Save
   the "false" formatting
   1. each rule.
5. Save the component.