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
03. Creating a wizard and steps

Episodes

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

Transcript

00:00
So the first thing that we want to do is create out a wizard and then a bunch of steps underneath that. So that's pretty much the terminology here. We create a wizard component which will show each of our steps
00:11
and then each of our steps are responsible for showing what that step has. So if we head over to the Laravel Livewire wizard package, what we really need to do in terms of the documentation here is just look at the installation instructions. So I'm going to go ahead and grab the package
00:25
and then I'm going to walk you through everything you need to know about this. So let's go ahead and pull this package in and once we have done that, we are pretty much ready to go and start creating our first component. So we just want to create a normal Livewire component here.
00:39
So let's go ahead and make the first example, which is the example of creating that thing. Now I'm literally going to call this thing because I can't think of a better example. So we're going to go ahead and create this now. Now what I want to do, especially when I'm working with multi-step forms,
00:53
is really think about the directory structure here. We don't just want to create a standard component anywhere. We want to make sure that this is structured really nicely so we can easily find the base wizard and also find each of the steps.
01:06
So if we think about this, I kind of want to put this in a directory like things and then create and then the thing. Now I've already got some history here from what I've already done, but let's go and create inside of a things directory.
01:22
That's the thing that we're creating. A create directory because we might have another multi-step form to update something and then inside of here, we'll create a create thing component. So let's do that first of all.
01:35
Take a look at the directory structure and this will start to make sense when we eventually get to steps. So if we look inside of our Livewire directory here, we've got things, create. We know that all of these steps are responsible for creating
01:46
and we've got create thing. So let's go ahead and just get this on the page. So Livewire now because we've done this we need to go into things, create, create thing and we should be good.
02:00
Let's just update our template just so we know that this is working. And there we go. So that's the structure that we're going to follow for all of the examples here. I just find it makes it really easy to find stuff.
02:11
Okay. So now that we've done this we need to create this as a wizard. So let's go over to the main create thing component. So the actual Livewire component here. And instead of extending the base Livewire component,
02:25
we're going to extend the wizard component from this package. Now when we do this, you can see that my editor is telling me here that I need to implement a method here. It's not giving me much information.
02:36
The first thing that we can do is just get rid of the render method because we don't need an overall render method for our entire wizard. Each of the steps are responsible for rendering. Now inside of here, what we do need is a steps function which returns an array.
02:51
So we could even go ahead and type in that in there. Now we're going to return an empty array here just for now, just to get this working and let's head over and give this a refresh. Okay. So we didn't get any steps.
03:04
It's telling us this package is telling us that we haven't returned any steps. So our next job is to create out a step. So let's go ahead and do that. And again, this is going to be exactly the same thing.
03:13
It's just going to be a live wire component which extends a specific class. So let's think about our directory structure. We've got live wire things and create. I want all my steps to go in a separate directory within this,
03:25
just so I can easily access the steps and it doesn't get confused with this main component. So let's go ahead and do the same thing, but let's create out our steps and let's choose the name of our first step. So this is going to be the title step.
03:39
So we're going to set a title, a description and then we're going to have a final review step to review what we've done and publish it. So let's create a title step and while we're here, let's just create all of these just so we can switch them all over together.
03:51
So we're going to have a description step and then finally we are going to have a publish step. So let's create that out as well. Great. So we've got three steps that we can play with here.
04:01
So let's go over and just have a really quick look at our directory structure just so we are 100% clear. You can see here that under steps, I've now got these steps very easily accessible and the same thing obviously with the templates here as well. Okay. So now inside of steps, what I need to do is just give the fully qualified class name.
04:19
We don't need to new these up to each of the steps. So we know that we've got a title step. So let's bring that component in here and grab the fully qualified class name for that. We'll do the same thing for our description step as well.
04:32
So let's go ahead and just fill this in description step and let's find that. Great. And then of course our final is our publish step. So let's pull that in as well and of course make sure you import these at the top as well. Okay. So now that we've got our steps, let's give the page another refresh
04:48
and sure enough we've got another helpful error. So a valid step component should extend the step component. That kind of makes sense. We want all of the functionality of a step. So let's go over to our title step and we're going to extend this step component class from this package
05:04
and we'll do the same thing for each of our steps. So let's do this for our description step and we'll do this for our publish step as well. So that is step component and we're pretty much done. Let's head over give this a refresh and there we go.
05:20
So what we've now successfully done is created a wizard with each of these steps and all of the functionality is now within the wizard and each of the steps. So let's go ahead and just fill in our first step just with that title input and then we can move on look at how we navigate between steps.
05:37
So over in the title step component, we just treat this like a normal live wire component. There are some very specific things within this package. We need to watch out for like the state that it stores, but let's go ahead and just create out a string in here called title.
05:51
That's all of the information that we want to capture for this first step. So we're not going to add validation just yet. We'll do that in a minute, but let's go over to our title step component and we'll just fill this in again like we normally would. So I'm going to head over to the login page
06:05
and I'm just going to borrow some of the components that we already have for our inputs in here. So let's just grab all of these we can go ahead and put a form directly in here or we could make this whole thing a form. It doesn't really matter too much. Let's just pop this in here tidy up and we should be good to go.
06:22
So let's pull all of this stuff in and we'll just group this together. So it's a little bit easier. So this is going to be the title we can change the value over here. This is going to be for the title. We're going to have a type of text and a name of text and we'll get rid of required
06:39
and we'll get rid of autocomplete there as well. And of course for the errors, we're still going to be validating here. So we'll make sure that we have our errors in there. Okay, so type of text name of title
06:49
and I think we should be good. Okay, if we head over there we go. There is the content in our first step. Great. Okay. So next up, let's just add a really simple button. So again, we'll pull this in from the login page just
07:01
so we don't have to write anything out manually and let's go ahead and say next step and we'll get rid of this and we should be good. There we go. Okay, we'll space things out and then we're pretty much done here.
07:14
We won't spend too much time on this. So let's say space Y of 6 and there we go. Great. So we've got our title in here, but at the moment we can't navigate between steps.
07:26
Now there are a couple of ways that you can navigate between steps. We're going to be looking at the way that we do this programmatically directly from the component now and later on we'll look at how we do this
07:35
with the navigation that we saw at the top. But the goal here is to click next step and just go to the next step. So let's cover that in the next episode.

Episode summary

In this episode, we dive right into building a wizard for multi-step forms using the Laravel Livewire Wizard package. We start by installing the package and setting up the basic structure for our wizard, thinking carefully about how we organize our components and directories – this makes managing multiple steps and complex forms way easier in the long run.

We create our main wizard component and a few step components (like Title, Description, and Publish) to break the process up into manageable parts. You’ll see how to wire up the wizard so it knows about each step, and how to extend the proper classes so everything works seamlessly under the hood.

After getting the basic navigation skeleton in place, we build out the first step by adding a simple title input form, reusing input components we've got lying around so we’re not reinventing the wheel. The episode wraps up by adding a basic “Next step” button, teeing things up perfectly to cover step navigation (both programmatic and UI-based) in the next episode.

By the end, you’ll have a solid, practical starting point for building multi-step wizards in your own Laravel projects!

Episode discussion

No comments, yet. Be the first!