(upbeat music) All right, we're gonna continue customizing our Filament app. And one thing I wanna go back to from the last video is we created this profile page. But I don't actually like, the Filament standard is that it lives here kind of by itself. To me, I don't really know how to get out of here. The only way to get out is actually to hit the cancel button. And so I want to just make that a little bit different.

The only way to get out is actually to hit the cancel button. And so I want to just make that a little bit different. And Filament lets us do that. Let's do that really quickly. On the profile method here, you can also pass in whether is simple, should be true or false. It defaults to true, but I want it to be false. So I will just say is simple, false. Save that, come back, refresh the page.

So I will just say is simple, false. Save that, come back, refresh the page. And now if I click profile, it takes me to its own page. I still have my nav bar, I like this better. But I don't like is, I think this doesn't look great. I wanna put this into a section. So we can fix that really quickly as well. Let's go to my edit profile page, which is right here. And all I have to do within here is use the Filament section. We'll call it profile information.

And all I have to do within here is use the Filament section. We'll call it profile information. I don't need any of this stuff. And I just need to pass in the schema. I'm gonna wrap everything that we currently have in this schema, reformat it. And if I refresh, now my profile information section is here. This looks a lot better to me. I can customize this however I want, but just really quickly, this looks nice.

I can customize this however I want, but just really quickly, this looks nice. So, okay, now we're really done with the profile. What I wanna move on to next is, how do you customize all the little details of Filament? And not just customize, but how can I make it so that I don't have to customize everything? Let me give you a good example. Right here on this features page, we have the new feature button.

Right here on this features page, we have the new feature button. And what I don't like about this is that the word feature is not capitalized. So, there's a really easy way to fix that. If I go to my feature resource, and I have done here the pages, this is the create feature, but actually this button itself is an action. And so, I would need to go to the list features,

but actually this button itself is an action. And so, I would need to go to the list features, and I can see this is the create action. So, this defines what that action is, and I can just say label, add feature. Sure, if I wanted it to be add, and now you can see it changed. I want it to be create feature. So, I like this, this is good. Or let's go back to Filament uses new.

So, I like this, this is good. Or let's go back to Filament uses new. So, let's just use new. And so, now we have new feature, and it is capitalized, which is what I want. But what I don't wanna do is add 20 more resources to this app, and have to customize that every single time. What I would rather do is set it once, and then every time I have one of these buttons, it's just gonna look the way I want it to look.

and then every time I have one of these buttons, it's just gonna look the way I want it to look. So, in order to do that, what I'm gonna do for this, and a lot of other customizations, is I'm gonna create a service provider, specifically for Filament. So, I'm gonna go to my terminal, and I'm going to Artisan make a provider. It's gonna be the Filament UI service provider. This Artisan command is really nice,

It's gonna be the Filament UI service provider. This Artisan command is really nice, because when I go to my project, I can see that the provider was created, but also, Laravel was smart enough to register that provider into my providers.php. So, I don't have to worry about doing that. So, I'm gonna go to this Filament provider, and I have the register and boot methods, and this is where I'm gonna put all my customization here.

and I have the register and boot methods, and this is where I'm gonna put all my customization here. And so, I want to go back to the list features, and I wanna take this label off. I don't want to manually do it. I want to configure my app so that this should be capitalized, and if the model was two words, I want everything capitalized. So, I'm gonna work on that now. So, we'll go back to my code, and I need to get to the UI service provider.

So, we'll go back to my code, and I need to get to the UI service provider. And in the boot method, I'm gonna paste in some code here, and explain how it works. So, I've got this Create Action. I don't need that. We're just gonna import the standard Filament Create Action. And what this is doing is it's taking that action. So, every time I have a Create Action,

And what this is doing is it's taking that action. So, every time I have a Create Action, anywhere throughout my app, it's going to take that action in this closure, and apply for the label, it's going to replace the label with uppercase words of the model label. So, you don't have to know exactly how this works. You can dig into it if you like, but the bottom line is, now when I refresh,

You can dig into it if you like, but the bottom line is, now when I refresh, I get new feature. And if there were multiple words, they would all be capitalized. And so, this gives me what I want, and I don't have to think about it again. Now, let's say if, for some reason, I wanted to override it, I can. There's no problem.

I wanted to override it, I can. There's no problem. This is just a default. So, Filament is going to use this, but then you can always override at the point. So, if I wanted a different label, and I could just say test. And now I go to my browser, I can override it, but this just gives me a better default. And starting with these better defaults

but this just gives me a better default. And starting with these better defaults is really, really valuable. So, a couple of other things you can do in Filament on this table. I've got this thing, this icon, and the apps I build are usually used by people that aren't very tech savvy. So, icons don't usually explain enough what that thing might do.

So, icons don't usually explain enough what that thing might do. When you click on it, you can see, oh, I can actually maybe toggle some columns, but some of them are not toggleable. And so, these ones are, so I can apply that, and then close it out, and I have the created app updated at. So, that's nice. But there's a couple of things I want to change.

So, that's nice. But there's a couple of things I want to change. Number one, I want this to be more explicit what it does. Number two, I would like to be able to have full control over. I want to toggle whatever I want. I would also like to maybe reorder the columns. And so, we can do that as well. And all we have to do is come into our, let's remove this label because we don't want that anymore.

And all we have to do is come into our, let's remove this label because we don't want that anymore. And then let's go to our Filament UI service provider. And what we're gonna do is, we're gonna also do a table. So, we need to find the Filament Tables. It's up to the top. And then we're gonna configure using. Now, it gave us some stuff. Let's get rid of that.

Now, it gave us some stuff. Let's get rid of that. Okay, so we have our table here, and the first thing we can do is re-orderable columns. So, I'm gonna do this. I'm going to give it a semicolon, and let's go back to the browser, see what happens here. When I refresh, I've got re-orderable columns. So, look, I can move the name to the bottom.

When I refresh, I've got re-orderable columns. So, look, I can move the name to the bottom. I can put created at the very top. I can apply it. And now it's re-ordered all of my columns. So, that's really nice. I like having that feature. And I want that by default on every table. So, now it is. Now, another thing I would like is toggleable columns.

So, now it is. Now, another thing I would like is toggleable columns. And so, I would like to maybe find toggleable columns. There's this has toggleable columns, but it returns a boolean. That's not actually what I want. So, we're gonna have to actually do a different thing. I'm going to find the column. So, Filament Tables column. And we're gonna configure using this.

So, Filament Tables column. And we're gonna configure using this. And then we're going to, by default, make them toggleable. Now, this option is toggled hidden by default is true. I don't want that. I just want them all to be toggleable. And so, now when I refresh and I click my columns, every one of them can be turned on or off based on my preference. So, I apply that.

based on my preference. So, I apply that. I can re-order them, put costs up here, apply, and everything works just like I want it to. So, this is really nice. There's another thing that I notice as I'm looking at this is the cost column is already sortable. So, it's nice I can do that. The name column, for some reason, is not sortable. So, again, if I go into Filament

The name column, for some reason, is not sortable. So, again, if I go into Filament and I look at the feature resource. If I come up here, I look at my features table. Let's go in here. And name is not sortable. We can make it sortable. So, if I do that, refresh, now name is sortable. That's great. This is a decision I've made in my apps

That's great. This is a decision I've made in my apps and you might not make the same decision. But what I like to do is go into my Filament UI service provider and I want to say text column. And I'm gonna configure using, we're gonna pass in the text column and I want to make it sortable. If you want to decide to make everything sortable or searchable by default,

If you want to decide to make everything sortable or searchable by default, and then there's one that you don't want sortable, you can just pass false in here. And so, now the name is no longer sortable and you're just gonna really have to decide, does it work better for me to explicitly define every column, whether they should be sortable and searchable or do I want to make that the default and just override? It's completely up to you.

or do I want to make that the default and just override? It's completely up to you. But in my Filament UI service provider, we'll say the text column is sortable and searchable always. Okay, so I actually have a lot of these preferences that I like and so what I want to do is actually share with you a guest or gist. I don't know how to say this thing, but I want to share this with you there. I'll put a link in the description of this right here,

but I want to share this with you there. I'll put a link in the description of this right here, but these are all of the things that I like to do that kind of work for me always. So let's come into my Filament service provider. I'm just going to put this in the comments here. So what I'm gonna do is take all of these presets that I've shared with all of you. I'm just gonna copy everything, go back to my service provider.

I'm just gonna copy everything, go back to my service provider. I'm going to paste it in here and I'm gonna delete all these because they're actually all included. And we can just walk through some of them really quickly. But when I go back to my app and take a look at certain things that have changed, let's go back up to the top and look. So the first thing is when a field has multiple words

let's go back up to the top and look. So the first thing is when a field has multiple words like due date, we change the label from lowercase to uppercase. So if we look at the create feature, target delivery date, these are all three capitalized. If I comment this out and refresh, we have target delivery date. I just think the capitalization looks better. So we'll bring that back. And basically what we're doing is kind of the same thing

So we'll bring that back. And basically what we're doing is kind of the same thing we did with the create, which is we're getting all of the name and then we're replacing it and doing a UC words on it. Selects searchable and preloaded by default. So when you have a select field like this one, this is now searchable. So if I type planned, this is how I want it to be instead of a standard select for date pickers.

this is how I want it to be instead of a standard select for date pickers. I have a sensible min and max date. I've got users in my apps that will have dates like 3000 or zero. Figure out what your sensible dates are, but set these here. Again, these can be overridden any time you want on a specific date picker. If you need one to go back to the year zero, sure, but this is a good sensible default. The phone thing that we did earlier, this is a macro

but this is a good sensible default. The phone thing that we did earlier, this is a macro and macros are really useful. So let's go to my edit profile. We did this in last video. Instead of having this stuff all here and the next time I need to use a phone, I'm gonna have to remember to do all this stuff. Let's just say phone. And we can also make it required

Let's just say phone. And we can also make it required because we don't need every phone to be required. But by doing that, we have this macro that we've defined on the text input that's gonna apply all those different things that we had. And so we go to our browser and go to my profile. My phone is still working just like it did, but now I can reuse that over and over again if I need phone inputs throughout my application.

but now I can reuse that over and over again if I need phone inputs throughout my application. All right, let's go back to our provider. What else do we have here? If it's a modal, do not close by clicking away. If you have a feature and you're creating the feature and you go here, but then you try to go away, it gives you this warning. That's really nice, but if I go to my feature resource and I go to the bottom and let's say I don't want

That's really nice, but if I go to my feature resource and I go to the bottom and let's say I don't want to create a feature from a page, I wanna create it from a modal. So if I do that, I come back here to my features. If I click new feature, here it is. If I start typing, but I click over here, without that in my service provider saying, click away should not close it, I would have lost all this

click away should not close it, I would have lost all this and I would have not have gotten that warning that I was about to lose all my information. So I like to say if it's a modal, don't close it by clicking out here. Make sure they proactively cancel or hit this X button. So you can look through the rest of the things I have in this Filament UI service provider, but it's all really good sensible defaults

in this Filament UI service provider, but it's all really good sensible defaults so that your app works better. This one right here, I wanna show you and then we'll be done. The columns, now instead of just that icon, I actually have an action with a label that says it's columns and I've got two rows. So if I wanna move the name to the front, I can do that. And to me, this is a much nicer, sensible default

So if I wanna move the name to the front, I can do that. And to me, this is a much nicer, sensible default for our Filament app. (upbeat music)