In this lesson, we're going to learn about something called view properties, which are essential for enabling this behavior where we can click on one of our trips and have that trip’s information appear in a different view — in our case, a more detailed view.

What we need to do first is create a new view that will hold all the details about a particular trip.

So I’m going to head over to my app manager and create a new mobile view, simply called Trip. This can be a scrollable view.

Right away, I’m going to add an app bar to this view, setting it to be large.

What I want to do next is replace the app bar’s title with the name of the trip that we’re going to display within this view. This dynamic expression will need to change, and any other content on the page — for example, a text element — should display data like the trip summary dynamically.

Where do we get that trip data from?

To understand this, let’s step back a bit.

Think of the trip view like a device with a little slot — like a battery compartment. We’re going to “plug” a trip into this slot. This slot is a placeholder inside the trip view that will hold a trip from our database (of the trip data type).

Imagine the trip view has a little window or door on the side through which we can pass a trip from the database.

This is important because some elements on the trip view — like a text element showing the trip summary, or another element showing the trip’s date — will pull their dynamic data from this trip object that’s passed into the view.

This “slot” or “doorway” for passing data into a view is what we call a property. It’s a method that lets us provide data into a view.

Once the trip data is inside the view, we can use it however we want within that view.

Let’s jump into Bubble and see how this works.

With the trip view selected, click Add a new property.

Give the property a label — in our case, something like trip. You might have more than one property in the future, so naming is important.

Choose the property’s type — this is the data type the property will accept. Nine times out of ten, this will be a dynamic value.

The property’s type dropdown will show all your app’s data types and basic data types.

For us, we want to pass a Trip data type into the view.

There are some other options, but we’ll ignore those for now.

We don’t want this to be optional — we always want to require a trip to be passed in. So leave optional unchecked.

Click Add.

Now, if we look back at the app bar title, and modify its dynamic expression, we can access the property we just created.

For example, the app bar title dynamic expression will be something like:

Trip Details's trip's name

This means we’re accessing the trip property inside the trip details view, and then unpacking the trip’s fields (like name, summary, date, etc).

Since a trip is just a collection of fields, we can use these fields anywhere inside the trip view.

Now, let’s connect this to our trips list.

In the trips view, we have a vertical list showing trips.

When the user clicks on one of these trip entries, we want to open the trip details view and pass that trip into it.

Select the vertical list item (the single trip entry), add a workflow, and use the navigation action: Go to view.

We want to open the trip details view in a stack so the user can use the native back functionality to return to the previous screen.

Select the trip details view.

Now, here’s the magic — once you select this view, you’ll see the property input field for the trip appear.

We need to tell Bubble which trip to pass to this property when navigating.

Since this workflow is triggered by clicking on a trip item inside the vertical list, we have access to the Current item's trip in this context.

Set the property to Current item's trip.

If you don’t fill in this property, Bubble will show an error because this property is required.

If you want, you can make the property optional by ticking the checkbox on the trip details view property settings, but generally, it’s good practice to make it required so that you don’t accidentally open the trip details view without a trip.

To test:

You should see the trip details view open, and the app bar title update dynamically with that trip’s name.

If you have other elements in the trip details view, like a text element showing the trip summary, they will dynamically display data from the passed-in trip.

Make sure to add some test data to your trips in the app data tab to see this in action.

That’s view properties in Bubble — a simple yet powerful way to pass data into views so they can display dynamic content.

In the next lesson, we’ll tidy up our trip details view and learn a neat trick for designing new views like this in our mobile app.