In this lesson, I want to introduce you to what is probably the most important Bubble feature.

It’s a feature that you're just going to be using everywhere and that we're going to rely on heavily in the building of this app together.

If I click on this text element, which we have on our account tab here, you may have already noticed this.

If I click into some areas within the editor, like this content area of the text input, you see we've got this little button that appears: Insert dynamic data.

Now, this little guy here is the “B’s” and he’s the heart of Bubble.

When you click this, what this allows us to do is pull in some—what we call—dynamic data from some place where we don’t know ahead of time what that data is going to be.

And we can use that in other contexts in our application.

So, for example, in this text element, I can pull in something like the current date and time.

And dynamic data always shows up like this in this blue color.

So this isn’t some static value, right? Like current date time.

Okay, this is a dynamic value that’s going to evaluate, as we call it, to a particular dynamic value.

So if I load up this account page, you'll see here that I am getting the current date and time, right?

If I was to load this app tomorrow, it would say May 21st.

So this is what dynamic data is, and we're going to be using this in so many different contexts—text as we build out this app.

Now, one of the places where we can use this right away is in something called the top app bar.

So for every view that we create, we can toggle this top app bar, and that is going to create it here within the elements tree.

And we can see it, of course, here on the canvas too.

Now, when we click this, notice a couple of things:

If we go and we load up the preview version of our app here, you’ll see here: here is our title for the app bar.

It is pointing to the current view's title.

And that current view title happens to be something that we can control very easily by opening up the property window for the view.

And you see here that we've got this view title: “account.”

If I change this to “Account” capitalized, then in my account page, you see that this title has changed.

Now, when you have dynamic data—so let's say that the view title is still “account” with a lowercase—what we can do with dynamic data, if we click into it, we'll usually see this little “more” area appear.

If we click onto that, this gives us a list of what we call operators.

And all an operator is, is some kind of manipulation or evaluation that we apply to the preceding part of the expression.

So for example, we've got this current view title.

I could choose here to make it all uppercase.

So notice here how the current view title, which we set here within the account page, is all lowercase “account.”

But how we're displaying it within the title of our app bar is that current view title but uppercase.

So if we load up the account page, you'll see that indeed the title is all uppercase.

So I'm not going to go much deeper than that for now because we're going to see this dynamic expression in a lot of different contexts in the app.

And that is the way that you're really going to learn how to use it.

So I'm just going to change this back to the current view title and set the view title here to “account.”

And the only other thing that I'm going to do here is do the equivalent change on my trips page.

We're going to set up the top app bar that again is set to the current view's title,
and I want to make sure that the current view's title is with a capital “T” there.

And the one change that I'm going to make on this trips view is I'm going to change the style of this title here from center on iOS to large.

So these titles will actually appear using the system styling of the device you're using, which will be slightly different on Android or iOS.

Alright, so if you've got either of those devices, you can test this out to see how these appear.

I'm going to show you now on my iPhone.

So I load this up, go through to my trips page, and you can see here how this title header is appearing here.

And it's going to look slightly different if I open the account view, and that's because on our title view we set the title style on iOS to large but on the account view we set it to be centered, and that's reflected in the slightly different styling there for this top app bar.

Now, because this app bar uses native navigation functionality of the device, it sticks to the top of the view.

And you can see here on a later version of our application how this title just automatically snaps to the middle of the app bar on iOS as the user scrolls.

So there's sort of nice little animations like this that have this native feel to them, which encourage us to use the top app bar when we can.

But enough about design stuff, I hear you.

In the next lessons, we're going to get into what is probably the most exciting part about Bubble, which is the ability for us to save data from users within the interface of our mobile app and then display that data back out or do some processing to that data.

So I'll see you in the next lesson.