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
01. Introduction and setup
02. Basic multi step forms
03. A practical example
06. Creating the product wizard
4m 32s
0%
07. Adding top navigation
10m 37s
0%
08. Creating the record up front
4m 14s
0%
09. Using custom state
8m 33s
0%
10. Uploading a product image
6m 15s
0%
11. Adding a step navigation component
4m 27s
0%
12. Handling backsteps
3m 44s
0%
13. The final step
6m 12s
0%
14. Handling more complex backsteps
10m 38s
0%
15. Dealing with specific state issues
6m 26s
0%
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.
15 episodes•1 hr 38 mins•1 year ago
Overview
Everything you need to build multi step forms in Livewire.
We'll cover the basics of creating a multi step form, adding steps, navigating steps and accessing state using the laravel-livewire-wizard package.
Finally, we'll build a fully working practical example with more advanced step navigation, file uploads, and custom state.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!