This page is for application designers who want to configure parts of a screen to be visible in specific conditions. 

A toggle component acts as a switch to represent:

• on/off
• enabled/disabled
• show/hide

When the application user changes the state of the switch, you can read the state change in a formatting rule and use it to change other components on the screen. For example, you can use a toggle to show or hide part of a screen.

There are prebuilt toggle switches available in the  Palette → Serene Grey → Toggles.

The steps to use a toggle are:

1. From the palette, drag a toggle onto the screen canvas.
2. For another component on the screen, configure:
   • the style to use when the toggle is disabled/off.
   • and a formatting rule to use when the toggle is enabled/on; see Applying Formatting Rules. 
3. In the formatting rule set:
   • Rule Expression to _form.ToggleName 
     When the toggle is:
     • enabled/on, it returns true
     • disabled/off, it returns false
   • Style to the style you want to use when the expression returns true.

Example to Switch View Type

In our Demo CRM application, which is available from the Learning Centre downloads, we have a toggle switch between a card view and a grid view. This is illustrated below.

When the Grid View toggle is disabled, the screen displays a card view of the data:

When the Grid View toggle is enabled, PhixFlow displays a grid view of the data:

Both data views exist in the same location on the screen, but their formatting rules hide them depending on the toggle state.

The screenshot below shows the card view's formatting rule. When _form.GridView returns true we apply the Hidden style to the card view.