Things and List of Things confusion

Hi,

I finally managed to wrap my head around on what things are but I’m having trouble making the connection to list of things.

Reading around, it looks like create some sort of relationship between two different data types. I am confused as to how I can go about doing that and showing it in bubble.

For example, let’s say I have data type: Color and data type: Fruits. I know for Color, I will need a field name called: Color. For Fruit, I will need Name of Fruit.

How do I go about showing the following in a repeating group:

Color - Red
Fruit - Apple, Strawberry

There are some forum apps I’m trying to learn from but it looks like they no longer work :confused:

Hi @sizzily86 :slight_smile: I had a really hard time getting the hang of this, but it definitely gets easier!

I would definitely create two data types for color and fruit (as you did), and set them up in this way:

Fruit Data Type:


Here there are two fields:

  1. Color (type: Color, list: no) stores the Color piece of data (or Thing) connected to this fruit.
  2. Name (type: text, list: no) stores the name of the Fruit

Color Data Type:

  1. Name (type: text, list: no) stores the name of the Color

Then in the app, you can set up workflows which create a new Color Thing:

In this workflow, the User would enter a color name into the input and click save to create a new Color Thing:

The workflow to create the new Color thing saves the text value ‘Red’ to the ‘Name’ field of the Color:

And in the app data it looks like this:

Then we want to associate the red Color Thing (or table row) with different fruits in the app. To do this, we can use a dropdown which does a Search for all of the Colors in our database, and displays the Name field of each Color (so the choices would look like Red, Green, Blue, Purple - if we created those Colors).

Here the User can first enter the name of a Fruit (such as Strawberry), and the dropdown will search for all of the Colors in the database. Since we only created one Color Thing so far (for Red), it will only allow us to pick Red from the dropdown:

The workflow to save the new red strawberry Fruit Thing is:

Here the text input where we typed ‘Strawberry’ is stored to the Name field, and the Color dropdown where we chose the red Color Thing is saved to this new Fruit’s Color field. In app data it will first look like this:

This looks confusing at first glance because we might feel like the Color column for the strawberry should just say ‘Red’ instead of that very long number. That long number is the red Color Thing’s unique id. Every ‘Thing’ we create is automatically given a unique ID, and that ID links the Red Color Thing we created, to the Strawberry Fruit Thing we created.

We can tell Bubble to display the Color’s Name field, instead of the unique ID field by going to Primary Fields → Color → Name:


After clicking save, the fruit app data will now show the name of the Color, instead of its unique id (proving that we linked the color to the fruit):

Last but not least! We can query the data in a repeating group in two ways:

One way would be to Do a Search for Fruits:

The text elements within the cell display the Current cell’s Fruit’s Name, as well as the Current cell’s Fruit’s Color’s Name:
The dynamic data is:

And in preview mode, for Strawberry it looks like:

The second method would be to have a repeating group which does a search for Colors:

Similar to the other repeating group setup, the cell is displaying the Current cell’s Color’s Name. To find the fruits associated with each Color, we can place a text element which Does a Search for Fruits, whose Color = Current cell’s Color:

And in preview mode with the Color Red, and strawberry, it will look like this:

Then if we wanted to add another fruit ‘Apple’ through the create a new Fruit form, the differences in searches would look like this:

So, those are different setups but similar results! :slight_smile: Here a link to the example app if you’d like to view the workflows or add a few more colors and fruits in preview mode:

Preview:

Editor:

I hope this wasn’t too overwhelming - If anything was confusing, please feel free to let me know and I’ll definitely try to explain more clearly! :slight_smile:

14 Likes

Excellent explanation. How about continuing the example to show adding a list of associated fruits in the color table?

2 Likes

@fayewatson, Thanks for the excellent explanation. Things are are a lot clearer now.

In an attempt to understand and take things to the next level, I am trying to make Bubble create this list with the same structure:

Groups

Per your suggestion, I created two data types:

  1. Fruit
  2. Grocery

In the Fruit Data Type, I have a field called “Name”
image

In the Grocery Data Type, I have five fields:
image

Then, I lay out my data entry form like this:

and I would put the following in my workflow:

Adding the inputs to Grocery:

Adding the inputs to Fruit:

Linking the Grocery data type to Fruit data type:

Everything seems to work just fine when I look in AppData:

But I am unsure how to layout the RepeatingGroup that replicates the same format as the excel image I posted.

1 Like

Wouldn’t the expiration data belong in the fruit table since it expires per fruit not where it’s stored or who has it?

1 Like

Yes, if this was an actual application. I just threw together a bunch of example to try and understand relational databases work in bubble.

2 Likes

@gnelson Great idea and point! :slight_smile: Will do!

@sizzily86 Awesome! :slight_smile:

I think that’s a really great idea to first get the hang of setting up, and querying data types and fields through an RG. I think I did it this way too!

One thing to mention, in the Fruit/Grocery example, you may have already done this but I would change the ‘Fruit’ field, to be a single Fruit, instead of a list of Fruits - inside the Grocery data type. I also changed it to GroceryItem (just incase that helps see that each GroceryItem as a single thing, not multiple Groceries stored within a single data type). This is because Date of Purchase, Expiration for that GroceryItem’s Fruit Purchased, and Stored Location will probably pertain to one specific GroceryItem purchased (as its reflected in the Excel sheet you already have).

In summary, each GroceryItem will be associated with one type of Fruit (in the Fruit field), but each Fruit could be associated with many different GroceryItems, since anyone can buy the same type of Fruit, on different dates, and store it where they prefer. To show how lists work, we could also choose to store a list of GroceryItems on the Fruit data type:

This way, if we had a GroceryItem form like this:

The first action in the workflow creates the new GroceryItem Thing:

Then the second action, adds the new GroceryItem Thing, to its Fruit’s Thing’s list of GroceryItems field:

So for the row where Peter bought an Apple, this would be entered into the inputs:

And the row for where Bob bought an Apple would be:

Those new GroceryItem Things are created and look like this in app data:

Then we can also see that those two GroceryItem things were added to the Apple Thing’s GroceryItems field (which is our List of GroceryItems):

Here we see two long unique IDs in the GroceryItems field. This is showing that we’ve connected the GroceryItem Things for Peter and Bob, to the Apple Fruit Thing successfully. We can double-check this by changing the Primary Field View for the GroceryItems to be the Buyer’s Name:

And then this will show:

Now for displaying all of this information in the repeating group. Here we can have two different setups:

  1. This setup uses two repeating groups. The outer repeating group does a search for Fruits:

And the inner blue repeating group, does a search for the GroceryItems connected to that Fruit. We need two repeating groups because we have multiple Fruits to be displayed (on the outside), and then we want to show multiple GroceryItems, inside each Fruit’s cell. The data setup for the inner repeating group would be:

Then in preview mode, it looks like this:

In the Strawberry first cell, there are no GroceryItems to display in its inner repeating group, because there are no GroceryItems connected with the Strawberry Fruit Thing in our database.

In the second Apple cell, there are two GroceryItems to display in its inner repeating group, because Peter and Bob both bought Apples.

In the third Pineapple cell, there is one Grocery Item to display, because John bought a Pineapple.

  1. The second option setup is almost exactly like the first, with the only difference being about with how the data is queried in the inside GroceryItem repeating group.

Here we’re still doing a Search for Fruits on the outside repeating group:

And the inside repeating group displays each Fruit’s list of GroceryItems, using the expression ‘Current Cell’s Fruit’s GroceryItems’:

In preview mode, both setups produce the same results:

Editor:

So this probably isn’t the best example for understanding when to use a list of things and when not to, but I remember that this Twitter example really helped me in the beginning:

In it Vlad explains an overview of his data structure extremely clearly, and when lists of things were used.

Then, this thread is also really awesome in explaining when to create ‘join tables’ in Bubble as well (ignore my posts there and look for Nigel’s!):

Let me know if you have any questions! :slight_smile:

6 Likes

@fayewatson

Thanks for taking the time to explain things in such clear detail. I now have a much better understanding of how databases work!

3 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.