Add Toggles: Checkboxes and Switches

[Dan]

Honeycode has two types of toggles you can easily add to your apps to allow users to make a selection with a click or a tap:

• Checkboxes
• Switches

Toggle selections are typically binary in nature, meaning the app user can select between two choices; furthermore, you can add dynamic labels to the toggles to help clarify what the selection means (e.g., On or Off, Yes or No, Complete or Incomplete, etc.).

---

Use case with steps

As seen in the image above, we will build an app for a catering company’s maintenance team that performs refrigerator checks prior to events to ensure they are powered "On" and set to 40°F.

• Switches will be used for the On/Off Power selection. Switches are common and well suited for On/Off selections in app design.

• Checkboxes will be used for the Yes/No Temperature selection. Checkboxes are an optimal interaction in app design for Yes/No selections.

---

Set up the tables

1. We set up a Refrigerators table with three columns: a [Refrigerator_ID] column for keeping track of the refrigerators, a [Power] column for the On/Off switches, and [Set to 40F] for the Yes/No checkboxes.

2. We added TRUE and FALSE values to the [Power] and [Set to 40F] columns, which might seem peculiar. After all, when thinking about whether or not the power is On/Off or if the temperature is set to 40°F, words like TRUE and FALSE might not come to mind. We are using TRUE and FALSE values because Honeycode’s toggle features use what is called Boolean logic. If you don’t know what Boolean logic is, don’t worry. Just know that these TRUE and FALSE values determine how the checkboxes and toggles are displayed to your app users:

   • TRUE: Checkbox will be checked; switch will display a blue, on position.

   • FALSE: Checkbox will be unchecked; switch will display a grey, off position.

Builder tip: If you prefer to have checkboxes in your tables as opposed to TRUE and FALSE values, select the column > click the Formats button > switch the dropdown from Plain text to Checkbox.

---

Add switches to the app

1. In Builder, click [+] Add object > select Column list. We added all three columns, so the app user can see everything on one screen.

Builder tip: Whether they’re standalone or appended to another object, toggles can be added just about anywhere in your apps, so a column list isn't necessary in order to get toggles up and running.

2. With the column list selected, click [+] Add object > select Switch. We aligned this with the [Power] column, and set the shared data source to =[Power] in the Data tab of the Properties panel.

Builder tip: Setting toggles as a shared data source ensures all app users see the same thing when using the app. For instance, if one app user turns the switch to the “On” position, then all of the other app users will also see that the switch was turned “On.” Shared data also ensures that whenever an app user makes a toggle selection, the TRUE and FALSE values or checked and unchecked boxes immediately update in the table.

3. Optional step: If you want the switch to dynamically display descriptive labels next to the toggles as your app users click or tap, you can add an IF formula to the Display data from in the field in the Display tab of the Properties panel. We added the formula =IF([Power], "On", "Off") as shown below.

Formula breakdown: =IF([Power], "On", "Off")

• The IF function uses Boolean logic, and we've instructed it to look at the [Power] column. If the value in the [Power] column is TRUE or a checked box, then the switch should show the word “On” alongside the blue, on position. If the value is not TRUE (meaning it’s FALSE or an unchecked box), then the switch should show the word “Off” alongside the grey, off position.
• This formula can be replicated for your own use case by substituting the bracketed column reference and words in the quotation marks.

---

Add checkboxes to the app

1. Select Checkbox from the objects panel. We aligned ours with the [Set to 40F] column, and set the shared data source to =[Set to 40F].

2. Optional step: Similar to the switches, we added the formula =IF([Set to 40F]), "Yes", "No") to the Display data from field in the Properties panel. When the temperature checkbox is checked and its value in the table is TRUE or a checked box, it displays the word "Yes." When the temperature checkbox is unchecked and its value in the table is FALSE or is an unchecked box, it displays the word "No."

3. You can delete the content boxes above the toggles if you don’t want the app user to see the TRUE and FALSE values in the app.

4. Click the View app button to see your toggles in action.

---

Was this article helpful?

• Yes
• No