Adding JSON Qualifications0:00
Next, let's take a look at the input for a checkbox list. So, this input's going to be really good for taking data that we want to store in an array on a model and inserting that into the database. So, let's look at that. Let's go back to our Speaker model, and one thing I want to add here is the, we'll call it, make it a JSON column, and we're going to call this qualifications. So, as we're evaluating which speakers are going to be chosen for each Lyricon, maybe there's a set of qualifications that we want a checkbox to say they meet this, this, and this. So, the other thing we need to do is go to our Speaker model, and we need to cast qualifications as an array, and we need to go to our terminal and php artisan migrate --fresh --seed. Now, let's go back to the browser, and let's give it a refresh.
and we need to go to our terminal and php artisan migrate:fresh --seed. Now, let's go back to the browser, and let's give it a refresh. If you get this, every time I migrate:fresh --seed, I get this. I just hit refresh again, and we can get past it. So, no worries there. Let's go to my Speaker form, and let's try to add a new Speaker. And I don't have the qualifications added there yet, so let's add that now. Let's go to my Speaker resource. We have the form still here on the resource, and I want to put that on the model. So, let's cut this here, speaker, getForm, and let's go into the Speaker model, and at the bottom, we'll add our getForm, and we're going to return what I've got copied here, which is great, and again. Okay, and so now, under the Twitter handle, I'm going to add a checkbox list, and we're going to call this qualifications.
Building Checkbox List1:20
which is great, and again. Okay, and so now, under the Twitter handle, I'm going to add a checkbox list, and we're going to call this qualifications, and this is going to be pretty simple. So, we just need to provide a set of options. So, I've got some options that I'm going to paste in here. So, here's some things that, I don't know, Taylor may be looking for when he's evaluating speakers, maybe he likes to have first-time speakers to change up the lineup. If you're a LayerCast contributor, that should give you a lot of extra points. So, these are some options here, and if we go back to the browser and take a look at what we have now, we've got this big long list of 10, and you could have 20 or 30, and so we do want to adjust this a little bit. Let's see what other options we have here. So, those are the options we can select.
Improving Checkbox Layout1:55
we've got this big long list of 10, and you could have 20 or 30, and so we do want to adjust this a little bit. Let's see what other options we have here. So, those are the options we can select. We can also change the number of columns. So, let's say we wanted this to span across three columns. We're probably going to want this checkbox list to be on its own line, so if I do a column span full here, that's going to make sure this takes up the full column span. So, let's go back to the browser and take a look here. So, now this looks a little bit better. We've got the qualifications on its own line, and we've got the 10 different qualifications that we have listed here. Now, there's a few more things we can do to make this a little bit easier for our users. First thing we can do is we can make it searchable, just like we can make a select input searchable. We can also make the checkbox list searchable.
First thing we can do is we can make it searchable, just like we can make a select input searchable. We can also make the checkbox list searchable. So, if we come back here, now let's say I want to find my business leader or LayerCasts. We can see that now it's searchable. It makes it really easy to do that. Of course, if we clear this out, then everything shows up. One other thing that we can do if we come back here is we can have a bulk toggleable, and this will allow you to come back here and have a select all or a deselect all. So, now let's just go ahead and fill out this speaker and create a new speaker, and we're going to select just a couple random ones here and make sure this works. We create, and you can see it was created, and now we're on the edit page,
Saving and Verifying Data3:05
and we're going to select just a couple random ones here and make sure this works. We create, and you can see it was created, and now we're on the edit page, and we can see these boxes are checked. If we take a look inside the database, we can see we have the new speaker, and in this JSON field, we've got the different keys that were attached to each of those descriptions. Now, one other thing we can do to make it a little more clear as far as what this means. Now, obviously, this is kind of self-evident, but in your use case, you might have something that you're not quite sure what each selection means, and you need to provide more context. So, in that case, we can add a description, and in this case,
and you need to provide more context. So, in that case, we can add a description, and in this case, we need to get the keys from here, and we can type in whatever description we want. So, let's get rid of them. Let's just have a description on these first two, right? And now if we go back to the browser, those ones that have descriptions, we can see that here, and it makes it a little bit easier. Again, if your use case is where it's not self-evident by just the label of why you should select that one, this gives you that option. Now, one other thing I want to share is that there's another use case you can have
Checkbox List Relationships4:03
of why you should select that one, this gives you that option. Now, one other thing I want to share is that there's another use case you can have for the checkbox list. Now, if we think back to the Conference model that we worked on in the last video, one thing that we haven't worked on yet is how do you add speakers to a conference, and we could actually use a checkbox list for that as well. So, let's go back to that conference resource, and so let's say we want to choose our list of speakers that are going to speak at this conference. We can do a checkbox list. This is going to be speakers, and this is a relationship,
We can do a checkbox list. This is going to be speakers, and this is a relationship, and we're going to have the name of the speaker to populate the checkbox list, and then let's get rid of this, and our options are just going to be the speaker model, and we're going to pluck the name and the ID. Now, let's go ahead and go back to the browser, and so now here we can see we only have one speaker, so let's go ahead and factory up a few more. So, I've got this factory. I'm just going to run really quickly. I'm getting an error here because our qualifications doesn't have a default value. Let's go back here and get our speaker factory and qualifications.
I'm getting an error here because our qualifications doesn't have a default value. Let's go back here and get our speaker factory and qualifications. Let's just set that to an empty array. Now, if we go back to Tinker, let's try again, and that looks like it worked. So, if we go back to the browser, you can now see we have all these speakers, and if we wanted to associate these speakers to the conference, we can do that here, and let's fill out the rest of the field really quickly, and so now we can create this, and Filament takes care of saving that many-to-many relationship here. Now, this is actually not ideal. You could have hundreds of speakers, and a checkbox list is probably not the best UI, but I just wanted to demonstrate to you.
Now, this is actually not ideal. You could have hundreds of speakers, and a checkbox list is probably not the best UI, but I just wanted to demonstrate to you that you can use a checkbox list for those many-to-many relationships. We'll come back and refactor and give ourselves a better way to add speakers to a Conference in a later video.
