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

Image Removed

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.

Introduction

Drop-down views can be styled to suit your business requirements. In the below example, row styling has been configured on the view that can be seen in the drop-down. 

Image Added

For creating drop-downs, see Adding a Drop-Down.

View Style Settings

In this example, we will create a number of new styles to achieve the below styling for our drop-down view.

Image Added

1. For Grid Row Style, select the 

   Insert excerpt
   _addIcon _addIcon nopanel true

    icon to create a new style:

   1. Name: GridRowHeight

   2. Height: 20px

   3. Insert excerpt
      _finish _finish nopanel true

2. For Grid Column Style, select the 

   Insert excerpt
   _

1. addIcon _

1. addIcon nopanel true

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:

Image Removed

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

Image Removed

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.

Image Removed

1.  icon to create a new style:

   1. Name: GridColumnBorderRight

   2. Border: choose the Split border option

      1. For R:

         1. Enter 1px

         2. For the colour picker, enter the hex code #bdbdbd

         3. For the line, choose solid 

   3. Insert excerpt
      _finish _finish nopanel true

2. For Grid Alternate Row Style, select the 

   Insert excerpt
   _addIcon _addIcon nopanel true

    icon to create a new style:

   1. Name: GridAltRowColour

   2. Fill: #e8e8e8

   3. Insert excerpt
      _finish _finish nopanel true

3. For Row Selection Style, select the 

   Insert excerpt
   _addIcon _addIcon nopanel true

    icon to create a new style:

   1. Name: RowSelectColour

   2. Fill: #c27ba0

   3. Insert excerpt
      _finish _finish nopanel true

4. For Grid Row Hover Style, select the 

   Insert excerpt
   _addIcon _addIcon nopanel true

    icon to create a new style:

   1. Name: GridRowHoverColour

   2. Fill: #daafc6

   3. Insert excerpt
      _finish _finish nopanel true

5. Insert excerpt
   _finish _finish nopanel true

    the new View

Image Added