(upbeat music) Now that our filament app is configured, let's go ahead and start building. So we're gonna start doing a lot with forms over the next couple of videos. And before we get into some of the new stuff I wanna cover, I just want to point out, if you've watched my previous video, so I'm here at the rapid layer of all apps with filament, this was for filament three, and we're now in filament five,

so I'm here at the rapid layer of all apps with filament, this was for filament three, and we're now in filament five, but almost everything in this filament form section is still valid. It's still basically exactly how it's used today. So I'm not gonna recover all that stuff. So if you want information about basic form inputs, selects, checkbox, et cetera, go watch those videos. If you're brand new to filament, I highly recommend you do go figure those out first.

If you're brand new to filament, I highly recommend you do go figure those out first. If you are not new to filament, but you're new to filament five or filament four, then I'm gonna go over some of the things that have changed since filament three, okay? So let's go back to our app. And a few things I want to cover really quickly, some changes that we need to kind of roll back if you're following along from the previous videos,

some changes that we need to kind of roll back if you're following along from the previous videos, is the feature policy we turned create to false, and that needs to be true again. So go ahead and make that change. And then also we kind of added this, or we changed the create action, or we added this new one. So let's just get rid of all that. And now we're back to kind of normal,

So let's just get rid of all that. And now we're back to kind of normal, where I'm on the features page and I can actually click this new feature button. The one other thing we need to do before we get started, because right now I like when I'm building my app, when I deploy this, I'm gonna want this probably to be a slide over. Right now, while I'm working with this form, I don't wanna have to keep opening and closing a slide over.

Right now, while I'm working with this form, I don't wanna have to keep opening and closing a slide over. I wanna create page. So let's go into our editor. Let's get rid of that. Let's go to the feature resource. And again, if you're not sure where that is, it's in your app filament directory. Here's feature resource. And I commented this out,

Here's feature resource. And I commented this out, which is what allows me to have that slide over. Let's just bring it back. So I never deleted the class, the class still exists. And if I go back here, and now when I click this button, it's gonna take me to a create feature page. This is gonna be a lot easier for us to start working with. So the first thing I want to address,

This is gonna be a lot easier for us to start working with. So the first thing I want to address, and we're not gonna worry about layout or anything, we're just worried about form inputs right now. First thing I want to address is this type. Okay, right now it's just pre-filled as feature. And really, I just want to know, is this a feature or is the bug? Maybe there are some other types you can think of. Those are the two that come to mind for me.

Maybe there are some other types you can think of. Those are the two that come to mind for me. So let's go into PHP storm. Let's go to our create features table first. And so we have the default as feature, but we're gonna want this to be an enum, just like the status is. So let's go ahead and create that enum. I'm gonna go to the feature status. Last time we created this with an artisan command,

I'm gonna go to the feature status. Last time we created this with an artisan command, which is perfectly fine. If I go ahead and look at this, I can also here in PHP storm, sometimes I'll do this. I'll just do a new PHP class, I can choose an enum, and I'm gonna call this feature type. Okay, so I've got this now here, it's going to return a string. And of course, I want my options to be feature.

it's going to return a string. And of course, I want my options to be feature. And the other one is going to be bug. I'll just call it bug. Okay, so now we have our features here. Let's go back to that migration. We're going to use the enum here. So feature type, feature value. Let's get that out of the way. So this is how I want my migration to look.

Let's get that out of the way. So this is how I want my migration to look. That looks good. And now we're gonna go to the feature form. Again, if we look at where this is in our directory, we've got these schemas here in the features directory within filament resources features. This is our form class, and we've got the type. Right now it's a text input. So we could make it a select, just like,

Right now it's a text input. So we could make it a select, just like, let's start there. We'll make it a select, this is type, and we're just going to do the options in enum, just like we did here. Change this to feature type. And actually up here, we shouldn't use a string here. We should use feature status proposed. And the default here should be feature type feature.

We should use feature status proposed. And the default here should be feature type feature. All right, let's go back to our browser, take a look. And so this is the same thing that we had before on the status. Now, instead of a text input, we can select between feature and bug fix. And that's fine. If that's what you wanna do, great, it's gonna work. I think we could do something a little better

If that's what you wanna do, great, it's gonna work. I think we could do something a little better from a UI perspective. So if we come back here, filament now offers a really cool thing called a toggle group. If we go to the filament docs, you'll find the docs for this down here at the toggle buttons. Yeah, it's not called the toggle groups, it's called toggle buttons. So I wanna use this class, and this is gonna be

it's called toggle buttons. So I wanna use this class, and this is gonna be a really great way for us to decide whether it's a feature or a bug. So we'll go back to PHP storm, and instead of a select, we will use toggle buttons. We'll import that class. And everything else here just works. So let's see what this looks like. Now we have a feature or a bug fix.

So let's see what this looks like. Now we have a feature or a bug fix. So this, I think, is much better. It's always gonna be one or the other, so it's kind of like a radio, but it's a better radio. So I don't like that these are stacked, and I would rather them be next to each other. So that's an easy change to make. We're gonna go back here, and we'll just add a method called, whoops, inline, in line.

We're gonna go back here, and we'll just add a method called, whoops, inline, in line. All right, and if I go back, and now they're on the same line, which is really nice. The other thing is, if you remember back in the video where I talked about the enums, we can really use those enum contracts and make this look a lot better. So you always have the option to say, I want to define the colors for the features here

So you always have the option to say, I want to define the colors for the features here or the icons with git icons, but it's so much easier when you're using an enum to do it on the enum class. So I'm gonna do that. Let's go to the feature type class. And okay, I'm gonna change bug fix to just be bug, and then we're gonna implement our three contracts. So we're gonna say implements has label, has color,

and then we're gonna implement our three contracts. So we're gonna say implements has label, has color, and has icon. Okay, so we have to implement those. Remember for the label, we have a trait that we use, use value as label, so that takes care of that. For color, let's see what we get here. Feature will be primary bug, let's just make it warning. Doesn't need to be danger. And then for the icon,

Doesn't need to be danger. And then for the icon, let's see what we can get here, a star and a bug. This is probably good. So now that our enum is created, I'll refresh the page. We've got feature with a star and bug is a warning. That looks good. I don't know, maybe this can be info just to give us a little more color differentiation. Yeah, how about that?

just to give us a little more color differentiation. Yeah, how about that? So the feature is purple, the bug is orange, everything looks good. In fact, I don't even think type is necessary here. It's very clear by these icons, what I have to pick one of them, I know what this means. So I don't even need that label at all. Let's go back to our feature form. And on this toggle buttons, we'll just say hidden label.

Let's go back to our feature form. And on this toggle buttons, we'll just say hidden label. Oh, it's asking me if I wanna reload the site because this is that thing we did earlier where if you're making a change, it's gonna ask you, are you sure you want to leave? And that's kind of annoying while we're doing development. So let's change that. We'll go back to our admin panel provider, unsafe changes alerts.

We'll go back to our admin panel provider, unsafe changes alerts. We don't want that unless we're in production. So I bet we can even pass in a app is production. I bet we could do this. Maybe we need a closure here. And if we come back, let's just take a look. If I type something, try to refresh. That didn't work. Oh, 'cause the logic here is all.

That didn't work. Oh, 'cause the logic here is all. If the app is in production, I want this to be true. So we can just get rid of that. We'll just say, if the apps in production, we want the unsafe changes alerts. So now if I type here refresh, perfect. Okay, so now I've got a feature or a bug. I think that looks really nice. And those toggle groups are great.

I think that looks really nice. And those toggle groups are great. I use them all the time. The next form input I want to take care of is the priority. So the ideas we want to say, how important is this to us internally? Somewhere between a one and a 10. So obviously we can have, again, what we have right now. Let's go back to our feature form, find the priority.

So obviously we can have, again, what we have right now. Let's go back to our feature form, find the priority. It's numeric. We can say min value is one and max value is 10. And that'd be fine. So we come in here. Our priority isn't even in the right place. One to 10 would work, but let's do something a little bit nicer. Instead of a text input, let's make this a slider.

a little bit nicer. Instead of a text input, let's make this a slider. So slider is new. It was new in filament four. And we've got some options here. So right when I look at this, I'm gonna come back here and refresh. It's just a slider and this is obviously not great. I have no idea what I've selected. This doesn't seem good to me.

I have no idea what I've selected. This doesn't seem good to me. So how can we make this a little bit better? Well, we have an option here. It is required. Let's just put it here. We'll say, show me some pips. So let's see what that looks like. Now we have pips between one and 10. And this is good, except if you look really closely,

Now we have pips between one and 10. And this is good, except if you look really closely, maybe pause the video, if you count all of these, there's actually two, three, four, five, six, seven, eight, nine, 10, 11. So it doesn't make sense. I don't know why filament does this, but we need to change this a little bit to make it better. So we want to set the pips mode. So pips mode is going to be steps.

So we want to set the pips mode. So pips mode is going to be steps. And so now if I come back here, this is going to not quite work yet because we also need to add a step. So the step is one. So that means there's going to be steps instead of a slider that can go anywhere, right? Now, if we made the step like five, then if we refresh, you can just go from one to six to 10.

Now, if we made the step like five, then if we refresh, you can just go from one to six to 10. That obviously doesn't work. But in our case, we just want steps for every single number. So we change that back to one. And now we have a nice slider that allows you to just pick your priority really quickly. The other thing that I like just visually to make this a little bit better

The other thing that I like just visually to make this a little bit better is we can make sure there's a color. So we'll call fill track. And now if I go back to the browser and refresh, as I slide it, it kind of fills it with a color we like. And now the one other way you might want to show what the value is on your slider instead of having these pips and have the values there is we could also do a tool tip.

instead of having these pips and have the values there is we could also do a tool tip. So if I do this and I refresh, now I have both. And this is fine. I have found sometimes it doesn't get the number, the integer quite right. So that could be a problem for you. And also, at least for this case, I just want one to 10, I think it's better to not use tooltips. So just be aware you have tooltips as an option for you.

I think it's better to not use tooltips. So just be aware you have tooltips as an option for you. Okay, the last and probably most exciting form input that we're gonna use is the rich editor. So filament three did have a rich editor. We want this description to be a rich text, but it was completely rebuilt from the ground up. It now uses tip-tap underneath. And it is so amazing. We're not gonna go in depth on it,

And it is so amazing. We're not gonna go in depth on it, but let's just change the description here to a rich editor. And if we just refresh and see what we get, this is it's tip-tap and it just works and it's so nice. So by default, you have all kinds of stuff here. And so here's some content. If I want to bold a word, if I want to strike through a word, I can make a super script. I can use all of these things.

I can make a super script. I can use all of these things. Now, some of these things you might never want to use, okay? And so we can actually configure what this is going to look like. Let's do that. So I do want to pull up the rich editor docs and we can take a look at some of this. One option you have here is you can store the content as JSON. I spoke with Dan and the guy Adam

One option you have here is you can store the content as JSON. I spoke with Dan and the guy Adam who actually helped Dan build this whole thing and said, "What makes sense? "I don't use rich editors a lot in my apps." And he said, "80% of users are probably just going to use HTML." So what I mean is if I go back to our app here and let's edit an existing feature just so we can see. All right, we've got this content here. We could just delete it.

All right, we've got this content here. We could just delete it. Hello, we'll make it bold and save it. Oh, I do need to select a type. So we'll say feature here. Okay, and if I go to my database and refresh, you can see this top one here is it's just storing HTML in your text field. So this for most people is going to work. If you're doing really complicated stuff

So this for most people is going to work. If you're doing really complicated stuff like you want to build a WordPress clone and you're going to have blocks and all kinds of really complicated stuff which is all supported by this tip-tap editor, then you're probably going to want to choose JSON. In this case, we don't need that. We're just going to store the value as HTML. So if we go back to the Filament Docs,

We're just going to store the value as HTML. So if we go back to the Filament Docs, let's get there and this is where it says you can customize the toolbar buttons. So if we just copy this from the Docs, go back to our code, paste that in. Let's take a look at some we don't need. Like I don't think subscript or superscript are really important. Links are probably good.

are really important. Links are probably good. I probably don't want tables or the undo or redo. So let's just get rid of that. Let's get rid of table. If you're going to use attach files, that's great but it takes some work to configure that. I'm not going to do that configuration work right now. So I'll leave off attach files, come back to our app. We're going to go to our features, we're going to edit.

So I'll leave off attach files, come back to our app. We're going to go to our features, we're going to edit. And this is cleaned up a little bit. It's obviously up to you what you want to choose but I do recommend once you decide how I want my rich editors to look, it is probably going to be the same thing for your entire app. So we're going to go back to our app config and let's say this is what we want here.

So we're going to go back to our app config and let's say this is what we want here. Let's take these toolbar buttons and we're going to go into our filament service provider. Remember, we created this custom earlier in the course. You could use any service provider if you want and I'm going to say rich editor configure using and I think this is what we want where this, let's just paste in what we had. Yep, this is exactly what we had.

let's just paste in what we had. Yep, this is exactly what we had. So now I've set that globally and it can go back to my feature form and I can remove this but we're going to have the exact same thing. I will cancel, edit again and we have the same thing. So highly, highly recommend you can figure that broadly for your whole app. And if there's a specific case where you want to override

for your whole app. And if there's a specific case where you want to override something you can always do that in line. Like if I did want to attach files here, I can say this and let's just add attach files and now I refresh, edit and there's the attach files. So you can override it wherever you want but it's a really good default. Okay, let's get rid of that 'cause we're not going to use it for now.

Okay, let's get rid of that 'cause we're not going to use it for now. There's one more option if you want to format your text and tip-tap that I want to show you. It's not one that I typically use but if we go back to the Filament Docs you also have floating toolbars. And so I will copy what's here in the example. I'm going to show this to you and I don't actually really love this.

I'm going to show this to you and I don't actually really love this. When I click edit here, it looks like I'm getting an undefined array key. All this table stuff is not making sense I think 'cause I didn't include table up here. So we can include the table just so we can see how it looks and then go back and refresh, let's click edit. Yeah, for some reason I'm not sure why those aren't showing up.

Yeah, for some reason I'm not sure why those aren't showing up. So we can just get rid of the entire table thing 'cause we're not using it. So let's get rid of the table, refresh our page, edit and now every time no matter where I am in here, I've got this and I can highlight it. I don't like that this thing never goes away. And so that's why I don't use it. But you might want to use something like this.

And so that's why I don't use it. But you might want to use something like this. If you like the floating toolbar, I don't. I think it works really well to just have it up here. You might want this if you're gonna have a really, really long description and it would take a lot of scrolling to get back up to the top of this to select one of these things. So it depends pretty much on how big the content is going to be, whether you want to use

So it depends pretty much on how big the content is going to be, whether you want to use the floating toolbar or not. So if we get out of here and we go back to the Filament Docs, if you look at these docs, look at how much I can scroll here. There is so much you can do with this rich editor because it is so powerful. And I'm not gonna do a whole video on it, but just be aware, if you want to do something

And I'm not gonna do a whole video on it, but just be aware, if you want to do something with a rich editor, this probably supports it. There's also some third party plugins that make it even more powerful. So basically if you look at tip-tap, anything you want to do with tip-tap, you can do it in the rich editor in Filament. (upbeat music) [BLANK_AUDIO]

(upbeat music) [BLANK_AUDIO]