Switch

The UI component Switch allows the user to easily input data of type boolean. You can bind this UI component to a property, which can allow you to persist this user input to the database. They serve a very similar function to the Checkbox component.

You can see an example setup of the Switch in the UI Components App in our Showroom! You can try the component, as well as access the setup in Appfarm Create. If you do not have access, you can register here.

Settings

Here are some of the properties in Appfarm Create which are custom for the Switch:

Value

The data source property or variable that the user input is bound to. This must be of data type boolean. This can be an App Variable, a Runtime Only Object Class property, or a Database Connected Object Class property.

A property of data type boolean is not automatically true or false by default. A boolean property is by default undefined. Binding a switch to such a property will display similarly to false. Once checked, the property is set to true. Once unchecked, the property is set to null. This behaviour can be seen with an example in the Showroom.

Unless you want a boolean property to have more than 2 states (true or false) it is recommended to have a default value (see Value on Create) set to false or true.

To make sure that you handle undefined, null and false the same way, it is also recommended to use the following pattern in conditions or filters to represent "equals false": Use NOT EQUALS true.

Label

This text gives further information about what the Switch means when it is either ticked or left unticked. This can be static text or bound to a data source, while a JavaScript can also be used to display more helpful and intuitive output to the user.

Auto Focus

When selected, this component will gain focus automatically when the screen is rendered.

Tab Index

Users can use the Tab key to navigate between inputs and components on a screen. This property tells Appfarm Create which index to bind to the current Switch. This value should only be given when you want to override the default tab index. Using a tab index of -1 will remove the component from the tab index.

Appearance

Color

The colour of the component can be configured to Primary, Secondary or Default. Primary and Secondary refer to the primary and secondary colours of the chosen app theme, while Default does not change the colour of the checkbox.

Margin

Three choices are available for this property. These define the margin style between this component and other UI components on the screen.

• Normal

• Dense

• None

Size

Switches can be of size Small or Medium. An example of the difference in small vs medium size is available in the Showroom.

Label Placement

Labels can be configured to appear at the Start, End, Top or Bottom of the Switch component.

Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. One Event Handler is available for the Switch component:

On Value Change: This Event Handler will run an action when a change is detected in the data source bound to the component. For example, if the data input changes from false to true, or vice versa, a specific action can be performed.