I’m trying to create a simple meal planning app. and need help figuring out how to update a list of recipes (i.e. the meal plan) on a subsequent button click.
What I’d like it to do is…
A) allow a user to input requirements (number of meals, number of portions per meal), B) generate a new meal plan (i.e. a list of recipes), C) change one or more of the recipes based on a button click, D) save the meal plan, email to the user, E) add the ingredients to shopping basket.
Parts A and B are working fine. I’m struggling with part C. (Haven’t started D or E yet).
Here’s what I’ve tried…
Failed attempt #1) Hit button Generate meal plan. Search for recipes where the yield = ‘number of portions’ per meal. Display number of recipes = ‘number of meals’ in RepeatingGroup Recipe (this bit works OK). Hit button Swap. Show next of RepeatingGroup Recipe (this bit doesn’t work).
(I guess attempt 1 failed because the list of recipes in the repeating group is equal to the ‘number of meals’ hence there isn’t a ‘next’ recipe to show.)
Failed attempt 2) Hit button Generate meal plan. Create a new thing (Meal plan). Add fields to Meal Plan: list of recipes (using same search as above), number of meals = input value, number of portions = input value, created by = current user. Display list in RepeatingGroup Meal plan, data source = Results of step 1, Display number of recipes = ‘number of meals’. Hit button Swap. Make changes to a list of things (Recipes). And pretty much get stuck here (I’ve tried a lot of workflow options)…
The link you provided goes to your app, but it doesn’t look like it’s displaying anything. (Likely because you still have it set to scenario 2).
Focusing on the search component first. By refresh, do you mean that you want it to show a different list of options? (ex. you have 200 different recipes, and you want the next 16 to be somewhat different than the previously show recipes).
If so, the “Display list” function is working correctly. (Every time it searches, it’s going to look at the list the same way, unless you tell it to be be sorted randomly). You can use the :random sorting" function to make it so.
Once you have that sorted, you’ll want to build in the function for a user to start building a list which can be changed. (You can do this either through a custom state (set up as a list of recipes) or save them to a draft meal plan (and enable the user to “add” a recipe individually by clicking a button from the initial repeating group search).
Hi Dan. Yes, you’re correct, I’d like to display a different list of recipes each time.
I’m using the Random sorting function already, however, the list of results appears to be the same each time during a particular session. I.e. The results differ session-to-session but are the same within sessions, if that makes sense.
Re: building a list and custom states, do you know of any good resources I could check out to learn more? I’ve tried a Udemy course already but found it a tad high-level.
Thanks again.
P.S. I’ve updated my app. to scenario 1 so it displays results. The only valid inputs at the moment are “4” and “4” due to limitations on the data.
For learning resources, I have my own Bubble educational platform called LearnTo. It has a few lessons that cover custom states and working with lists. But I’d also recommend taking a look at @stephencharles curated list, Stakk for a wider list of resources.
As for the random sorting aspect, I’ve heard that it doesn’t always function randomly (especially when the search is the exact same). Try moving the sorting action from the search itself to after the search (screenshot below). Based on a quick test, that seemed to do it in a similar scenario in one of my apps.
Re: the random sorting, I’ve tried that but it still doesn’t seem to work. I’ve hacked together a solution using repeating groups set to max 1 row and 1 column to give the desired ‘Swap’ functionality (the Swap button now swaps the recipe for the next one in the list). The problem still remains that each repeating group is sorted the same so the results are the same.
Are there any other conditions or logic applied to your RepeatingGroup Lesson that might be relevant?
My guess is that I need to introduce another variable into the search or sorting somewhere, or refresh the page between searches, so will look for a solution along those lines.
Hmm. Another option you can use is to filter a group based on another repeating group’s results. (So, with repeating group 1, you have "Do a search for: recipes: items until #20, then, in repeating group 2, you have, Do a search for: recipes: filtered (by repeating group 1’s unique ID).
I tried this but then ran into the issue of not being able to swap individual rows (recipes) in the RG, as desired. The entire list of recipes that’s visible (in this case, four recipes) is changed.
What I’ve done is use the Random Number Generator plugin. On the ‘Generate meal plan’ button click, a random number is generated between 1 and the total number of recipes in the DB. Then, it finds the recipe in the list that’s number X (equal to the random number) and displays this.
I’ve then implemented individual groups rather than a RG, as the max number of rows will be 7, and added a Swap button, which basically re-runs the workflow to show the next random recipe.
Maybe not the most efficient way to do it but gives the desired UX, which will do for now!
I’ve had a similar situation where the “random” was just random the first time.
After lots and lots of testing and back and forth I landed in a pseudo-random solution using the Random Number Generator plugin from airdev.
I’m using an internal bubble table but it can be adapted to use something external ofc.
It goes like this:
Add a list of items to the database (I used a text field)
Add a repeating group and point it to the list of database items
Add “randomization” button
Workflow on click of the button
a. Randomize (the plugin), span the count of the database items from 1.
b. Set Start Point (custom state var) to the number from a.
c. Set End point (custom state) to StartPoint+[as many items as you want to show]
c. Update the repeating group with a random sort and the Start + End
This results in a “window” of values being shown.
I added 30 values and wanted to show 4 at a time, so my window is randomly placed somewhere in the list and picks up the next 4 numbers.
Not completely random ofc but gives a good enough sense of randomness.
Thanks, I’m quite happy with it as a prototype. Good luck with the project. Shoot me a message if you ever want to bounce some ideas around, I’m always happy to chat about food and tech stuff
