Thursday, July 8, 2021

Handling Yes/No Fields in Bubble

If you've used a "yes/no" (boolean) field in Bubble or on other platforms, you know they can be a little tricky to work with. Here's an excerpt from "Learning Visual (No-Code) Programming Step by Step with Bubble" that explains a way to make life with yes/no fields a little easier:

I had built a "to-do" list app with a "finished?" yes/no field to indicate whether or not a given "to-do" had been completed and I decided to add a filter to the listing page to let the user display all todos, finished todos, or unfinished todos. The problem I ran into is that Bubble's yes/no field treats an empty value as “no”. 

I assumed I could display finished to-dos or unfinished to-dos by adding a constraint to the repeating group that loads the to-do records. If the user chose a filter value of "yes" it would display finished records, while a filter value of "no" would show unfinished records. And if the user left the filter blank the repeating group would ignore an empty constraint and display all to-do records in the database. However, because a yes/no field sees an empty value as “no” the app displayed just the unfinished records whether the filter value was "no" or blank.

So what was the solution? I changed the type of the “Finished” field from yes/no to “boolean” (“boolean” being an "option set" that I created that had just two values, “yes” and “no”). Then I edited my sample data and reset the “Finished” field in each record to either the "yes" or "no" value in the option set. 

Once that was done I went back to design mode for the Todo Listing page and placed a dropdown box above the repeating group and named it “Dropdown Filter Finished”. Then I set the “Choices style” to “Dynamic”, the “Type of choices” to “Boolean”, the “Choices source” to “All boolean”, and the “Option caption” to “Current option's Display”. The property editor for the dropdown looks like this:

Next I opened the property editor for the repeating group, clicked on “Data source” to display the constraints, and added a constraint “Finished=Dropdown Filter Finished's value”. By changing the “Finished” field's data type to the “boolean” option set, the constraint now included a true “empty” value. 

At that point, the property editor for the repeating group looked like this:

Now the repeating group that displays the "to-do" records showed all todo records if nothing was selected in the dropdown (filter Finished) box, all completed todos if “yes” was selected, and all the unfinished todos if “no” was selected.

There are a lot of situations where a "yes/no" field is a good choice, but there may also be occasions when you want to use a boolean value instead. 

No comments:

Post a Comment