Filament allows you to configure components, like form fields and table columns, simply by chaining on a method onto the object. For example, let's change the date format of this availability field here. To do this, we can chain on displayFormat, and then pass in our new format. So, day, month, year. Now when we refresh, the date format of this field has been updated. However, Filament also allows you to globally configure components, and this is great for reducing repetition. For example, you might want all date pickers in your app to use the same format. To do this, we can use a service provider, and the service provider will tell Filament that each time we make a new date picker object, we can set the displayFormat. So, let's cut this, and go into the AppServiceProvider. Here, we can use the DatePicker class, and a static method called configureUsing. This method

the displayFormat. So, let's cut this, and go into the AppServiceProvider. Here, we can use the DatePicker class, and a static method called configure using. This method accepts a function. The parameter of this function will be the object that we are configuring, so in this case, it can be a DatePicker. And inside the function, we're going to configure the component. So, DatePicker, arrow, displayFormat. Now, each time we instantiate a DatePicker, the displayFormat is set on that object. To double check, the resource now doesn't have a displayFormat set. And if we refresh, the displayFormat is still there. Now, let's make a new DatePicker, and just double check that this works for every component. As you can see, when we select a date on this second DatePicker, it's also using our updated date format. Let's swap this around. Now, we can use month, date, year. And as you can

As you can see, when we select a date on this second date picker, it's also using our updated date format. Let's swap this around. Now, we can use month, date, year. And as you can see, the month is now first. There are several advantages to globally configuring components like this. The first is, if you're adding the same configuration methods to multiple components, it can make the code quite long and repetitive. Also, if you have other developers working on the project, they then have to remember to also add those same configuration methods. Otherwise, things can easily become inconsistent across your code base. And also, I find it quite a waste of time to then have to type that out every single time I make a new date picker. Now, this doesn't just apply to date pickers. Any component in Filament can be globally configured with these sorts of settings. Let's make our text input globally

new date picker. Now, this doesn't just apply to date pickers. Any component in Filament can be globally configured with these sorts of settings. Let's make our text input globally configurable. First, let's clean up by removing the configureUsing from our service provider, and also removing the duplicate date picker. In our example projects, we can open the text input file. I think the goal here is going to be to add a new configuration for the max length of text input. For example, you might want all text input objects to use the same max length, 255, until you tell it otherwise. This will allow a user to configure on a case by case basis the max length, but still provide a sensible default. Let's add a new max length configuration. So protected, int or null, max length. We should probably also accept a closure here. This allows us to then evaluate that and provide a dynamic max length. The default value

configuration. So protected, int or null, max length. We should probably also accept a closure here. This allows us to then evaluate that and provide a dynamic max length. The default value for this property should probably be null. And then that means there's no max length applied in the view. We now need a setter for the max length. So public function maxLength. This is going to accept an int, closure, or null, and return self. And we're going to set this max length property to be the length, passing it up here, and return this. Now we can set up a getter for this max length. So public function getMaxLength. This is going to return an integer or null, and we need to return this, evaluate this max length. This will unwrap the function if it exists. Now in the view, we can set the

This is going to return an integer or null, and we need to return this, evaluate this max length. This will unwrap the function if it exists. Now in the view, we can set the max length up, just using front end validation for now. Now in Filament, all fields can use back end validation by default. And then they also have some front end validation to reduce the number of network requests that are being sent. But for now, we're just going to make this very simple and pass in a max length to the input. So max length, and I'm going to pass in the getMaxLength value. Now in our test form, we can pass in a max length, so max length 10 just for testing. Now let's try and pass something in that's more than 10 characters. As you can see, the browser hasn't allowed me to type in more than 10 characters into this input, which is exactly what we want here. Now let's add a second input and use the same max length of 10. So here

the browser hasn't allowed me to type in more than 10 characters into this input, which is exactly what we want here. Now let's add a second input and use the same max length of 10. So here in our test form, we're going to make a second one. I'm going to remove the custom label here, since we don't need that anymore. And this one's going to be called name. So we need a name input variable and an email input variable. Now we can pass these in separately. And in our test form, we can now render both inputs. So name input and email input. So the name, I'm going to type in 10 characters, and I can't type in any more. And the same for the email. Perfect. We can now extract this into our configureUsing method. So we have our textInput here. Let's add a new public static function configureUsing. Now, as a reminder, it needs to be static because we're not calling the configureUsing on an instance of the component. We're

input here. Let's add a new public static function configureUsing. Now, as a reminder, it needs to be static because we're not calling the configureUsing on an instance of the component. We're calling it from a service provider on the class itself. public static function configureUsing. Now we're going to pass in a function here. So Closure, configure. And this is going to be returning void. Now we need somewhere to be able to store these configurations. And since this is a static method, we need to use a static property on the class. So let's make a new static property, protected array $configurations. This is going to be set to an empty array by default, and it needs to be static. Now in the configureUsing method, each time we call it, we need to add this configuration closure onto the array. So static or self::$configurations. And let's push this configure.

Now in the configure using method, each time we call it, we need to add this configuration closure onto the array. So static or self.configurations. And let's push this configure function onto the array. Now, since we're returning void, we don't need to do anything else. Now we need to actually apply these configurations onto the input each time it's instantiated. So to do this, we can use this make method here, for example. So let's save the instance into a variable first. So the input. And then we're going to be looping through each of the configurations and applying them to the input object. So for each self.configurations as configuration, we can call the configuration and pass in the input. Finally, we need to return the input. So now let's go back into our testForm. We can get rid of these two maxLengths. Now, in my demonstration earlier, we used a ServiceProvider to configure classes.

So now let's go back into our test form. We can get rid of these two max lengths. Now, in my demonstration earlier, we used a service provider to configure classes. But since we're only working in one file, we can just do it here. So let's use text input, configure using, pass through our function, which accepts an input. We're then going to modify that input, pass in the max length. And now for each of these inputs, if I reload, they should still both have their max length set up. We can verify this by using the inspector. As you can see, the max length is passed as 10.