How to Easily Create Custom Laravel Nova Fields - Advanced Laravel Nova Tutorial

[Music] what's up LEL Dar here and welcome back to a new video about larva Nova where we're going to have a look at how we could easily create custom larvel Nova Fields if you have used larel Nova before you most likely have seen the documentation where you will find a complete list of fields that you can Define in your admin panel well I said most likely because there obviously might be a custom field that you have got in your mind specifically for your program but it doesn't exist in larel Nova Nova allows you to create custom Fields giving you the flexibility to Define and incorporate fields that are unique to your admin panel I've got one example in mind but if you understand the flow of creating a custom field you could create any type of field you want so let's get right into it I have created cre a very very basic laral Nova application which has just one resource which is the users resource if we open the user table for a moment you'll see that I have added a simple long text column name description and the description of a user is nullable if we navigate back to the browser for a moment you will see that I've also opened my Local Host where you will find the default user resource that larva Nova generates for you once we try to edit the roow that we have you will see that I have added three rows right here for the description right here and one is the text area one is the tricks editor and one is the markdown editor these are all generated by Nova pretty cool awesome Fields don't get me wrong but I do want to make a let's say more fancier fields for this I want to create a custom field since I may be want to use it for multiple resources in my application now when you want to create a custom field you need to navigate to the CLI since since Nova offers a custom command which will generate all necessary files for you so inside your project directory you need to perform the PHP Artisan Nova Colin field command followed with a composer vendor package naming format this is used to identify and manage PHP packages in the composer ecosystem we first need to define the vendor which will represent the name of the package by either your organization or just simply your name so in my case I'm I'm going to name it code with Dari then we need to add the package name which will simply represent the name of your package but this will also be the name you need to use when you're going to Define your field in a resource so if we navigate back to PHP storm for a moment open our user resource and let's get rid of the three description fields that we have so we want to name it something along the lines of markdown editor colon colon make or whatever right so let's navigate back to our terminal for a moment for/ markdown Das editor Now using this format composer can efficiently resolve package dependencies and install the required packages for necessary sources once we H enter you will see a couple warnings but don't worry about it since we can still move on with our Fields right now it's asking us whether we want to update our composer packages so let's say yes now let's also installed the field mpm dependencies so let's say yes as well and these are needed because custom Fields alarva Nova require additional front-end assets such as JavaScript libraries or css Frameworks to function properly now let's compile the fields asset as well all right and this is pretty cool since larva Nova Fields include the frontend scaffolding to build your field each field even contains its own composed adjacent file we're done right here so let's navigate back to PHP storm Now by creating a custom field alarva Nova has generated a new directory for us which is stored in the root of our project directory which is named Nova components once you open it you will find one directory inside of it which has a directory name that is the Pasco case format of the package we have generated named markdown editor in here you will find a couple directories and files so let's cover them real quick the first directory is the disc directory Dory and this directory contains the compiled assets of your field these assets include the JavaScript and CSS files that are necessary for the custom fields to function properly in larel Nova the disc directory is typically used when Distributing the custom field package as it contains the optimized and minified version of the assets ready for production use then we have the nodecore modules directory and you might wonder why since most of the time we also have a nodecore modules directory fre inside the root of our project well each package in Nova has its own mpm necessary packages and so on since in the root you will also find a package.json and a package-lock dojon file so whenever you want to add a package to your custom field for let's say the markdown editor you need to add it inside the package itself and not in the root of your project but give me a couple minutes and I'll show you how this works we have the resources directory where you can Define your custom CSS and your custom JavaScript well the JS directory is a bit more special since all of the magic for a custom field well almost all of the magic will happen right here now quick notes for the developers who are new to Nova and haven't really used it before Nova is built using vue.js and vue.js is a JavaScript framework commonly used for building user interfaces and single page applications therefore if you open the components directory you will find files with a viw file extension the first file right here is named detail field and this component is responsible for displaying the custom field while viewing the details of a resource in the Nova admin panel so right here you will find how it should be displayed on where is it right here the user detail page the second file that we have right here is the form field the form field component defines how the custom field should appear and behave in the create or update form of the resource it handles the user input and validation for the field allowing users to interact with and modify The Field's data and finally we have the index field and the index field component determines how the custom field should be displayed in the index or listing view of a resource it defines the visual representation of the field in a table or format or any other format suitable for your index view so we're basically talking about the table overview that we have right here now we're going to continue on for now but most of the magic will happen right here so once we finish the other files and folders we will continue on now next to the Resources directory we have the final directory which is the source directory which has two files the field service provider which as the name applies is a service provider class that is responsible for registering the custom field with larva Nova and we have the markdown editor class where you will find the component name right here so markdown Das editor but here you could also Define additional methods that you can chain on your method to retrieve or pass data through but that's something for maybe another video now each package that we have serves with a composer. Json file package.json file and a package-lock dojon file now let me show you why if we close off all the tabs that we have have accept the user resource go right below our password field write down markdown you can see that we could import a package created well by me code withi and it's named markdown editor so let's do so let's use the make method and let's name it description with a capital if we navigate back to the browser for a moment try to edit our user you will see that it has added a simple text field which is the start of each new custom Nova field it has a value because I have created this is my description for my user but if we delete it you will see the placeholder of description but since we have added a custom field we could customize this on our form field so let's navigate back to PHP storm open the Resources directory JS component our form field where you will find an input field right here with which will represent the input field that you will see on your front end so let's navigate back to PHP storm and let's say that instead of a placeholder of field name we're going to pass in a string of let's say this is my markdown editor placeholder now if we navigate back to the browser refresh our endpoint get rid of our description for a moment you will see that our placeholder is still the name of the field and this is happening because we haven't compiled to the field right so let's navigate back to the CI for a moment let's change our directories into our Nova Das components directory perform an LS right here because we have our markdown directory so let's say CD into our markdown editor perform another LS right here right here we need to compile our field so we could say mpm run watch which is coming from let us navigate back to PHP store open the package adjacent file where right here you will see a watch command now we could also run the mpm Run def command but since we're going to make changes over and over with our markdown package it is better to use the mpm Run watch command because the JavaScript and CSS assets of the project are compiled in continuously monitored for changes if we then navigate back to the browser for a moment refresh endpoint remove our description again you will see that this is my markdown editor placeholder has replaced the description placeholder now there are tons of markdown packages that we could use since there are tons of few packages available on the internet for now I want to stick to a package named F Q which is from Q editor I've already opened it inside a new tab which is f up. github.io f-q let's click on on get started click on installation in the sidebar and since we're using mpm I want to scroll down to a bottom because I want to copy the mpm install Command right here that I need to perform inside my CLI to install this package so let's navigate back to the CLI now quick note we're going to add this package inside our Nova components markdown editor directory so if we paste it right here hit enter and give it a moment since mpm is installing all dependencies for this package all right as you could see the package has been installed if we navigate back to PHP storm scroll down inside our package adjacent file to the dependency section where you will see that the package of few up named f-q has been installed now let's put it into work if we navigate to the browser for a moment and click on usage you will see all these different methods on how you could register the package you can use use it right inside of the browser you can use it in a single file component or you can locally register it and that's actually the option that I want because if I navigate back to PHP storm for a moment and open my form field again scroll down to the bottom you will see that it's already using an export default and if we navigate back to Google Chrome you will see that the local registration also uses the export default so why should we make our lives more difficult than it already is so what I want to do first is copying both import statements navigate back to PHP storm and add it right above my export default and then I want to copy the components property and the components property is used to register components that will be used within view components it is an object where each key represents the name of the component and the value representing the actual component itself and in our case it is cu editor so let's navigate back to PHP storm and let's paste it right below our properties I'll align this a little bit all right all right looks better so right now we should be able to use our Q editor component so let's navigate back to the browser where right under basic usage right here you will see that we can use Q editor component inside the template element so once again let's copy it let's navigate back to PHP storm and like I've just mentioned it already has an input field that we basically need to replace but for now let's actually comment it out for a moment and paste our Q editor component right above from it and let me actually align it on the line below all right before we could output it inside the browser let me actually refresh it we should obviously go back to the CLI and rerun the mpm M run watch command if we then navigate to the browser and refresh it you will see that it has added the markdown editor but the design is a little bit messed up we will get into that so let's cover some other topics real quick before we focus on the design if we open the documentation for a moment and click on toolbars in the sidebar you will see that we have an option to customize the toolbar by adding in a colon toolbar option right here and into our Q editor component as a non-vw developer I think this is called binding directive which is used to pass data from the parent components to a child component but please correct me if I'm wrong right here so if you want to display only the options bolt italic and underline in the toolbar you can use the call and toolbar binding to pass an array of these options as a prop to the Q editor component so let's give it a try let's navigate back to PHP storm and right below our our team we're going to set the toolbar if we navigate back to the browser locco host refresh it you will see that we only have the bolt italic and the underline option available now I'm going to get rid of it for a moment because I'm quite happy with the option it already possesses now another cool feature that it offers and which I actually recommend when you're going to work on an editor is using the options binding which we need to set equal to a variable so let's say options all right now let's define options by going right inside of our export default where we're going to define a data where inside the data we're going to return a set of curly braces options call in curly braces again and data right here is used to define and initialize the data properties for a component the data function returns an object containing the data properties and their values so let's define some FS right here and these are actually all coming from the documentation so let's go back to our documentation let's say options and right here let's actually copy the entire options to make our life a little bit easier so the debug mode is info we're going to define the toolbar of Bolt italic underline we can define a placeholder we can set it to read only and we can Define the team so let's navigate back to PHP storm replace our empty options with the options that we just copied all right now let's actually keep the read only to true for now and let's actually disable the team in our ke editor component if we navigate back to Google Chrome refresh our Local Host you will see that compos on appec has been defined as a placeholder we can't click on it to type because read only has been enabled and we can only see both italic and underline but for now let's set the read only equal to false the placeholder of description through a custom editor because I want the entire toolbar and I actually don't need a debug either now using this method you will keep your cre editor component pretty clean now let's continue on let's navigate down for a moment into our set initial Value method and let's add a console.log right here and what I want to console.log is this colon field if we navigate back to the browser inspect our page for a moment and open the console refresh the page you will see that this field refers to the field object that contains information about the field being rendered coming from our Lara Nova custom field we have created in our user.php resource so the component is named markdown dedit the attribute is the description that we have passed in right here it has a name the index name the panel is update user code with Ari and so on so this is all data that you could use to manipulate the input field now what we could do is using these values to persist data into our database and let me show you how we could do that well let's navigate back to PHP storm and get rid of our console lck scroll up to our Q editor component and let's actually start off by setting the ID first so let's say colon ID is equal to field. attribute we have the type which is equal to text then I want to set the v- model which is a directive that allows two-way data binding between a form input element and a component's data in our case I actually want to add colon content to it as well which represents the name of the data property that holds the content of the editor by using V model content any changes made in the editor will be reflected in the value property of the component and vice versa now I want to set it equal to the value which is coming from the initial value right here which will be set equal to the field value also you have an option to set the colon content type which basically tells the editor how data should be persisted in the database now I want to go with HTML which will WP the content with the right HTML tags now let's give it a try let's navigate back to the browser for a moment and close our inspect let's refresh the page let's add a description of let's say test description let's say update and continue editing you will see that the description has been updated to test description now let me actually test it out inside the internal database of PHP storm let me quickly connect to it so root my very secret password my very cool database name all right let's open it now let's go to the users table where you will see that our description has been added with an opening and closing paragraph tag now there's a small issue that I want to fix as well if we navigate back to the browser open the users resource you will see that our description has been added to our table overview I want to turn this off one option is to navigate to our user resource so right here and chain the height from index method navigate back to the browser refresh it you will see that we have turned it off on the index field this is actually awesome but let's say that you want to use the markdown editor for multiple Fields this means that that you need to use the hide from index method for all markdown editors in your application now I personally think that this would be a lot cooler if we could turn it off globally and let me show you how you could do that let's navigate back to our project for a moment Let's Open The Source directory and our markdown editor where right below our public component property where you can overwrite the public show on index property where we need to set the value equal to false so let's open our user resource for a moment let's get rid of the height from index method let's navigate back to Google Chrome refresh it you will see that we have turned it off without adding the hide from index method on our field but we have disabled it globally now the last thing that I would like to change is the height of our editor so let's edit our FS for a moment because you will see that it has not been aligned pretty well now like I have mentioned mentioned before each field that you create comes with this custom stylesheet inside the Resources directory CSS directory and a fields. CSS file so right here I want to quickly add a couple classes just follow along ql- toolbar. ql- snow plus. ql- container. ql- snow and what I want to do right here is set the Overflow equal to hidden and I also want to set the height equal to 100 pixels if I navigate back to Google Chrome refresh it you will see that we have changed the styling to our field as well now this was it for this video where we covered how we could easily create custom larel Nova Fields you could create any type of field that you want as long as it is available in view now I could have gone on Forever by making changes but this is a good starting point for developers working on custom functionalities in larva Nova if you want to see more content like this let me know in the description down below so I could create more larva Nova tutorials if you do like my content and you want to see more leave this video a thumbs up and if you're new to this Channel please hit that subscribe button

Channel: Code With Dary

Views: 2,182

Keywords: how to integrate laravel nova with other laravel packages, exploring the latest features of laravel nova, customizing laravel nova's css and logo, how to create a beautiful admin panel in laravel nova, laravel nova complete tutorial 2024, custom fields laravel nova, how to create custom laravel nova fields, laravel nova fields, complete laravel nova, laravel nova, laravel nova admin panel, laravel nova step by step, laravel nova 4 tutorial, laravel nova for beginners

Id: eWIRI9DaoxA

Length: 23min 14sec (1394 seconds)

Published: Mon Jan 08 2024