Toggle Switch

This article describes the Toggle Switch component and its properties.

The Toggle Switch allows a user to switch between two values :

Select Toggle Switch from the Controls category of the component library. Move the mouse over the canvas and click to add the component to your project:

Toggle Switch Properties

The Toggle Switch properties are organized into DATA INSERTION, BUTTON STYLING, INTERACTIVITY, and DYNAMIC VISIBILITY drawers. This guide will describe the data insertion, styling, and interactivity properties only; the dynamic visibility properties are generic and a separate guide and tutorial on dynamic visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.

---

DATA INSERTION

Data Insertion is triggered when the user clicks on the component to change its value. Data Insertion is one of the core concepts within Squirrel, if you aren’t sure what it is, take a look at the Getting Started: Data Insertion tutorial for more information.

• On Value / Off Value – these two values are the values that are inserted into the sheet when the switch is clicked. They can either be entered directly into the property boxes or bound to single cells in the spreadsheet.

• Destination – this is the location in the spreadsheet where the data will be inserted, it should be bound to a single cell in the spreadsheet.

---

BUTTON STYLING

The appearance of the Toggle Switch can be altered to suit a theme or particular style by using the BUTTON STYLING properties.

• On-state color / Off-state color – these values determine the color of the switch in each of its two states, they can be entered directly using the color picker or bound to a color value in the spreadsheet (if the values are bound to the spreadsheet then the various ways of specifying the color can be found in this article.

  • Opacity – These determine the transparency of the Switch in each of the states, the values can be entered directly or bound to single cells in the spreadsheet.

---

INTERACTIVITY

• Default State – this property determines the initial state of the Toggle Switch. It can be set to “On”, “Off” or “Dynamic”. If it is set to dynamic then another property box will appear which can be used to bind the default state to a cell in the spreadsheet

If the value is bound to the spreadsheet then its value must be either the “On value” or the “Off value” specified in the data insertion section above. If the default value is dynamic then the state of the Toggle Switch will change as the value in the cell to which it is bound changes.

DYNAMIC DISABLED STATE

It is possible to disable the Toggle Switch if you want to limit the user’s access to it.

The INTERACTIVITY property utilizes Conditional Logic. For more information on Conditional Logic and its uses, see this article.