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
05. Storing and accessing state

Episodes

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

Transcript

00:00
OK, let's talk about how this package stores state. Now, a word of warning, this is going to get infinitely more complicated as we get to do things like upload images or upload files
00:10
in general. We'll talk about that in the practical example, but let's just look at a really basic example of how state is stored and accessed.
00:20
So what I'm going to do is head over to the description step component here. And once again, what I'm going to do is just die dump on the state for this package
00:29
as we saw before. So we saw an example of this when we were trying to figure out the name for this component, but let's go ahead and die dump on this
00:36
before we go to the final step and just see what happens. OK, so I'm going to say a title in here, hit Next Step, and a description in here, and hit Next Step. So that's going to die and dump all of our state.
00:49
Now, we've got this state class here. We can create our own state, which we're going to be doing later, but this will basically just store state automatically for you for each of the steps
01:00
and any of the public properties that you've got attached to any of your steps. So this can be really helpful, but it can also be pretty tricky when you're dealing
01:08
with more complex data. So let's go over to our title step and have a look in here. And you can see, sure enough, that has stored this state for us for that title
01:18
that we are entering into that input. And you guessed it, we have the same thing for the description as well. But this is really handy, because now in the final step,
01:27
what we can do is we can access this state, pull it out of each of the steps. And I'm going to show you a couple of ways to do that. And then we can just show it on the page.
01:36
And then, of course, in the final step, when we hit that Final Submit button, we can go ahead and take that state and put it into the database.
01:43
So let's go and look at how we access this state now, now that we can see that these properties here are automatically stored in state for us. So we're going to go over to the Publish step.
01:55
And we're going to do pretty much exactly the same thing. So we're going to have a Submit method in here. And for now, let's just die dump on our state so we can see all of our state.
02:06
And then we're going to head over to the title step component and move that over to the Publish step just here. Now, we can get rid of this input, because we're not going to have anything on there.
02:19
But in here, I'm just going to change this over to Publish. So this is where we're going to show all of our state before the user gets the chance to review it, hit Publish, and have this stored in the database.
02:30
So let's just run through this really quickly. A title, a description, and there we go. We'll show our state in here. We'll hit Publish, and we will create this.
02:39
Now, let's look at a couple of ways that we can access this state in our final Publish step. So we know that by just hitting Publish, we will get all of that state.
02:49
We'll have state for the Publish step, but obviously, we're not storing anything in here. OK, so first of all, let's go down to our render method, and let's output each of these items within this state.
03:01
And then we're going to kind of tidy this up by grabbing them all in one go and passing them through as an array. So we can pass this down to our component,
03:09
but also use this to create the record. So what you could do is pass the title down to your component here, and you could access the state, but you could do this for a specific step.
03:22
So you can say current step. You can say all, which will give you back all of the state, which is effectively what we're doing with this state object at the top here
03:30
in dying and dumping. So it's pretty straightforward. So let's go ahead and say for step, because we want to grab that for the title step specifically.
03:40
And we know what the name of that is. That's just going to follow the directory structure here. So it's going to be things, create, and then steps, and then titled step.
03:51
And then with this, we'll get back an array of that data. So we can just access the title from there. So we've got the title. Now we want to pass the description down.
04:02
And you probably noticed this is getting a little bit long and cumbersome. We're going to tidy this up in a second. And we're going to say description step
04:09
and description. And that's pretty much it. We've accessed the state from the first two steps, and now we've got that data in the publish step
04:16
to show on the page. So let's go over to our publish step. Let's create out an ordered list in here. We'll create out a list item, and we'll just
04:24
output the title in here like we normally would. And of course, we'll do the same for the description here as well. So let's just change this over to the description.
04:34
Great, so that should work nicely. We're accessing the title and the description for each of the steps, and then going ahead and showing them. So I'm just going to put anything in here.
04:43
And there we go. Great, we can review this data. We can hit publish. Now, the problem with this is we are doing this
04:51
by accessing each item as it goes. And that is a little bit annoying, particularly because we have these long names. But even if we didn't, this is a little bit annoying.
05:00
And we're going to have to repeat ourselves when we actually hit Submit to create the thing. So by that, I mean what we're going to have to do is take these two lines of code, and we're
05:09
going to say thing create, which we don't even have in our database yet, but we will do that. And then we will have to go ahead and pass this in. So it's a little bit annoying to grab all this and, of course,
05:20
do what we need. So before we go any further, let's go and just create out a really simple model so we can see this going into the database.
05:27
So let's create a model called thing with a migration. We'll head directly over to that. We know exactly the data that we need to store here. It's just going to be a title and a description.
05:36
We'll just keep this really simple with a title. And we'll just set the description to a string as well because it's not too much trouble. In fact, I am going to change that over to text.
05:47
And let's go ahead and migrate this. So phpArtisan, migrate, and we're done. So we can now create this thing, not forgetting to just go ahead and set our fillable or set guarded to false.
06:03
OK, so this is going to work. Let's just try it out. So abcdef and publish. There we go.
06:10
So if we head over to our database now, we have that in the database. But let's just tidy this up a little bit so it's a little bit more convenient to access.
06:19
Now, the first thing that jumps out at me is create out just a simple helper method in here, which will grab all of our state. So let's go ahead and create out a method in here
06:29
called stateToStore, whatever we want to say. And we're going to go ahead and grab this and return that as an array directly inside of here. And then what we can do is just pass that directly
06:44
into our model, so this stateToStore. And then down here, we can do the same thing. So we can just pass through our entire state as that array. So this stateToStore, and we're done.
06:59
We've tidied that up by putting all the state that we need to create this model into one method. This should work in exactly the same way. Let's try this out.
07:08
And yeah, of course, we need to change over our template now. So let's go to our publish step. And this is going to be now state and title and state and description.
07:19
OK, let's go over and try this one more time. And there we go. We see this. We hit Publish.
07:25
And of course, that gets created in the database. Now, if you wanted to be a little bit more fancy and tidy this up even further, let's say that you had a ton of fields,
07:35
you're not really going to want to duplicate these all the way down for each of your steps. It can get a little bit annoying. Basically, what we want to say is,
07:43
I just want to pluck out the title and description for all of our state. So just before we do that, let's take a look at what this stateAll gives us.
07:52
So we have this all method on here, which will give us all of our state. So again, the annoying thing about this is we have to go through each of the steps,
07:59
but let's just take a look. So in here, we've got the state for each of our steps. Now, this gives us an array with each of the names, which is really handy because all of these
08:07
are now encapsulated within each of the steps. But let's just say that for each of our steps, all of the items that we were storing were unique. If you had a title in your description step
08:19
and a title in your title step, the method we're about to use wouldn't work. So we'd have to have, through the whole form, every single property completely unique.
08:28
But usually, that's going to be the case. So what we could do here, instead of returning this huge array and manually extracting out each item, is we could go ahead and collect this up and do
08:39
something with LaravelCollections. So let's just go and create this as a variable, just temporarily, just so we can die and dump this. And let's see what we do.
08:49
So we're going to collect up all of the state. So let's say this stateAll. That gives us a LaravelCollection instance, which means we can start to filter through this,
08:57
map through it, flatten it, whatever we need to do. So we're going to go ahead and map through this with keys. That's really important. And for each of them items, we're
09:08
just going to return that item. Now, what this will essentially do is flatten this. So we end up with something that looks like this. Let's just go through our steps and have a look.
09:19
So this will basically merge everything from each of the steps into one. So that means that we get our title and we get our description.
09:27
So we don't really need to worry about these class names and all this stuff that's used internally, because we just want the data out. So we've got the title now, and we've
09:34
got the description in here. So now with this, what we can do is we can use the only method to just pluck out the title and the description.
09:42
So you would just pluck all the data from all of your steps out within this only method. You can pass an array in here as well, and we're done. Now, the really important part about this
09:51
is we want to cast it to an array, because we're going to be using it to insert into the database and also show in our template. So really, what we can now do is just return this.
10:00
And I'm going to go ahead and just comment this line out here. So that's our new way of just collecting up all of the data from all of our steps.
10:07
And that's a lot cleaner, because now when we add something else, we can just add another key in here, and it's going to be available to us.
10:14
So this shouldn't affect the way this works at all, because we're returning an array. So let's go and say abcdef. We still get that data in here.
10:22
We hit Publish, and sure enough, that has been created in the database as well. So although it's a little bit cumbersome with the state here, having the full name of each of the steps in here,
10:34
we can use tricks like this with Laravel Collections to clear that up. Or of course, if you did want to do something like this or you had some more complex data,
10:42
you can manually register your Livewire components to make this a little bit easier to manage. But that's basically everything that we need to know to continue on to our practical example
10:53
in the next section. This is going to get a little bit more complicated. But once you've learned the basics that we've covered here, you should understand everything we're going to do.

Episode summary

In this episode, we dive into how state is stored and accessed when working with multi-step forms in our package.

We start by looking at the basics, like how entering data into different steps (for example, a title and then a description) gets automatically stored. We illustrate this by using some die-dump debugging, so you can see the state as you navigate the steps. You'll see that each step's public properties are automatically tracked for you by the package, which is super handy for basic forms, but it does get trickier as things get more complex.

Next, we explore how you can access and display the collected state when you get to the final "Publish" step. We'll walk through different ways to pull this state out for use in your UI or for saving it to the database. We show the manual way (grabbing each item by step and property) and then move on to a cleaner approach: using a helper method to gather and return all the necessary data as an array. This makes submitting everything much tidier.

To demonstrate saving data, we set up a really simple Thing model with a migration and actually insert our stored form data into the database — showing the end-to-end process.

Since duplicating code to get each field can get messy (especially with more fields), we take things a step further and leverage Laravel Collections to cleanly gather all the state you need for saving and displaying. We break down how to flatten your state array, easily pluck out just the fields you want, and return everything as an array for storage or display.

By the end, you'll have a slick workflow for collecting, previewing, and saving multi-step form data, plus some handy tips for organizing your code as your form grows. This sets us up nicely for even more complex scenarios in the next section!

Episode discussion

No comments, yet. Be the first!