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
09. Using custom state

Episodes

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

Transcript

00:00
So when we looked at the basics of our multi-step form
00:04
and looking at gathering state, we saw that it got very slightly complicated when we wanted to pluck out lots of different things from multiple steps.
00:12
So it's going to get even more complicated when we've got a product that we've already got in the database that we want to go ahead and update. And by update, I mean save an image
00:21
and then attach it to that record. So this is helpful whether you are creating out a product initially or not or a model initially or not. It doesn't really matter.
00:31
But we're going to talk about custom state. So let's talk about the goal for this episode. What we want to do is fill out the initial meta form, go over to the product image state,
00:41
and we just want to dump the product out or at least some sort of information from the product out. So at least we know we have that model
00:48
and we can update that model with the image once it's been uploaded. OK, so how are we going to do this? Well, we know that what we can do is over in the image step,
00:57
we can access any state within here when we submit this. So let's just go ahead and create out a submit method in here. So at least we've got something to click on.
01:07
So let's go and create submit. And we'll just die dump in here, submit. And we should be good. OK, so we're going to go over to our meta step.
01:15
And we're going to copy everything in here. And we're going to move that over to our image step just so we've got our Next Step button. And I'm just going to get rid of these form fields,
01:24
because of course, that's going to be moved out to have our file uploader in there. OK, so when we click this in the next step, so let's just test this out really quickly.
01:35
And let's just do that again, because we've got a refresh. We see die dump submit. So the goal is to die dump this and get the product from the initial step.
01:44
Now, let's go back to our image step. And we know that what we can do is we can die dump on something like this state for step. We can give the name of the step.
01:53
So that's going to be, let's just check our directory structure, products, create, steps, and our meta step. And then we can grab the state specifically for that. So let's just take a look at what we get with that.
02:11
And there we go. So we've got the title and the description. But because we've already created the product upfront, we don't know the ID for this.
02:21
We don't know anything about this. So what we're then going to do is over in our meta step, we're going to say, well, once this is created in the database here, we're going to set a product ID inside of here.
02:33
And then any of the other steps will be able to access that model. Not directly, but that's where our custom state comes in. So I'm going to go ahead and create out a product ID
02:44
integer in here. And then as I create this product, so let's go ahead and assign it a variable. We are then going to set the product ID
02:54
to the ID of the product that has just been created. So this is for a product that's being created in the database initially. But if you have any other state that you just
03:03
want to keep, just assign it like we're doing here. It will work in exactly the same way. So let's go over and try this out again. So ABCDEF, next step, hit this.
03:12
And there we go. We've got the product ID in here, which we can reference, which means we can look the model up and then make an update on it in this step to upload the image.
03:23
So what we could do, of course, is over in our image step, when we submit this, we could look the product up. And then we could go ahead and update it. But if you think about it, if you have multiple steps,
03:39
do you really want to be looking the product up manually inside of each of the steps to then go ahead and update it? Probably not. So let's build out some custom state
03:49
to make this a little bit easier. So our custom state works by creating out a class, which we can then bind into our overall wizard. So I'm just going to go ahead and create this out
03:59
in a support directory in our main directory here. And I'm going to create a state directory. And I'm going to create product state. But of course, you can put this anywhere.
04:09
It doesn't really matter. So let's go ahead and just scaffold this out. Let's pull in the namespace for this. So that's app, support, state, and product state.
04:19
And let's create out this product state class, which we're not really sure what we're doing with yet. But we'll go ahead and figure it out. OK, so if we head over to our overall create product wizard,
04:30
so remember where we defined our steps, this is where we can go ahead and give in a state class method, which is going to return to us that state class. So this just returns a string.
04:42
So let's go ahead and type into here and return the fully qualified namespace to our product state. So we're just going to pull in our product state class in there.
04:52
So that's pretty much all we need to do. OK, so we've got an empty class in here that does nothing. Let's just give this a refresh and see what happens. OK, so again, this is giving us a really helpful message.
05:03
The class that we've just created for our custom state needs to extend the base support state class. So let's go ahead and extend that base support state class. And we should be good.
05:15
Let's give this a refresh. And it's still not working. Let's just have a look at what we've done here. And yeah, sure enough, I've gone ahead and probably
05:23
created the wrong namespace here. So let's go over to this and get rid of that. Great, OK. So let's reimport that class name.
05:34
And we should be good. There we go. OK, so now that we've got our custom state, all of the other state is going to work like normal.
05:42
So the title and the description here are still going to be stored normally. If we hit this, you can see that we've still got the title and the description.
05:50
But now that we're working with a custom state class, we can add helpers to that. That's the whole point of creating out this custom state. So what we can do over in our product state class
06:01
is we could create out a method which, regardless of which step we're on, will always give us back a product model instance when we access it.
06:10
So let's go ahead and create out a product helper on here. And let's see how this works. So just for now, I'm going to go ahead and return product find. And we're just going to give any ID in here.
06:20
So let's check our database for any of these. And let's just go ahead and say find two. So we'll just use that as an example. But then we'll find out how to grab
06:28
this ID of the product we're actually creating. OK, so let's go over. And instead, over in our image step of dying and dumping on this state for step,
06:39
we're going to say this state product. So now that should return to us, despite my edits are not liking it because it's not quite mapping up. This should return to us that product that we've chosen.
06:50
So let's say ABCDEF, hit Next, hit this. And there we go. We get that product out of the database. Now, obviously, we've hardcoded it at an ID of two.
07:00
But if we think about it, we are in our state still, so we can still grab the product ID from our first step. So it'd be a good idea to say find or fail in case this didn't exist.
07:12
And now we can just swap this over. So we can just say this for step, not this state for step because now we're within our state. And we're just going to give these step names.
07:24
So we're going to say products create steps. And remember, the model got created on our meta step. And that's where the product is being stored. And then we're just going to grab the product ID directly from there.
07:35
And there are a couple of other things that you could check for, like making sure this was set, all that kind of stuff. But we pretty much know if we're going to the next step,
07:43
this product's always going to be in there. OK, so now that we've got that product, what should happen is I could create a product out. So I'm just going to say one and one.
07:53
Next step, hit this. And sure enough, we get the product that we are currently working with. So now what we can do is in any step that we're working in, if we need to make an adjustment to our product,
08:05
like update it in this step with the image or update it in the publish step with the new published value, which would be true, we can now just say this state product. And then we can say something like update or whatever we need to do.
08:20
So with that done and our custom state created to grab the product that we're working with through the whole of our steps, let's go over to the next episode and look at uploading and attaching an image to this.
15 episodes•1 hr 38 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!