Switch Properties

Description

Switch controls are ideal for toggling between two states, such as 'Yes' or 'No, in which repeated entry into a field might become onerous.

A Switch Control

Sub-theme

Sub-themes allow you to tweak the styling on control types within a component without having to change the main theme of the component. This approach is often preferable to manually changing the styling on individual controls by changing individual style settings. If you leave this property blank the default ('base') sub-theme is used.

A sub-theme is a variation on the main theme or 'style' of a component. This main style is defined in the Style name property in the UX Properties section. Once a style for the component is selected, this will determine the available sub-themes for a given control type. You can create your own sub-themes. For information on how to do this visit the 'Local sub-theme definitions - Javascript' property page in the UX Properties section.

Control container Width

The Control container Width property specifies the width of the container that contains the switch control.

Switch Width

The width of the Switch control within the control's container. The Switch Width is defined using CSS syntax. Default is 100px.

Switch width set to .75in

Switch width set to 12cm

Switch width set to 300px

Flow

Flow specifies the control's 'flow' direction. This can be left-to-right (LRT) or right-to-left (RTL).

Left to Right (LTR)

If LTR is selected, when the switch control is 'off' the button will be on the left.

LTR in 'On' position

LTR in 'Off' position

Right to Left (RTL)

If RTL is used, when the switch is off then the button will be on the right.

RTL in 'On' position

RTL in 'Off' position

Text for 'on' state

This optional property causes text to be displayed when the switch is in the 'on' state. Because the text is often centered in the middle of the control it might be necessary to increase the width of the switch control in order to see it.

Setting the text to read 'True'

The text for the on state set to read 'True'

Text for 'off' state

This optional property causes text to be displayed when the switch is in the 'off' state. Because the text is often centered in the middle of the control it might be necessary to increase the width of the switch control in order to see it.

Setting the text to read 'False'

Text for the 'off' state now reads 'False'

'On' value

The stored value for the on state for a character type Switch control.

If a Switch control's underlying data a "Character" Type, the 'On' value property can be used to specify the Switch control's value when it is in the 'On' state.

OnSelect event

Specify JavaScript to run when the Switch control's state changes.

The Switch builder allows you to specify an OnSelect event which is fired when the state of the switch is changed. The JavaScript in the OnSelect event can reference the value of the switch using the this variable. For example:

var state = this.value;
// test the value for a Switch control bound to a Logical data type:
if (state == true) {
    alert("Switch is on!");
} else {
    alert("Switch is off!");
}