Livewire Multi Step Forms
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
In this course, we are going to talk about multi-step forms in Livewire.
00:05
Now, these can be incredibly complicated to get working. If we think about this, we have to manage state between each of the steps that we have, and that can get really tricky.
00:18
So just to help us out, we're going to be using the Laravel Livewire wizard package, but we are going to come across some issues with state, particularly when we get to forms that
00:29
are a little bit more complicated, like the practical example we're going to be covering. So I'm going to give you a demo of what this practical example is going to look like.
00:37
And just before we tackle that, we're going to look at the very basics of this package just to kind of get us set up. OK, so this is to create a product.
00:46
It could, of course, be anything at all. So I'm just going to go ahead and create a product in here and a product description. So obviously, we don't have a Back button here
00:56
because we can't go back a step, but we do have this next step, which is going to initially create a product, which isn't the typical thing that you would do with multi-step forms.
01:05
Usually, you'd keep these in some sort of state and then create it at the end. But with this, I need to create this product first because in the next step, I want to go ahead and upload an image
01:15
and then attach it to that model. So this product has now been created, but it's not published yet. We'll do that in the last step.
01:21
So let's go ahead and just choose an image here. I'm just going to choose the Cocos logo, and I'm going to hit Next Step. So on the final screen, all of the state from any of the steps
01:31
that you have, and this could have any amount of steps, is shown in here. So we can access that state. We can show the user what they're about to create
01:39
or what they're about to publish in this case, and then we can go ahead and hit Publish. Now, the really important part about this is we want to be able to go back and navigate back.
01:48
Now, that's traditionally really difficult, particularly when we have instances of our product or any uploaded files. We need to kind of work around this.
01:56
So as you can see, I can go back to Previous Steps here, and I can click back to see the image here, and I can click back, and I can change this information. So think about this.
02:06
We've already created this product, but now I can go ahead and update it. I'm just going to add an exclamation mark, hit Next Step, hit Next Step, and we're back here as well.
02:15
Now, there are some limitations with this library that we're using just because of the way that it works, but we'll get around these as much as we can. And by the end of this course, you're
02:23
going to be really comfortable with building out forms like this, and then anything additional you need to do, you should be able to go ahead and find out how to do.
02:30
So I'm going to go ahead and hit Publish on here. That's just redirecting us back to the initial step, but that has been created out in the database, as you can see here with the title and the description.
02:40
And it's actually stored that image as well in some sort of path. It doesn't really matter where this is. And of course, Published has been set to True.
02:48
So just before we tackle this, we are going to talk about the very basics of this. So the first thing that we're going to be building is something like this, where we go ahead and create
02:56
a thing in here. We choose a description for the thing. And then on the final step, we get exactly the same thing, but this will then actually create that in the database.
03:06
This hasn't been created at the moment, but finally it will be. And nothing happens, but that's been put into the database. So we'll cover the very basics with this,
03:14
just so we can get up to scratch on how to actually use this and how to work with state. And then we'll create that practical example, which will give you more of a drive
03:22
to create things that you actually create with image uploads and anything else that you need to do. So there we go.
03:28
Let's go and get everything set up in the next episode with LiveWire if you're new. And then we'll go on and start with this basic example and work our way through.

Episode summary

In this intro episode, we kick things off by talking about multi-step forms in Livewire and why managing state across several steps can get pretty complicated. We take a look at the challenges we might face, especially when the forms start getting more advanced. To make things smoother, we're going to use the Laravel Livewire Wizard package, even though we'll still run into some tricky spots with state management — and that's exactly what we'll work through together.

You’ll see a demo of the practical example we’ll build during the course: a multi-step product creation form, where you first fill in the product info, then upload an image, and finally review everything before hitting Publish. We discuss how some steps, like creating the product early so you can attach files to it right away, are a bit different from the typical "save everything at the end" approach. You'll also get a feel for how navigation works between steps, including going back, editing info, and how those changes flow through the process.

Before jumping into the deep end, we’ll also walk through the basics with a much simpler multi-step form, just so everyone can get comfortable with Livewire Wizard and managing form state! By the end of the course, you’ll be confident building your own multi-step forms — even if you need extras like image uploads or editing steps.

Up next: we get everything set up and start building our first basic multi-step form example.

Episode discussion

No comments, yet. Be the first!