It's time to put what we learned about modal and stack navigation into practice now.

So, what we're going to build is this flow here where a user can open, on the stack, their signup form. They'll then be taken to the Trips tab, where they can open a modal to create a trip.

So, let's dive in.

We're going to start with our create trip modal. What I actually have to do is create a new view here, which is going to be this create trip for now — we can always rename this later on. It's going to be a scrollable view as well.

What I'll do here is enable the top app bar. If I right-click on this expression here and clear it out, then I can just write in here what I want the header bar to say. The only thing that I'll do here is create one text element to act as a label for our title input, and I'll add the input itself as well.

If I clear out the placeholder text, this will be our input title. I'm going to leave this for now — we're going to come back and finish off the design here in a subsequent lesson. But for now, all I want to show you is how we actually trigger this view as a modal.

What we do is, on the element that we want to launch this view, we're going to add a workflow. The action that we're looking for is under Navigation → Go to view, and this is where we then choose how we want to navigate to this view.

Of course, if you remember in the last lesson, we've got the option of a stack or a modal. In this case, we're going to do it as a modal. Now we choose what view we want to open as a modal, which of course is the create trip view.

How this looks, if we go and test this, is when we click on our plus icon here, you can see that view is now opening as a modal — which we can, if we grab the top of the view, actually slide down with our finger.

Back inside of the create trip view, you'll notice that we actually have the back button setting enabled. However, we don't see a back button on our modal, and that's because the back button only appears when you navigate to a view within a stack.

What we can actually do is create our own close button for this modal. I can add here either a leading button or a trailing button to the app bar. I'll add a trailing button here. If I set the label to be, let's say, "Cancel," and the color to just be text, you can see that that's going to add a button on the right side of our app bar title.

That's what's meant by trailing — it's coming after everything else in this app bar. Leading is coming in first, before everything else. We could add a leading one as well, just to show you what that looks like.

The back button on this view won't appear if we navigate to this view as a modal. This is how, realistically, it would look. We'll just get rid of this leading button as well.

Then, on our cancel button, we can actually add our own workflow to explicitly hide the modal. We simply do that by going under Navigation → Go to previous mobile view. That is just going to hide this modal.

If I go back into Bubble, try to refresh the preview by shaking my phone — you'll see I'm not actually able to view that reload button. What you have to do is close the modal first, then give your phone a shake, and then you'll see that context menu pop up.

Let's test this again. I'm going to open up the modal. I can still drag from the top, but I can also hit that cancel button to just close it with one tap.

We're going to flesh out the rest of this form in the next lesson, but I want us to get on to showing our signup form here in a stack.

What I'm going to do is create a new view here called signup. I'm going to set this to be not scrollable — for reasons that will be apparent in just a moment. We're going to design this form properly in the next lesson. For now, I'm just going to add a group onto the page, which is going to be our group form, and just put a couple of inputs in there to suggest what is coming.

This is going to be our email input, and I'll add another one underneath for our password. The only other thing that I want to do here, if I collapse this group form, is add a button onto the view, which we'll label "Sign up."

This is the reason why I wanted this to be a not scrollable view — because I want this button to be locked down at the bottom of the view. I can do that with a not scrollable view by setting the layout to be "space between," and that is then going to push whatever elements are inside of this view to opposite ends of the view, assuming that there's only two elements within this space-between layout. If I was to add another one, it would just hang out here in the middle.

All I'm going to do to navigate to this signup view is, from our main homepage, change the workflow currently attached to this button. I can view that workflow that already exists by hitting Edit workflow with the button selected — that's just going to take me, as a shortcut, straight to the workflow in question.

Now, rather than us using this "go to tab" action — which I'm going to delete by clicking on the three dots and going "Delete action" — I'm actually going to add a new action under Navigation → Go to view.

This time, of course, we're going to be navigating in a stack, not a modal, and the target view is going to be signup.

What this looks like now is I can hit Get started and open up that signup view in the stack. If I actually drag with my thumb here from the left side of the screen — see how I'm sliding off the top card in the stack, or rather the top view in the stack — that's something that's only possible with stack navigation.

I can also let the user go back to the previous view using a back button. If I enable the top app bar, then that back button here will become automatically visible.

Note — that's going to default to showing the title of the previous view in the stack, which of course is the home view. But you can override that label by ticking this checkbox and just having that be whatever you want.

While we're here, let's just replace this title by right-clicking, clearing it out, and saying something like "Create your account" as a little bit more of a clear call to action.

Now, let's see when we navigate to the signup view in the stack — see our title sitting at the top and our overridden back button there as well.

So, we got some basic navigation structure. In the next lesson, we're going to learn how to build a form — a form that looks good and that's functional. We're going to do that for both our signup form and our create trip form.