In the last lesson, we learned how we could retrieve a single thing — a single trip in our application — from the database and display it on our interface like this.

But in this lesson, we're going to learn how we can display multiple entries from our database.

Now, a group like we set up previously can hold a single type of thing, but to hold multiple entries of a data type, we need to have some kind of element that can display multiple things.

Our trips view type right now is scrollable, so we actually have a specific view type called a vertical list.

A vertical list gives us this element here — Vertical List A — which you can see here on the canvas and also over in the elements tree.

A vertical list, just like a group, can have a type of content, so we could set this type of content here to be of type trip.

Then, for the data source, we're going to do the same kind of search that we did in the last lesson.

We do a search for and we're going to search again, of course, for trips.

Notice here when I click off the search, that it's automatically blue — so this is a valid expression because what this expression evaluates to (as we call it, what this expression gives us) is a list of trips in the database.

Specifically, this kind of search is just going to pull out all of the trips that we currently have in our database.

And what it's going to do is display them within this vertical list.

Now notice how I can't click anywhere around in this list apart from this first item, this first item here.

And in the elements tree, you can see that this is reflected as well.

We've got this vertical list trip — that's the vertical list element itself — and then inside we have something called a vertical list item.

Inside of that, Bubble has just given us here a text element as a starting point.

So what we're going to do here is treat this vertical list item as our template row.

Any changes in the design of this first row, we're going to see replicated in all of the other rows.

Just to show you what I mean, if I just change the text of this list item to say example, we see how all of the other entries in this list now reflect that change.

If we go and preview this, you'll immediately see that we have four entries appearing here in this list.

They all have this static text.

But of course, where this becomes interesting is where we don't display just some static text; we display text that is dynamic to the content underneath.

We're able to do that because if I grab this text element and insert dynamic data here — just as we did in the last video — we're able to access the data that's living in my parent container.

In the last lesson, we saw the parent container was a group, right?

The group was holding onto a trip, and that meant any of the child elements inside could extract or unpack any of the values from that trip — like the title or the start date.

Well, we have the same thing going on here, where we have something called the current item's trip.

If I select that now, we've got the current item's trip.

If I deselect this, this will be invalid because what we're trying to do here is push a data type through a text element.

We're telling the text element to display this data type, but a data type (as we've already described) is a collection of fields, a collection of data points.

So it doesn't make sense for us to push an entire trip through this text element.

We have to choose what field — what data — we actually want to display in this text.

The logical thing for us to do here is to display the current item's trip's title.

That's what I'm going to choose here.

If we look at our preview again, you see that all of the trips that we have in our database are now appearing within this vertical list.

We can continue now to refine the design.

Let's say I want another text element in here.

So I'm going to drag that in.

It looks like our vertical list item, by default here (if we look at the layout tab), is set to be a row.

I'm actually looking to have my two text elements be stacked on top of one another.

So what I'm going to do is change the container layout here to be a column layout.

You may run into the same behavior here where one of your text elements just collapsed down to nothing.

That's just because it doesn't have fit height to content toggled on.

If we turn fit height to content on, then the text element will adjust its height to fit the text content within.

Remember back to our lesson about design and layout.

I can drag this in the elements tree to go above, and I can also hit the next and previous buttons to change its position.

Let's make this top one here a very small heading to make it pop a little bit.

Then the text underneath can be the start date, let's say.

I'm going to set this equal to the current item's trip's start date (for date specifically).

We have this operator that lets us format the date in a particular format.

If I click that, you see right now this is the default of how it's appearing — with the month, day, and year all double digits.

We've got a few other options here, and we can even create our own completely custom format.

For now, I'm just going to stick with this one here, which is the full month (not the abbreviated month).

If I refresh this, we're getting that behavior.

Some of our trips don't have start dates in them, and that's okay because in this application, we're actually going to force users to add a start date eventually, so I'm not concerned about this right now.

Then, if we look at the reference look that we're trying to go for here, we've got this kind of gray background.

I think I want to go for that as well on my trips page.

So I'm going to set the background color here to my background color style variable, which, as it turns out, is currently white.

I want to make it that slight gray.

So I'm just going to make a slight adjustment here within my style variables.

We actually have a spectrum of grays that come out of the box with our Bubble app.

I'm going to copy this very light gray and paste that in for the background value here.

That's going to give our page this slight gray background.

I do want my trips themselves to be within a white container like this.

So we're just going to make some slight design adjustments here.

I'm going to grab this vertical list item and give it a background style.

I'll change this to be a style variable and map it to my surface style variable, which is a white color.

I'll give it a roundness of eight.

Now, we haven't really talked about this yet, but when you're choosing values like roundness or font size, you generally want to be using values that are a multiple of eight, sometimes four for really small values like really small text.

You can use something like 12, which is a multiple of four.

This utilizes something called the four or eight-point grid, which is a common convention in web and mobile design.

It gives a really clean and easily divisible scale to work in.

You're not choosing arbitrary values, so you avoid a random mismatch of sizes throughout your application.

You're limiting the scope of your design decisions, which makes it easier to keep an interface that looks clean and orderly.

If you want to learn more about this, I'll leave some links to resources in the description for this video.

Now, if we preview this, our gray background isn't really visible.

That's because we don't have any padding or space between the entries in our list.

So on the vertical list trip element, I'm just going to add here a value from our eight-point grid: 16, which is convention for the padding around the edges of elements on mobile.

I'll also add a value here called list item gap spacing.

This behaves very similarly to the gap spacing setting we've already covered — it just adds a little bit of space between the entries we have here.

The only thing I want to turn off is the separator.

You see we've got this hairline separator here.

You can choose to have it be a specific width, change the color, have it go the full width of the page, or have it inset by a certain number of pixels.

I'm actually going to turn this off for now entirely.

Just note that at the time of recording, because this mobile editor is still in beta, this gap spacing setting will not work unless you also have some kind of separator.

The workaround right now is to add a separator (doesn't matter if it's full or inset) but keep the width to zero so that it doesn't show up at all.

That also means the color doesn't matter.

That will enable the gap spacing setting.

What we might also want to do is add a little bit of space between this top app bar and the start of the list.

You can do this by just adding a little bit of padding to the top of the vertical list.

Now, what about our form for creating a trip, which we lost when we converted this view type from scrollable to a vertical list?

Well, in the app we're building, we don't actually need this form above the feed because we're going to have this little floating plus icon that allows us to create a trip.

But if you did want to have something sitting above this vertical list, if you select the vertical list element, you'll see a little icon that says Add list header group.

If you tick that, it'll create this little blue space.

What you can do — and what I recommend — is put a group inside of here.

This group then becomes your header, and you can put anything you want inside.

You could recreate that input group if you wanted.

So this could be an input for the trip title, and maybe you put a button underneath with a workflow, just like before, to create a new thing (a trip) with a title value set to the value of that input.

You should rename this input (you can right-click it if you see it in an expression and hit "Reveal element" to find it quickly), and then rename it something like input trip title.

That would let you have this kind of behavior — for example, adding grocery items to a grocery list — which can work well for simple things.

If you select the vertical list element again, you can also add a footer element in the same way as the header.

Just place a group in there, and this can be your footer.

In our case, I'm going to delete both of these because we don't need them — we'll be adding the floating button to create a trip just like in our final design in the next few lessons.

Well done! That’s the end of the first chapter.

You’ve just learned the most important parts about building mobile apps with Bubble:

These are the most foundational pieces.

We’ll be building on top of this as we start fleshing out all the different screens and logic in our mobile app — including the ability to log in and sign up users.

I’ll see you in the next chapter!