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
12. Handling backsteps

Episodes

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

Transcript

00:00
Okay, let's look at handling a very simple back step when we're on our product image and we want to go back to our product information.
00:07
Now, at the moment, I told you that this creates another record in the database when we hit next step because, of course, that's what that form does. Now, I've gone ahead and cleared the database out just so we can focus on this and let's look at an example.
00:20
So I'm going to create some product information and go to the next step and then I'm going to go back and realize I need to update the title. When I do update the title and hit next step, obviously what that's done is invoke that submit twice.
00:33
We do have a product so there's no need to create another one. So this just obviously isn't working and you can see that both of them have been created. So what we need to do is on a case-by-case basis, make sure that we handle these cases. Now, it's going to be different for every single form that you create.
00:50
This is just an example. So you just need to think about your own scenario and how this is going to work. So this submit method goes ahead and creates a product. That's not what we want to do when we already have a product in state.
01:02
Now, we know how to access a product in state. So we could just wrap this in an if statement. That's pretty much what we need to do. But again, because we've got our custom state, we could add in another helper method in here
01:13
which would be a little bit more fluent. So for example, I could create out a has product method in here which of course would return a Boolean to tell us if we have a product in state or not. So there's a couple of ways to do this.
01:27
We could of course reference the product method we've got in here, but I don't really want to do that because it's going to look the product up every single time. So what we could just do is we could use the filled helper in Laravel and just access for our step that we know that that exists in which is the meta step
01:44
and we could check if this is filled. So let's just go ahead and pop this in here. We could actually just grab the whole thing. So grab all of this and just check if that is filled in and that's pretty much it.
01:57
So we know that we have a product in our overall state and we're dealing with something that's already been created. So now what we can do is just wrap this and we can have an else. Now there are some complex things that you could do here like update or create,
02:10
but I found the easiest way and the cleanest way to read this is just to put this in an if statement. So we're going to say if this state has product, well, if it does already have a product, we want to update it. Otherwise, we want to create it and set the ID.
02:26
So how do we update a product? Well, we already know that we've got the product in our state. So we're just going to say this state product and then update and then again, we're going to pass through this only title and description.
02:44
So feel free to change this around if you think another method of either creating or updating this works best. But in our case, if we have a product, update it. Otherwise, create it and set the product ID.
02:56
That's pretty much what we're doing. So now what is going to happen if we just check our database, make sure it's clear, when we create a product, go to the next step and then go back again and we add something on,
03:07
that is of course going to update that product and we just end up with the one product in our state. So again, depending on what you're building, you just need to check each of your steps,
03:17
make sure you're navigating back and make sure all of this is working nicely. Now with that in mind, we're actually going to see an issue with our product image when we navigate back from the publish or the review and publish step.
03:30
So let's go over to the next episode and look at building out the final step just so we can see this hitting it and publishing it and then we'll work on going back to more complex state like our uploaded image and see how we can fix that.

Episode summary

In this episode, we dig into a pretty common UX problem: what happens when a user goes back a step in a multi-step form? Specifically, we're working with a product creation flow. When we hit the "next" button, we create a new product in the database, but if we go back and change something (like the title), hitting "next" again just ends up creating another product – oops, not what we want!

You'll see a practical walkthrough of how this double-submit bug happens, and then we work through the process of fixing it. We look at ways to check if a product already exists in our form state, using helper methods and Laravel's filled function, so we can decide whether to create a new product or just update the existing one.

By the end, you'll have a much cleaner approach: if there's already a product in state, we update it; otherwise, we create it as new and store its ID. You’ll also get a sneak peek at the next big challenge – handling going back with more complex data like uploaded images. Stay tuned for that in the next episode!

Episode discussion

No comments, yet. Be the first!