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
04. Navigating steps

Episodes

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

Transcript

00:00
Okay, so obviously a really important part of a multi-step form is actually navigating between the steps and we can do this in a few ways with this package. Let's look at a really basic way. I'm just going to add a wire click directly onto this primary button.
00:14
Now, that's not what we want to do because we want to submit this form and then do this programmatically, but let's go ahead and try this out. So one thing that we can do is just invoke next step. That's pretty much all we need to do. This exists within the step itself and then this will just forward us over to the next step, which is the order we have the steps in that array within the main wizard.
00:35
So if we come over here and hit next step and we make sure that we set this as a type of button. There we go. We're on to the next step. Now, the reason we needed to do that is because this button by default will submit this form, but we don't need to worry too much about that. That's not what we're going to be doing anyway.
00:54
Now, a more appropriate way in this case to submit a step would be to submit the form and then within our component actually submit the step or go to the next step. So let's go and just add a wire submit onto here and we're just going to call a general submit method within this specific title step component. So obviously within this component, what you're going to be doing is validating your title, doing what you need to do, and then only when you proceed to the next step, you then invoke this method.
01:25
So let's add some validation at this point so we can see that this actually works and then we're good to go. So we're going to go ahead and use the validate attribute within here and we're just going to set this to required. That's pretty much what we need to do. And then we'll go ahead and implement that submit method in here.
01:41
We'll first of all go ahead and validate what we've provided for each of our items up here and then we'll navigate to the next step. So let's just double check the validation is working and sure enough it is. So once validation is working and title has that title in there, we can then proceed to the next step. Now at the moment we haven't got this hooked up.
02:00
So let's go and say wire model and title and that will hook that up to the title. And that means that if we type something in here and hit next, that has passed validation. Okay, so over in here now we want to navigate to the next step. It's exactly the same as we call it now templates, but of course because we're working within a class here, we just say this next step.
02:20
And that's pretty much all we need to do here. So let's go over and just type in a title, hit next step and there we go. We're over to the next step. Now there are a couple of other things that we can do as well like navigating back.
02:32
So let's go over to the next step and take a look at how we do this. So we pretty much want the same stuff inside of the description step just because we're keeping it super simple here. So let's open up this description step. We'll add in a description instead of a title.
02:47
Make sure we import that attribute and then we're just doing exactly the same thing in submit and we're going to the next step. Okay, so if we just head over to our title step, we're going to grab all of the code in here. We're going to take that over to our description step component and we're just going to change everything over. So we'll still hit the same method here, but we're going to change over the title to description.
03:10
And let's just update the tag for that. Make sure we update the error as well. Okay, so that's pretty much it. So we are going to type in a title.
03:19
So a title hit next step. We're on to the description and we just do the same thing. We type in the description. We hit next step and sure enough.
03:27
We're now over to the final step. So what we can do and this really depends on what you're building is we can navigate to specific steps. So I'll show you that now just so you know, but then of course most of the time you're just going to be navigating to the next step.
03:42
So what we can do is we can specifically show a step by giving the name of the step. Now, how do we figure out what the name of the step is? Well, what we've not done is manually registered these live wire components. You can use live wire to manually register components with specific names.
04:00
I don't tend to do this because I like the names of my components to be the same as the directory structure just so I have a order that I can sort of follow. But let's take a look at how we actually figure out the name of this step first of all. So I'm going to go ahead and get rid of this and over on the title step.
04:17
I'm just going to die dump on this and state. Now we're going to talk about state a little bit later, but the state will contain each of the step names. So if you ever forget them, you can just dive in and have a look.
04:27
But once we've figured out the way that this actually sets up the name of a component, we can just type them as our directory structure. So I'm just going to go ahead and enter a title in here. And now we are looking at our component state.
04:40
So this is specific to this package. So it's nothing to do with live wire. Let's go over to all state. And you can see here that sure enough, we have got the state for this particular step.
04:51
Now, this is the name of the step. It's pretty much the same directory structure that we created. So I'm going to keep it like this. But of course, you can manually register a component if you want to change it.
05:02
So when we go and say show step, what we want to do is take the same structure. But of course, we want to show the description step. So you could within your navigation specifically set this up to navigate to certain steps if you wanted to. Okay, so let's go and just try this out again.
05:18
And of course, it just works as we would expect. Okay, so let's go and look at navigating back to a previous step. We won't fully implement this, but I'll show you how it works. So let's say that we had a primary button here.
05:31
We wouldn't have a back button on our title step because that's the first step. But we could just go ahead and create out a really simple wrapper in here. Go ahead and set flex with items center. And we could justify this between.
05:46
And then just down here, we could have another button. So I'm just going to introduce a really simple button here, but that would be to go back. So again, we could say wire click and then sure enough, you guessed it, previous step. So we can invoke that either from our blade template or we can invoke that directly from the component.
06:04
So that will just go back to the previous step. So let's type in a title. Let's hit back. And there we go.
06:09
Sure enough, we go back to the previous step. And we saw a little bit of a flicker here. That's just because this button is technically submissing that form. But to get around that, we just want to make sure that we set a type of button on these.
06:20
And now we can smoothly navigate back to the previous step. Now this error that we've just got up here is interesting. And we are going to talk about this in the next section of this course when we look at state and how we can better manage this. So don't worry too much about this now.
06:36
I'm actually going to get rid of this back button because we are going to talk more about that in the next section. Okay, so that's pretty much navigating state. Very, very simple to do with this library. Let's go on to the next episode and finish up talking about state and how we gather all of the stuff that we've typed so we can use it in the final step.

Episode summary

In this episode, we're tackling a key part of any multi-step form: actually moving between the steps! We start by setting up the most basic navigation, just using a wire:click on the "Next" button. However, that's not best practice for real world forms, so we quickly shift to a more robust (and proper) way—submitting the form and using a method in the component to validate and then proceed to the next step.

We walk through how to add validation for each step (like making the title required) and only moving forward if everything checks out. You'll see how to hook up your form fields (e.g., wire:model) so your data flows smoothly.

The episode also covers how to set up your other steps in the same way—so, for example, your "description" step looks a lot like your "title" step. Beyond just going forward, we check out how you can programmatically jump to specific steps, and how step components are named and structured.

Lastly, we add a Back button and wire that up so users can move back to previous steps, and discuss a couple of small things (like setting button types) to smooth out the UI experience. We wrap it up with a quick mention of "state" management (which we'll dive into in the next lesson!), so you know where all your form data is stored and how it'll be used in the final step.

So by the end of this video, you'll know how to navigate users smoothly back and forth through your wizard-style form, validating along the way!

Episode discussion

No comments, yet. Be the first!