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

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: Forum_app2 | Bubble Editor 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