Two-state Switch Settings

Description

If you select 'Two-State' in the Switch Properties section of the Form View Builders Form Layout control, you then have the option of defining the Two-state switch. These settings let you customize switches as well.

Name
Description
Custom switch type

If you have defined the Switch type as Custom, then you have the option of using either an icon or HTML as the 'Custom switch type'.

Off HTML

Specify the HTML to show when the switch is 'off'.

On HTML

Specify the HTML to show when the switch is 'on'.

On icon

Specify the icon to show when the switch is 'On'

Switch type

Switch type specifies how the switch should be rendered. The 'Default' setting uses the standard 'switch' control. This generally takes the form of whatever Style name is defined for the project in the UX Properties sections of the UX Properties page. The 'Custom' setting allows you to specify icons and or text to show for the 'on' and 'off' states.

Switch width

If you are using a default switch, then this specifies the switch width using CSS syntax, e.g. 200px, 2in, etc.

 Videos

Switch Control

Most fields in a FormView control are edited in an associated 'editor'. When the user taps on the field in the Form, the associated editor is opened, the user edits the form field value and then saves the edited value back to the form. This is called 'indirect editing'.

There are cases, however, where 'immediate' editing of a value would be more convenient than having to go to a separate editor to edit the value. A good use case for an 'immediate' editor is a toggle field that has two states, such as 'Yes' or 'No' for a 'Married' field. A 'switch' control is ideal for this use case.

In this video we show how you can add a switch control to a FormView. The switch control acts as an 'immediate' editor.

Download Component

2015-08-10