Simple Dropdown Can Provide Repeating Group Benefits to Your Users
A Repeating Group is how Bubble.io Handles a List of Things
You’re probably familiar with using the Repeating Group Element in your Bubble.io node code web app (for more info check out http://echolaketech.com/2021/01/02/how-to-handle-a-list-of-things-using-repeating-groups-in-your-bubble-io-no-code-web-app/) Repeating Groups (“RG”) are the way Bubble.io shows a list of things and is a commonly used Element. So if you have a list of “things” in your Bubble.io database, ie Properties, Vehicles, Recipes, etc and want to show information about those things to your Users, then you would use a RG Element.
Typically a Search is used to put “thing” data from the Bubble.io database into the RG so you can show relevant information. With the Search you will also have the ability to add a Constraint. The Constraint tells Bubble.io to search the database for the list of things but to narrow the search based on what you have in your Constraints. In the example below, the RG has a “Search of Recipes” with a Constraint “Calories < SliderInput Calorie’s value”. This is telling Bubble to search the database for all the Recipes but to put into the RG only the Recipes with Calories that are less than or equal to what the SliderInput value is. The data for that constrained list of Recipes is what will be put in the RG for you to use. This example is a typical way in which to use a RG.
Setting up the Dropdown
Next you’ll need to add a Dropdown Element to your design. The values in the Dropdown will be used as Search criteria (ie the Constraint discussed above). So it’s important that the Dropdown values are the same as the values in your Bubble database. Using the Recipe example, the values in the Dropdown are Breakfast, Lunch and Dinner. These values will be used as Search criteria to populate the Repeating Group with Breakfast, Lunch or Dinner recipes.
Using the Repeating Group Conditional With the Dropdown
With the Repeating Group and Dropdown set up you are now ready to use the Dropdown’s value as part of the Repeating Group’s Search. In the image below you see there are three Conditionals where each one is associated with a Dropdown value. For instance take the Conditional which has “Dropdown RG Selection’s value is Dinner”. When the User selects “Dinner” in the Dropdown, this condition will be met and the “Search for Recipes” will occur.
When you click on “Search for Recipes” in the “Dinner” Conditional you’ll get a popup like the right image below. For this example there are two Constraints, the first one being the “Meal Type” which is “Dinner” (selected by the Dropdown) and a second for “Calories” which is selected by using a SliderInput (more details on the SlideInput at the how-to video link down below). These two Constraints will be used to automatically do a Search and put Dinner Recipe data in the Repeating Group.
Closing Thoughts
Using a Dropdown can be an effective way to provide more dynamic Search customization to your Repeating Groups. So if you have a Data Type and want to provide your Users the flexibility to further refine the data shown in a Repeating Group, try using a Dropdown.
And if you have an online storefront you could even use the Star Rating Element. Then Users can Search for 5-star or 4-star, etc products on your site. Simply use the value of the Star Rating Element as a constraint (instead of using Meal Type described earlier)
Check Out The How To Video!
For an even more detailed overview on how to implement, check out the video.
