Making Relations Searchable0:00
Right, before we jump off of relationships, there are a few quality of life improvements, user experience improvements that we can add to Nova in order to make working with relationships even simpler. So let's do that now. First of all, note the issue we experience with creating an Address. If I, for example, choose Customer, and then select from the Customer dropdown, I have a select box of hundreds of customers, and the more customers join our library, the longer this list is going to get. It will be very annoying to have to find one customer in that list. Thankfully, it's very simple to make that select box searchable rather than having to
It will be very annoying to have to find one Customer in that list. Thankfully, it's very simple to make that select box searchable rather than having to scroll through all of the options individually. We can go into the Nova resource for an Address, and where we have our addressable field, I'm going to chain on the searchable method that Nova provides. Back in the browser, when I now select Customer, I can search for a particular customer by name, and they appear here for me to select. So you can imagine if I was the librarian, somebody comes up wanting to sign up for our library, we need to add their address to our database, I can now simply search for their name.
library, we need to add their address to our database, I can now simply search for their name. It's much easier to work across various different related resources. I can also do the same for Publisher. So I can start searching for Butler, and Butler Limited will appear as an option. I don't have to scroll through the whole list. Another area where this would be useful is when creating a Book. I would like to be able to select the author by searching by name, and I'd like to be able to do the same with Publisher. Well, once again, if we go to the Book Nova resource, I can simply add the searchable
to do the same with Publisher. Well, once again, if we go to the Book Nova resource, I can simply add the searchable method to both of these fields. And once I've done that, inside the browser, I will have a nice search box where I can search for a particular author, let's say George Orwell. Now you'll see that we see George Orwell's avatar. That will happen automatically if you have defined an avatar type field. And we also see George Orwell, the title. But let's say there are two George Orwells, multiple authors with the same name. It could happen.
Adding Resource Subtitles2:14
But let's say there are two GeorgeOrwells, multiple authors with the same name. It could happen. It would be nice to differentiate a little further. The same is true of our global search. If I search for George Orwell up here, I see George Orwell, sure, but if there were two George Orwells, I'd have no clue which was which. Now thankfully, Laravel Nova allows us to further separate results like this by introducing subtitles. So let's add subtitles to our Author. Inside the Author resource, I'm going to override the subtitle method, and I can basically
So let's add subtitles to our Author. Inside the Author resource, I'm going to override the subtitle method, and I can basically return anything I want from here. In our case, I'm going to return this biography, seen as an Author has a biography field. Let's see what that looks like. Okay, that's pretty good. It might be a bit long, especially if the biography is multiple paragraphs. So we can edit this slightly by using the str helper, and I'll limit it to say 120 characters. Now when we search for George Orwell, you can see it clips off after 120 characters.
characters. Now when we search for George Orwell, you can see it clips off after 120 characters, enough to give us that information, but short enough that it doesn't clutter the UI. You'll note if I attempt to search for George Orwell again here, we do not see the subtitles appear. That's because by default, when you're searching relations, subtitles won't appear. However, we can alter that by going back into the Nova Book resource, and where we call searchable under author, I can say with subtitles. Now when I search for George Orwell, you'll see he appears with his clipped off biography so that we can be absolutely sure that this is the author we want to use.
Creating Related Records Inline3:44
Now when I search for George Orwell, you'll see he appears with his clipped off biography so that we can be absolutely sure that this is the author we want to use. Now another scenario you'll often come across when working with resources in Nova is the need to create a resource in line. Let's say I've gone ahead and added the book Casino Royale to my library, and I fill out all of these fields, I fill out the blurb, I fill out pages and copies, and then I realize Ian Fleming doesn't exist as an author in our database. That means I have to leave this resource, go into authors, add Ian Fleming as an author, come back here, refill all these details, and then click to add Ian Fleming. Thankfully, Nova allows us to create resources in line so that we can save ourselves all.
come back here, refill all these details, and then click to add Ian Fleming. Thankfully, Nova allows us to create resources in line so that we can save ourselves all of those steps if we realize that the resource doesn't yet exist. Let me show you how easy it is to implement. Under author, I'll call showCreateRelationButton, and then let's head back into the browser and refresh, and now next to author, note that we have this little plus icon that we can click. When I click that button, it opens a modal with the same form that we would receive if we'd gone to the author resource itself. Now by default, the modal will be Tailwind's 2XL width, but you can alter that.
we'd gone to the author resource itself. Now by default, the modal will be Tailwind's 2xl width, but you can alter that. In this case, I think it would be good to alter because choose file is a little squashed, so if we go back into the IDE and I call modalSize, I can pass in any of Tailwind's size modifiers. Let's pass in 3xl, so it's just a little bit wider for our use case. Now when I click to show the relation in line, you can see we have just that little bit of extra breathing room, the biography won't feel as squashed when we're working with that, and avatar sits nicely on one line without squashing the button. So here we could choose Ian Fleming's picture, I could enter that as the name, and once I've
and avatar sits nicely on one line without squashing the button. So here we could choose Ian Fleming's picture, I could enter that as the name, and once I've created the resource, it will pre-fill for me inside our Book form. Now there aren't many scenarios I can imagine where you wouldn't want this functionality, so let's go ahead and add the same functionality to Publisher. I'll copy showCreateRelationButton and modalSize, and I'll drop it in right here in the publisher field. Now not only can we create an Author in line, but I can also create a Publisher in line, and note that because the address relation on a Publisher is required, that also appears in line.
and note that because the address relation on a Publisher is required, that also appears in line. So we're handling three different resources here. We're handling the Book, we're handling the Publisher, and the address relation. Now just stop for a second and ask yourself, how long would it actually take me to develop something like this in a custom administration panel? I would say it would take weeks, and it would still not be as clean as the solution Nova provides. With Nova, it is literally a single method call to add this to any relationship. It's so powerful.
Wrapping Up Relationships6:52
With Nova, it is literally a single method call to add this to any relationship. It's so powerful. I really love this feature of Laravel Nova. So that's all it takes to add just that little bit of extra polish and really spice up relationships in our Nova administration panel. I think it's well worth the time and effort, because if we can improve flows like this, it will make it so much easier for your end users. Okay, that's enough of relationships. Let's move on to some of the other things that Nova allows us to do.
Let's move on to some of the other things that Nova allows us to do.
