Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Overview

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

A toggle component is a switch that returns true or false, when it is enabled or disabled respectively. Its useful for showing and hiding content based on whether it is enabled or not. Image Removed

Setup

  1. Toggles are available from the Toggles section of the palette.
  2. Drag one onto your screen.
    1. Its value is now available using the syntax _form.ToggleName
  3. The state of the toggle can now be accessed by any object on the screen within its formatting rule. see Applying Formatting Rules. When the toggle is enabled, _form.ToggleName, will return true which means your formatting rule will be applied.
Example -

acts as a switch to represent:

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

Image Added

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 

Insert excerpt
_palette
_palette
nopaneltrue
 → 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 app 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:.

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

Image ModifiedGrid 

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

Image Modified

Both data views exist in the same location on the screen, but their formatting rules hide them depending on the toggle state. Here is the formatting setup for the Card View. If the

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

Image Modified