Livewire Multi Step Forms
This episode is for members only

Sign up to access "Livewire Multi Step Forms" right now.

Get started
Already a member? Sign in to continue
Playing
11. Adding a step navigation component

Episodes

0%
Your progress
  • Total: 1h 38m
  • Played: 0m
  • Remaining: 1h 38m
Join or sign in to track your progress

Transcript

00:00
OK, since it's not super easy to prevent users going to the next step when they are not allowed to, like product image, we don't have a product here, so this just isn't going to work when we try and save an image. We're actually going to go ahead and disable the top navigation button and we're going to create a better navigation at the bottom where we can go back, but we can't go forward unless we actually submit the form.
00:24
So you can see here that we've got errors when we navigate. Let's go ahead and disable that now. So I'm going to head over to the navigation component within our product create section, and I'm just going to change this button over to a div and I'm going to get rid of the wire click.
00:37
So I'm not going to get rid of it. So you've got it as a reference. I'll just comment it out. So we can't click on each of these now, but at least we can see the steps that we're on.
00:46
OK, let's create out a little component in here which we can easily inject in our submit and back buttons. So we'll do pretty much the same as we did with our navigation. So let's come down to our product create section and let's create out a buttons.blade.php file and have this as our sort of wrapper. So let's create out a div in here.
01:05
We want two divs inside of here. This is going to be the submit button and this is going to be the back button, but only if we inject this in. So within this component, let's allow a prop to be passed in here, which is going to be a back section, and then we can just inject this directly into here.
01:25
Now, we could do an if statement around this, but the way I'm styling this up, I always want this submit button on the right hand side and I want the back button on the left if it's available. So I'm not going to add an if statement around that div. OK, so for the overall class here, let's say flex item center,
01:40
justify between them two buttons set apart and we'll add a padding on the top and we'll add a border on the top. So we get a little bit of spacing and we'll also set a margin on the top as well. So that should give us a nice button navigation. OK, so we can add this now to any of our steps over in our meta step.
01:57
We can go ahead and pull this in down here and we can inject our primary button into this main submit section. OK, so we're going to go ahead and say X, live wire, product, create, and then we have our buttons component like so. This primary button will go into our main slot. So let's pull this up into here.
02:18
And at the moment, let's just have a look at that. We get this submit slot here, which we're going to add as a slot in a moment. And then we have our back button here, which we can inject into in our other steps. So to get that main slot, all we need to do is just output the slot variable and then that will be put directly into there.
02:36
So looking a little bit better. OK, so let's go and create a product. Of course, we don't have this in our next step, but we can pretty much take what we've already done here and we can put that into our image step. So let's open that up and pull this down in here.
02:52
But we do want a back button in here. So to do this, we want to specifically target that back slot that we created and we can end that off there. And then we could do something like a secondary button, which also comes with Laravel Breeze. So we can create this out and just say back.
03:10
And that's going to look something like this when we get over to that next step. And let's try that again. And there we go. So we can click back to go back to the previous step.
03:21
Now, how do we do that? Well, we already know how to do that. So we can just add in a wire click on here and just invoke previous step. We don't need to do anything specifically to go back to the previous step.
03:31
But if you did, you can invoke a method on any of your components to do maybe some clear up and then navigate directly within your component. But for now, we just want to go back to the previous step. OK, let's try this out. So let's enter some information.
03:44
And there we go. We can hit back and that will take us back to the previous step. Now, when I click next step, that's where the problem comes in because our submit method for this form creates a product. So at the moment, what's going to happen is when we hit next step, that is technically then create another record in the database.
04:02
So just by going back and then forward again, that has created another product. So it's all of these things. This is why multi step forms are so complex. You need to think about all these cases and then just build them in as you go.
04:15
So we've got a nice component here to go back to the previous step. But now we need to talk about this first step and how we can get around this. That's pretty straightforward to do. So let's do that in the next episode.

Episode summary

In this episode, we focus on improving the navigation for our multi-step form. Instead of having the step buttons at the top—which could let users jump forward when they shouldn't—we're disabling those and building a dedicated step navigation component for the bottom of the form. This gives us better control: users won't be able to proceed to the next step unless they submit the current step's form, but they can still go back whenever needed.

We start by editing our top navigation and making sure it's no longer clickable. Then, we create a new bottom navigation component, buttons.blade.php, which will house our Submit and Back buttons. We go through how to structure this so the submit button is always on the right, and the back button (if available) appears on the left. This layout uses Flexbox for styling, and we add some spacing and borders for a clean look.

Next, we update our form steps to use this new component, passing in the appropriate buttons for each step. You’ll see how to inject a "Back" button only where it makes sense, and wire it up to return to the previous step.

Finally, we run into an interesting issue where going back and forward again creates multiple records, illustrating the challenges of building robust multi-step forms. We wrap up by previewing the next episode, where we’ll address how to prevent unintended submissions in the first step.

This is a practical episode: by the end, you’ll have a reusable component that handles navigation between steps in a user-friendly way!

Episode discussion

No comments, yet. Be the first!