در حال بارگذاری ...

Survey Nova Field Types0:00

Okay, it's time to start fleshing out our Book resource with some of the other fields that are available on a Book. But before we do, I think it's important we just take a quick glance through the available fields that Nova has. And before you start using Nova for real, just take 5 or 10 minutes to look through this list because it will save you so much time if you have in your head the fields that Nova actually makes available for us. If you're going to have to upload audio, for example, use the audio field. If you have code in your application, use the code field. If you have a password and password confirmation, there are fields built for that purpose.

Add Featured Boolean0:36

If you have code in your application, use the code field. If you have a password and password confirmation, there are fields built for that purpose. So if you know these fields, you'll know which ones to reach for when you start building your resources. In our case, looking at the JSON for a Book, notice that we have this isFeatured property, which is cast to a boolean. It's a tiny integer in the database cast to a boolean inside our Book model. There is a boolean field available in Laravel Nova that is perfect for any form of booleans you have in your models. Let's jump into the IDE and implement it.

you have in your models. Let's jump into the IDE and implement it. So at the bottom of our fields array, I'll pull boolean in and I'll use the static make method as always. I'm actually going to call the display label just featured, and then I'll use that second parameter to pull in the isFeatured property from the model itself. If I do that and I jump into my front end and refresh, you'll see the index now has this featured column where we have this green tick and this red cross, depending on whether the book is featured or not. By featured, I'm talking about whether it should be displayed on the homepage.

the book is featured or not. By featured, I'm talking about whether it should be displayed on the homepage. So this is very important for an admin to be able to quickly review which books are or aren't featured. Now that's a good point, are or aren't featured. Currently there's no way to easily see which books are featured, but as with most fields in Nova, we can simply add the filterable method. So if I add the filterable method and refresh, sure enough, in the filter dropdown, I can now select just featured books. I can select books that aren't featured, or I can click it a third time to reset and

now select just featured books. I can select books that aren't featured, or I can click it a third time to reset and show all books. If I click to edit a book, you can see that this is actually represented by a nice checkbox and it's very easy to toggle on or off. And going into the edit view shows me that it would probably be helpful to have some help text here, so I'll add that now. We can say exactly what GitHub Copilot recommends, whether this book is featured on the homepage, and now we have that useful help text that will just help us decide whether we want to feature this book or not.

Upload Book Covers2:51

and now we have that useful help text that will just help us decide whether we want to feature this book or not. Okay, what's next? Well, just under is featured we have cover. Most books have a cover, and it's a very easy way to identify which books are actually in your library. If you can scan the covers, that's probably actually easier in most cases than scanning the titles. So how can we support images, uploading, downloading, editing, changing images and storing them in Nova?

So how can we support images, uploading, downloading, editing, changing images and storing them in Nova? Nova makes it incredibly easy with the image field. So I'm going to come down under the id here, just above title, and import the image field from Nova. That make method comes in handy once more, and I can call cover. Now I'm going to chain on the path method, and this defines where inside the disk that you're storing on, this will be stored. In our case, I'll use the covers directory. If I want to customize the disk beyond the default, I can also call the disk method.

In our case, I'll use the covers directory. If I want to customize the disk beyond the default, I can also call the disk method, but seeing as public is my default disk, I'm just going to remove that. With this in place, we should actually start seeing book covers appear inside our UI, and you can see that. If I click into a book, you see it here, I can download the cover, although if you want to prevent downloads, you simply chain on the disableDownload method, and then it will disappear inside the UI here. I can remove that once more to allow downloads, which I think is absolutely fine in most cases, particularly as it's administrators using Nova.

I can remove that once more to allow downloads, which I think is absolutely fine in most cases, particularly as it's administrators using Nova. And I can edit this in order to have a nice image upload where I can choose a new file if I want. I'm able to obviously click on this and maybe switch out the cover, and then you'll see a nice little preview here, and I'm able to go ahead and update that. Now Nova's file documentation is in-depth. File fields apply to anything to do with uploads, so whether that's a file, an image, an avatar, these things all fall back to a file field under the hood. So take a look at the file documentation for all of the options that are available, and

Attach PDF Downloads4:49

these things all fall back to a file field under the hood. So take a look at the file documentation for all of the options that are available, and you'll see it's very customizable. Pretty much any need you can think of, even supporting Vapor uploads, if you're using Laravel Vapor, are built right into Nova and work out of the box. Speaking of file fields, note under cover we have another field called PDF, and here's the idea. Say something like Emma, the book Emma. It's in the public domain, so there's nothing stopping us adding the PDF as a downloadable resource for our users.

It's in the public domain, so there's nothing stopping us adding the PDF as a downloadable resource for our users. If they can't loan the book because we have no copies left, they can still access the PDF online. In order to support this, we'll need to use the file field instead of the image field, so let's do that now. Right at the bottom here, I'm going to grab the file field, and again, call make, and here we can just use PDF as the title. I'm going to add this to a new path called PDFs, rather than covers or at the root of our storage, and once I've done that, I should see PDFs available inside Nova.

I'm going to add this to a new path called PDFs, rather than covers or at the root of our storage, and once I've done that, I should see PDFs available inside Nova. Let's jump back into Nova itself, and you can see PDF here where I can choose a file, and I could, for example, pick Emma, hopefully, if I come back up here and select it. Here's the Emma PDF. I can update the book, and then you can see Emma here. Obviously, Emma is the wrong book. This is George Orwell's 1984, so if I've got that wrong, I can come in and edit. I can delete this file, and I get a nice little confirmation. I can update the book again, and now the PDF has gone, so just as easy to implement file.

Create Rich Text Blurb6:24

I can delete this file, and I get a nice little confirmation. I can update the book again, and now the PDF has gone, so just as easy to implement file uploads as it is to implement image uploads, and the experience is tailored dependent on the file type. Something else we've talked about is the blurb. Most books have a blurb, a little bit of information that tells us what the book is about. Why should we read this book? For most books, you might get away with just plain text, a few paragraphs, but some books might want a little bit of special formatting. They might want to highlight certain words, make them bold or italicized.

might want a little bit of special formatting. They might want to highlight certain words, make them bold or italicized. How can you do that? Well, you're going to have to use either some form of markdown or HTML, and Nova supports both of those options. There's a markdown field, and there's a HTML editor called Trix. Trix is a third-party editor. Nova ships with first-party support for it. Let's make use of the Trix editor for our blurb. Under title here, I'm going to import the Trix field, and I can just use blurb as the

Let's make use of the Trix editor for our blurb. Under title here, I'm going to import the Trix field, and I can just use blurb as the title. Let's see what that looks like. If I reload the details page for George Orwell's 1984, here's the blurb. Note that it's collapsed by default. By default, on any field like this, it will be collapsed, and you can show or hide it. That makes sense if we have a massive blurb. If we have 10 paragraphs, we don't want that cluttering up the detail view. But if you know that your blurbs are going to be quite short or your content inside your

If we have 10 paragraphs, we don't want that cluttering up the detail view. But if you know that your blurbs are going to be quite short or your content inside your Trix editor or markdown field is going to be quite short, you might want to always display it. And if that's the case, you can chain a method on to the field, alwaysShow. If we add alwaysShow and jump back in, now there is no collapsing. We just see the full content as it is there in the field. But the magic of the Trix editor really comes into play when we edit the book. And here you can see we have a full, rich text editor. I can select a word and click bold.

And here you can see we have a full, rich text editor. I can select a word and click bold. I could select another word and italicize it, and another word and put a strikethrough. I can add links. I can upload files. You can see how powerful this Trix editor is. But I don't like that we have to scroll to see all of the toolbar options, and that we don't make the full use of the width we have available here. If you want to turn over to make use of that space, you can add another method onto your field, fullWidth.

If you want to turn over to make use of that space, you can add another method onto your field, fullWidth. And if you add that method and jump back into the browser, then yeah, fullWidth Trix. We have the full width of the editor available to us. We can see all of the toolbar, and that will help with some of these fields where you want to see everything. You're not necessarily bothered about everything being uniform and in line. You just want to be able to access the full width of your page in order to maximize on space. And again, I can go ahead, make a few words bold and italicized, maybe make this one.

space. And again, I can go ahead, make a few words bold and italicized, maybe make this one strikethrough. If I update this book, you'll see now on the details page, I can see that formatting directly inside the output. So that's super useful. I can see my actions. I can make sure everything's in place and correct. And then I'm able to obviously pull that out from my database and show it on the front end.

Format Purchase URL Display9:42

And then I'm able to obviously pull that out from my database and show it on the front end. Okay, let's take a look at another couple of fields. How about purchase_url? So you might think, oh, purchase_url is just a text field. And yeah, you could definitely represent it as a text field. But a URL is a little different from text, isn't it? Because you can click a URL to go somewhere. Now for a book, a purchase_url is basically, where can I buy another copy of this book from if the library needs more stock?

Now for a book, a purchaseUrl is basically, where can I buy another copy of this book from if the library needs more stock? So it would be very useful for an administrator, a librarian, to be able to quickly click a link and buy more, say from Amazon. In order to support a URL like this, Laravel has the URL field. So let's implement that for our books. Here at the bottom, I'll pull in the URL field and let's call this purchaseUrl. And if we do that, we'll actually start seeing it in the browser straight away. I can refresh this page. Obviously, the purchaseUrl currently is Best Buy, but I can edit that and I can replace

I can refresh this page. Obviously, the purchase URL currently is Best Buy, but I can edit that and I can replace it with this Amazon link, update the book, and click this again, and I'm taken to Amazon where I can purchase a new copy. Now you can see that the default output is just the same label used for the label here on the left. It's not very descriptive. In fact, there are a few cases in Nova where the defaults won't quite make sense. And you can completely customize those defaults in order to fit the custom needs of your application. In our case, I think it would be nice if we just displayed the base URL, the HTTP host,

And you can completely customize those defaults in order to fit the custom needs of your application. In our case, I think it would be nice if we just displayed the base URL, the HTTP host, so that you know where you're purchasing from. So if it was Amazon, which in this case it is, it would display amazon.co.uk or amazon.com. But that's very simple in Nova. For more or less any field, you can chain on a method called displayUsing. displayUsing accepts a closure, which receives the raw value. And you can say something like, if there is a value, then we'll pass the URL::host of $value. And I'm interested in receiving the PHP URL host. You can discard the rest of it, or otherwise, we're just going to return null, because obviously

And I'm interested in receiving the php URL host. You can discard the rest of it, or otherwise, we're just going to return null, because obviously there is no value. So we want to use Nova's default dash to show that the content is missing. If we add that simple closure, that simple callback, and jump back into the browser, you now see we have the HTTP host being output inside our purchase URL. Now displayUsing isn't limited to the URL field. You can use displayUsing on almost any field. If we come up to text up here, you'll see I'm able to use the displayUsing callback. And let's say I always want to output foobar.

If we come up to text up here, you'll see I'm able to use the display using callback. And let's say I always want to output foobar. I don't know why you'd want to output foobar, but let's say I always want to output foobar for the book title. If I jump back into Nova and refresh, sure enough, now the title of every book will be foobar. And you probably shouldn't do that, but the option is available. You can customize how something is formatted in the front end. Perhaps a more useful version of this would be making the display output stringToUpper. So I could do stringToUpper of value to always show book titles in uppercase.

Switch to UIAvatar12:55

Perhaps a more useful version of this would be making the display output string to upper. So I could do string to upper of value to always show book titles in uppercase. And now you can see, yeah, all book titles are uppercase, but when you edit them, they'll still be in standard casing. All right, let's revert that. Let's remove display using on the title and let's carry on. I think there's one more field that we can take a look at before we close up. The field I actually want to alter is on the User's resource. Note that in earlier episodes, I said this is Gravatar. Gravatar is great, but I find that Gravatar is a little bit developer focused.

Note that in earlier episodes, I said this is Gravatar. Gravatar is great, but I find that Gravatar is a little bit developer focused. If you're a developer, you've probably signed up for a Gravatar at some point, but we're not targeting developers with this administration panel. We're targeting librarians. They've likely not got a Gravatar account. So that means we're going to see this default blue circle for pretty much every user. I think there's a nicer way to handle this. And Laravel Nova provides an alternative you might want to reach for called UIAvatar. Let's jump back into the IDE.

And Laravel Nova provides an alternative you might want to reach for called UIAvatar. Let's jump back into the IDE. I'll head to the user resource. And instead of Gravatar, I'm going to switch this out with UIAvatar like so. I'm not going to change anything else. I'm literally going to switch the word Gravatar for UIAvatar and obviously import the correct namespace at the top. If I jump back, you'll see I now have the initials as my avatar. That's one really nice thing about Nova. Fields that are similar but different share common APIs.

That's one really nice thing about Nova. Fields that are similar but different share common APIs. So you're able to very quickly switch and change as the needs of your application expand. It's obvious that Taylor and David put a lot of time and thought into each and every API available on the fields so that they feel consistent. There's this uniformity about them and they instantly feel familiar once you've got the hang of one or two. So as I said at the start of the episode, there are so many fields that Nova makes available to you and it is well worth taking the time just to get to know a few of them. Make sure you've got that in your head and you know the basic syntax for how to use and

to you and it is well worth taking the time just to get to know a few of them. Make sure you've got that in your head and you know the basic syntax for how to use and customize a field. Because if you have that under your belt, you'll be able to very quickly build out customized resources for your models that are very easy to use. In the next episode, we're going to dive a little further into fields by taking a look at validating field data. You're used to validation inside Laravel controllers and you'll feel right at home validating fields in Laravel Nova. So I'll see you there.

fields in Laravel Nova. So I'll see you there.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟