Forum Academy Marketplace Showcase Pricing Features

Help with Repeating Groups, creating things with lists within the thing, viewing lists of things

Hello Bubble Users,
I have an idea that I thought would/should be rather simple, but it’s getting overly involved the more I work on it. I don’t know if I’m missing something obvious, or if I’ve just created a data system that’s too convoluted and complex to work properly. So I created this example to finally ask for some help before I break my computer…again.

https://rg-views.bubbleapps.io/version-test/index?debug_mode=true

This is an app that should make “Kitchen Sets”
Each “Set” has a Thing = “Design”

Each “Design” has fields = “Autumn, Summer, Winter, Spring”

Each “Set” has a Thing = “Utensil”

Each “Utensil” has fields = “Fork, Spoon, Knife, etc.”
Each “Utensil” has “material” fields = “Platinum, Stainless Steel, etc.” (ex. Platinum Fork)

Each “Set” has a Thing = Furniture

Each “Furniture” has fields = “sink, counter top, dishwasher, etc.”

And finally each “Utensil” and “Furniture” that was created by the user has the option of being Added to the Kitchen Set signified with a checkbox.


The idea is this: A user should be able to choose his Design, create and add Utensils (or just pick them from the Repeating Group List), create and add furniture (or just pick them from the Repeating Group List), and then create a unique kitchen set based on their choices. This Kitchen Set should be static. What I mean is, after the user creates it, they should be able to change the inputs (design, add checkboxes, etc.) without altering the created Kitchen Sets. However, I’m having problems when it gets to the creating and viewing of the Kitchen Sets.

I rather like Bubble and have been enjoying programming without code because semi-colons have ruined my life, but apparently no matter what platform I choose there’s always something. Help me Bubble! You’re my only hope! :slight_smile:

1 Like

Hi @williamacely :slight_smile: I didn’t want to alter your original page in the editor, so I created a new page in your app called ‘test_page’.

I think the best way to achieve what you want is to use custom states. I had a difficult time understanding custom states for a while, but @NigelG created this example in the forum of how this works with checkboxes which helped a lot: https://bubble.io/page?type=page&name=listselect_page&id=forum_app2&tab=tabs-1 That example may be better to look over first, before looking at how I used them in your app:

Your app:
Editor:

Preview:

In your app, since you want to create two different lists (one for selected List of Furnitures, one for selected list of List of Utensils) based on whether something is ‘checked’, we need to use two different custom states for this (one will hold the list of Utensils that have been ‘checked’, and the other will hold a list of Furnitures that have been 'checked). So here’s how you’d set that up in the workflow:

Creating a temporary List of Utensils

  1. We start with telling Bubble that something should happen when the ‘Add Utensil’ checkbox is changed from ‘unchecked’ to ‘checked’, in a Utensil cell. To do this in the workflow, we just need to select “When an Input’s Value is Changed”

    Then we set the ‘When’ to look like this:

  2. Now we need to tell Bubble what needs to happen When that cell’s checkbox is checked. This is where custom states come in. We need to create a custom state on the page (test_page). What this means is that instead of adding and removing things in our app data – we’re creating a sort of ‘temporary list’ that’s stored on the page (not creating/changing any app data). The page will ‘remember’ a list of selected Utensils by doing this; it will automatically clear when the user navigates away from the page or refreshes the page. But we need to do this so the page knows which Utensils to add to the Kitchen Set’s List of Utensils, once the User clicks to create a new Kitchen Set.

  3. To create this custom state to hold the List of Utensils, we’ll go to Element Actions --> Set State and set up the following:

  • The element is “test_page” (the page).

  • The custom state is called “selected_utensils”, which was a custom state (List of Utensils) that I created by doing this:

  • The value allows us to add the cell’s Utensil to the “selected_utensils” List of Utensils.

Now we need to worry about what happens when the User unchecks a checkbox. To do this we need to create another event in the workflow which looks like this:

And the value will be:

Then you use that same process/logic to create a custom state which will hold a list of the selected Furniture.

Once that is set up, and a User is happy with their selected List of Utensils and their selected List of Furnitures, they can create a new Kitchen Set. In the workflow “Creating a New Kitchen Set” looks like this:

After a new Kitchen set is created, we want to add that newly created Kitchen Set to the Current User’s “List of Kitchen Sets” (a new field I created under the User because the User will be able to create multiple Kitchen Sets).

So here all we need to do is ‘Make Changes’ to the Current User, and add that Kitchen Set to their List of Kitchen Sets.

And that’s it! :slight_smile: I hope that wasn’t too much overwhelming info regarding custom states, but once you get the hang of using them, there are tons of amazing possibilities which open up in Bubble! It’s tricky at first, but after you create a few more practice examples using them, it will absolutely start to make sense! :+1:

4 Likes

Hi @fayewatson,
I’ve just been spending some time absorbing all of that info. The “State” issue is something I’ve been meaning to tackle because it seems that I see it everywhere. I’m going to bite into that a little later. Right now I’m focusing on the lists. The proper use of lists have confounded me as well; however, your examples have helped sort them out. Thank you for that!

As far as the “State” goes, just so you know, you lost me at “unique id <> Current cell’s Utensil’s unique id”

  • What is that?
  • What is Filtered?
  • How do you know when to use it?

Too many questions about it to ask right here, right now. Like I said, thank you so much for the info. Right now…hitting the lists. Later…on to the “State”.

Hey @williamacely I gotcha. That part is confusing! So to explain that, let’s use the Utensils, “selected_utensils” custom state as an example. For specifics, let’s say we just opened this page on your app, and we want to make sure when the User checks the box of ‘Silver Fork’, that it is added to the selected_utensils (our helpful custom state that is going to remember all the Utensils we ‘checked’), and when they uncheck it – it’s removed from selected_utensils.

So, we created a new Utensil here (Silver Fork)

Now we are checking ‘Add to Set’:

We checked that box and now it’s showing up below in our repeating group of Utensils:

And here we can see that that makes sense because that repeating group’s data source is our custom state: ‘test_page’s selected_utensils’.

This worked because of our Event in the Workflow which said: “When 'Checkbox Add Utensil’s value is changed AND ‘This Checkbox’ is checked” --> add the value of this Cell’s Utensil, to the “selected_Utensils” List of Utensils.

So now we have the ‘PLUS’ part down, but what about the minus? So we decide we don’t want that Silver Fork anymore; we go ahead and uncheck the box.

And now we have an empty list again:

This worked because of the Workflow’s Event we created using the ‘filtered’ and ‘unique id’ options you mentioned. There’s no Bubble option which says ‘remove’, though we have ‘plus’. The options ‘filtered’ and ‘unique id’ allow us to specify to Bubble that our “selected_utensils” list should remove a Utensil from that list if the checkbox goes from checked to unchecked. In order to make sure the Silver Fork is removed from our “selected_utensils” list we’re telling Bubble: the “selected_utensils” list of Utensils cannot contain any Utensils with the unique id of the “Current Cell’s Utensil’s unique id”. Every entry of app data in your app contains its own unique id (Silver Fork has a unique id, Silver Spoon has a unique id, Stainless Fork has a unique id, a User named Bob has a unique id – every entry in your app data). So to ensure that ‘Silver Fork’ is not in your “selected_utensils” list, we tell Bubble if a Utensil has that unique id, and their box is unchecked, make sure that is not included in our “selected_utensils” list.

In summary, you have two events going on:

  1. ‘When Add Utensil’s Checkbox’s value is changed AND This Checkbox is checked’ --> “plus” Current Cell’s Utensil to “selected_utensils”
  2. ‘When Add Utensil’s Checkbox’s value is changed AND This Checkbox is not checked’ --> “filter” the “selected_utensils” list so that it doesn’t contain any Utensils which have the same unique ID of that Current Cell Utensil.
4 Likes