Why Build Custom Field 0:00You can also extend Laravel Nova by defining custom fields. So as we've already seen, Laravel Nova comes with a wide variety of different fields that you can choose from. But if you want to add your own fields, you can do that as well and just create and maybe even share your own custom fields. So in my case, I want to limit the post maximum size. So I want to have a title, but the title should only have a maximum length of maybe 255. So now of course I can add a validation rule for this, but I think it would be nicer if there would be like a little input component that has the input text, and then next to Generate Field via CLI 0:38So now of course I can add a validation rule for this, but I think it would be nicer if there would be like a little input component that has the input text, and then next to it I want to show the number of characters that are still available. So this is a custom field that does not yet ship with Nova, so I can just build my own custom field. To do this, it's similar to the tools and cards, we can use the CLI command. So it's going to be phpArtisan nova field, and then give it the composer package name that we want for this. So in my case, it's going to be beyond code, slash, and then I'm going to just call it string limit. Review Generated Structure 1:19So in my case, it's going to be beyond code, slash, and then I'm going to just call it string limit. And it asks us if we want to install the dependencies for npm. We compile the fields assets, and we add our fields into our composer.json file and update its own dependencies. Okay, so now let's go into Sublime and see what Nova generated for us. So in the nova components directory we now have the string limit folder for our custom field, and in there we also have a service provider just like a tool or a custom card, we have the field that we can implement, and our resources consists of a custom sass file for some custom styles.we have the field that we can implement, and our resources consists of a custom sass file for some custom styles. And now instead of only having one Vue component, we have three Vue components. So this is so that we can configure how this field will look like on the index page. So out of the box, it's just a span with the value of this field. And this is then being displayed on the listing on a resource index page. So this would be a index field for our custom field. Then we have the form field. This is the actual form element that we see when we create or edit our resources with this custom field. Modify Form Field UI 2:50This is the actual form element that we see when we create or edit our resources with this custom field. And then we have a detail field, which is the detail representation when we take a look at one of our specific resources. So this would be the detail representation. All right, so for our string limit field, I think it's okay if we use the detail and index field like they are because we only want to display the current value. So let's modify the form field. To get started, we still need to run npm watch so that our changes in the Vue file get compiled to the assets.To get started, we still need to run npm watch so that our changes in the Vue file get compiled to the assets. So go to Nova Components, String Limits, and then I'm going to run npm run watch to pick up the changes. Okay, so let's change our form field. So first I want to have a max property on our text input. So in here I want to have max and this will be equal to max length maybe. And then in here we have maybe a data method that returns max length. It's going to be 255 by default. Next I still want to display the information so that we can see how many characters we Use Field in Resource 4:22It's going to be 255 by default. Next I still want to display the information so that we can see how many characters we still have left. So just add a new p tag in here and in there I'm going to display max length minus value, which is the V model of this input length, so the string length. And then just say characters remaining. And to make this look a bit nicer, let's maybe add a margin of two and have a light text. Okay, now to use our custom field, we still need to add it into our custom resources. So go to app, Nova Post, since we want to use it in our post resource. And instead of having a regular text field with the title and the rules, I want to createSo go to app, Nova Post, since we want to use it in our post resource. And instead of having a regular text field with the title and the rules, I want to create this string limit field. So all we need to do is just swap this out by using string limit, import the class, and we can just use it like a regular field. So we could still say that it's the title and we could also define a column, just like a regular field that comes with Nova, and we can define the rules on it as well. So now if I go back to my post and create a new one, we see that we have the title, we have our maximum length, and now it should get calculated. That's cool. Make Max Length Configurable 6:15we have our maximum length, and now it should get calculated. That's cool. Okay. Now, as we've done with the custom cards, we can also pass meta information to our custom so that in my case, I want this to be configurable. So having this static as 255 in the field itself is not that good. So I want to be able to modify this value from the outside. So what I'm going to do, let's say we have string limit, make title, rules required. And then I want to say max 150. And in our custom field, we can just add a new method, call it max, and then we returnAnd then I want to say max 150. And in our custom field, we can just add a new method, call it max, and then we return this with meta, then just use max length, and this gets the value. So just as we did with the custom cards, we can just use the with meta method in here to pass additional properties to our Vue components. So to use this now in our form field, all we have to do is swap out this max length with form field, sorry, dot max length. And here as well, field, max length, and then we can get rid of our data in here completely. So all the custom meta information that you pass to the field class in here, it will be added as properties on your field property inside the form fields component.So all the custom meta information that you pass to the field class in here, it will be added as properties on your field property inside the form fields component. So if we now try this again and refresh, whoops, okay, we have an error. Let me see. Oh yeah, there is a typo in here. So it's max length, let's fix this, okay, try again, all right. So now we have the limit of 150, this still works, and now we made this configurable inside of our custom components. So now we can just change this to maybe 10, refresh, and now we have the updated settings inside of our components.So now we can just change this to maybe 10, refresh, and now we have the updated settings inside of our components. So this is how you can create your own custom fields in Laravel Nova. And there is still a lot more that you can do with it. So you're, for example, not limited to use an input field at all. You can also use extending some other third party Vue components. So you can add, for example, a custom color picker in here, or implement your own file upload mechanic, and then use a custom index field to display an image, for example, that got uploaded. So whenever you're in need for a custom field, or a slightly manipulated field that existsgot uploaded. So whenever you're in need for a custom field, or a slightly manipulated field that exists already, you can just roll your own and use it inside of Laravel Nova.
