Switch
Guide for using Switch in your applications
Last updated
Was this helpful?
Guide for using Switch in your applications
Last updated
Was this helpful?
This guide will show how to use Switch in your applications. See how easy it is to drag and drop switches onto your forms and connect them to your business logic. Switch can be modified, styled and even changed at runtime.
To see a live sample of the component you can go .
In the , drag the Switch component from the Pallet onto the form.
Switch, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the Switch in the to see a list of properties in the . Below are some common properties and how to set them at design-time.
The animate property can be set on true or false. To apply this property on the webpage you need to check or uncheck the box depends on your preferences.
In case you want to change the size of the switch button you have 4 types of size that you can change in js file dinamically or hardcode in the property.
The column or variable to provide the data for this label.
You can adjust the width of the middle container of the switch button.
Like all components, a Switch can be styled using themes, variants and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the styleClass property.
You can change the color of the off button or on button by selecting from properties from the dropdown a class that is predifined by servoy. Also, you can change the color from JS file hardcoded or dinamically but keep in mind that you need to assign those classes using lowercase not uppercase!
You can adjust the width of the middle container of the switch button
Like most components, switches have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Switch is the onDataChange event, which is triggered when dataprovider is updated.
Switch, like many components, can be modified at runtime through code. Below are a few examples of controlling a Switch from code.
You can easily change the enabled state of a Switch at runtime.
You can easily change the visible state of a Switch at runtime.
Like most components, a Switch has API methods which can be called from code. Below is an example of common API calls.
Change this to match your component:
You can easily add a style class to a Switch using the addStyleClass method.
The following articles are recommended for additional reading:
The text displayed on the sides of the button can be modified by setting its property and property. Most often, this will just be plain text for example on the left side "On" and on the right side "Off". In this case, just enter the value into the editor or directly on the component by double-clicking it.
The text displayed on the middle of the button can be modified by setting its property.
To handle the event, double-click the value for the onDataChange property in the . You will see the . You'll have the option select an existing Method or create a new Method. The method will be called when the button's onDataChange event is fired and the object will be passed to it.
See the for comprehensive list of
You can easily give keyboard focus to a Switch using the method.