Okay, now that you know all of the different filament form inputs, I think it's time to go deeper into a real form example, like what happens when someone makes this decision or we have to change the form based on other data that's been entered. So I want to go over that with you and I'm going to show you two different ways to do it. It's brand new and filament 4 or 5, the other is the old filament 3 way, so I 'll show you

It's brand new and filament 4 or 5, the other is the old filament 3 way, so I 'll show you both ways and I'm going to let you decide how you want to use it in your apps. So we're going to go to a new feature here and if we look at our form here, we have the status and we also have down here a target delivery date. Now a target delivery date doesn't really make sense if it's proposed. We haven't even decided if we're going to deliver it yet. And once it's completed or canceled, this doesn't make sense either. So we want our form to be smart enough to know, we only want to show this and

And once it's completed or canceled, this doesn't make sense either. So we want our form to be smart enough to know, we only want to show this and probably make it required if we've selected planned or in progress. So let's go ahead and do that now. Let's go into our form. Here is the status field. I'm going to grab this target delivery date and I just want to bring it up next to it so it's easier to see.

to it so it's easier to see. So we'll do this, maybe we will say that for the table, we can have columns 3 and if I refresh. Okay, so this is nice because it's right here. So we're going to make changes to this and we're going to see what we can do with this field here. Okay, first we're going to do it like you would do it in filament 3 and it's

field here. Okay, first we're going to do it like you would do it in filament 3 and it's perfectly valid right now to do it this way as well. Alright, let's start with the target delivery date. So we want this to be required when it's visible and we only want it to be visible at certain times. So we have this visible method. We can do a closure.

So we have this visible method. We can do a closure. We're going to use the get method and this thing is going to allow us to get the value of other fields within the form. So you do have to make sure you import that. This is the filament get utilities. And so now we have this and we can just say, first, let's just die and dump. If anyone is not familiar with how this get works, I'm just going to get the status.

If anyone is not familiar with how this get works, I'm just going to get the status. So this is going to evaluate and every time it evaluates, we're going to die and dump the status, which is this right here, you just going to make sure that the string you put in here matches that. So if I come here, refresh the page on load, it's going to give me the status field. Now this is actually another change that happened in filament for or five from

field. Now this is actually another change that happened in filament for or five from three is sometimes when you'd use that get method, it would give you the string, just string proposed. Now it's always going to give you the enum class itself, which is really important to know, especially if you're converting from filament three to four, you have to check for the enum class anyways, if we go back to our code, we can comment this out.

check for the enum class anyways, if we go back to our code, we can comment this out. And so we know that that's getting the status. So let's just get rid of it, actually, and we'll say return status, let's say equals planned or status equals, let's see, what are my options here? It's either planned or in progress. Okay, so now this will be visible anytime this is planned or in progress, and I 'm going to go to the browser, refresh, and I'm going to show you that it does work here

'm going to go to the browser, refresh, and I'm going to show you that it does work here because we're in proposed, and it's not showing, but if I click planned, it doesn't show up. Now why is that? It's because this is all happening in PHP with a live wire request. And right now, this form is not making a live wire request every time you update this field.

update this field. To do that, it's very simple, we can just make this field live. And now that tells filament that every time this thing changes, go rerender everything. So if I come back here and refresh the page, now it's proposed, if I change the planned, it shows up. So this works, right? And this is nice.

So this works, right? And this is nice. There's a slight delay. Now I have a faster connection, so if we go ahead and change our network to slow 4G here, and let's just refresh the page, if I change to planned, that took a while to come through, right? If I'm on 3G and I go from planned to proposed, we're going to sit a long time until that

If I'm on 3G and I go from planned to proposed, we're going to sit a long time until that thing disappears, right? So one of the reasons that maybe this doesn't work so well is if the network is slow, or maybe there's a bunch of logic going on, it's not even the network, maybe your app is slow in certain cases, and you don't want to wait to show or hide these fields. So this was not really possible without a lot of customization in filament 3. In filament 4, we have another way, but I'm going to go back to no throttling

So this was not really possible without a lot of customization in filament 3. In filament 4, we have another way, but I'm going to go back to no throttling here. And what I do want to show really quickly that's important is I've got this set as required. And it's really nice because when you use this approach, if the field is visible, then and it's required, you're going to have to have it. But the field is not visible. Filament is smart enough to know, well, when this is not visible, it's also not

But the field is not visible. Filament is smart enough to know, well, when this is not visible, it's also not required. So let me just show you that. If I create a new feature, I'm going to say proposed, which means that one disappeared. I know the layout is very ugly here, but I'm just going to fill this out. And you'll notice again, the target delivery date says it's required, but it's also not passing this visible.

also not passing this visible. And so we are going to be allowed to create this record even with the target delivery date as null because it wasn't visible. So it was not required when visible was false. And doing that is going to be a problem for us when we start using JavaScript to handle the visibility. So let's go ahead and implement the JavaScript and see what that means.

the visibility. So let's go ahead and implement the JavaScript and see what that means. So I'm going to change this visible to be visible JS. I have this little live template that I can use. And this is actually really important. This has to be like this to a tell filament that you're using JavaScript and be tell your ID. So you have to make sure you structure it in just this way. And the important thing in here is just to return something that evaluates to

So you have to make sure you structure it in just this way. And the important thing in here is just to return something that evaluates to true or false in JavaScript. So you can just say false, no semicolon, no return or anything, just false. So now if I go back to my browser, I need to go to features and a new feature. And you can see that target delivery date is not visible. If I change this to true refresh, now it is visible. So make sure you get the syntax right. If you add semicolons, try to return or something, it's not going to work.

So make sure you get the syntax right. If you add semicolons, try to return or something, it's not going to work. So now that I have my target delivery dates and I need to determine whether it 's visible or not, we're going to use that same logic we had before. And so what we can do is we can use this get function and we can get the status . And the important thing to understand is this looks exactly like the get when we have a closure and we pass in the PHP class for get.

we have a closure and we pass in the PHP class for get. And this is not the same thing. This is on the front end. This is JavaScript. So the main reason that is so important is because we're trying to get a enum value, but it's not an enum on the browser on the front end. It's just a value. So we want this to be visible only when the status is planned or the status is

It's just a value. So we want this to be visible only when the status is planned or the status is in progress. All right, again, I don't want to put any semicolons. And let's refresh and see if this works. So I have proposed planned it is visible and in progress, it's working. But when it's something else, it does not show up. So that is working except for the fact if I try to do something here, I'm going to fill this out and I'm going to click create and it's not working.

to fill this out and I'm going to click create and it's not working. Not only is it not working, but I'm getting no error message on the front end to tell me what's wrong. The problem is the PHP app, the layervel app says this is required and needs it to be a part of the submission, but it's not visible. So the user cannot submit it. So we can't just use this required here.

So the user cannot submit it. So we can't just use this required here. We're going to have to figure it out a different way in order to get this to submit. And of course, if I just to show you, if I go to planned and I fill this out, then it will submit. So the issue, the reason it was not being created is because we're requiring something that wasn't visible on the front end.

something that wasn't visible on the front end. So let's go back to create again, we'll do another feature. And this time we just need to change this not to be required always, but we need to pass in rules. And here we need to pass in a function. And in this case, we're going to get the, we're using the filament class for get. We need to use this to figure out whether this should be required or not on the

get. We need to use this to figure out whether this should be required or not on the backend. So here we are returning a rule and this is required if and we've got that function get. So if status is planned or in progress, this should be the correct logic. But again, we are working with enums. So we're not looking at strings. This would actually work, but we want to use feature status of planned or in progress.

This would actually work, but we want to use feature status of planned or in progress. It actually wouldn't work. So I'm saying this because filament passes in enums, not just strings. So in progress, okay, so if we did this right, if we have this syntax correct, I think we do here, let's put it on two lines so we can actually read it. So this, this input is required if the status is planned or in progress. Let's come back here. We're going to refresh another one and we want the status to be proposed.

Let's come back here. We're going to refresh another one and we want the status to be proposed. So this should not be required and create and there it goes. It worked. And just to check one more time, I'll do this. If I go to planned, now we have that. It doesn't show the red dot that it's required, but if we try to submit, there we go. The target delivery date field is required. So this is working really well.

The target delivery date field is required. So this is working really well. It's up to you. If you look at this and knowing that you have to implement the rules a little bit differently, it's not that complicated, but this is up to you. If you feel like you need that instant reactivity and you're confident that you can do the rules on the back end to validate that this is going to work the way you want it to work, then

on the back end to validate that this is going to work the way you want it to work, then you might want to use visible or hidden JS. If you want to just allow that network request and let filament handle it all, then maybe you use the old way. Like I said, you can use visible JS or hidden JS. Obviously you're just inverting the logic. So either one you want to do, but we'll leave it with visible JS here and it's up to you

So either one you want to do, but we'll leave it with visible JS here and it's up to you to decide which way you're going to use.