Now, as we go through our app, we have worked on listing out sets of records, like our list of talks here that we worked on. And we have ways to edit and take actions on different things, but we really haven't focused at all on how to view a record. And if you see in all of our tables, and what Filament provides by default when you generate a resource, is everything is in edit. We don't have any view option. But that doesn't mean Filament doesn't offer it, we just have to add it manually. So let's go ahead and do that now. On the speakers, let's add a speaker view page.

So let's go ahead and do that now. On the speakers, let's add a speaker view page. So we're going to go into our terminal, and we're going to php artisan make:filament-page. And you don't have to pass anything else in. We're going to use the prompts to fill out what we want. So this is going to be the Vue speaker. And we do want to create it inside a resource, it is the speaker resource. And it asks what type of page it is, and this is where we're going to come down here and select Vue. Okay, so that has been created.

select Vue. Okay, so that has been created. Now, the terminal tells us, we need to make sure to register the page in the Speaker resource getPages. So let's go ahead and do that. Now, we go to our Speaker resource, and when we come to the bottom, we're going to register a route for Vue. And this is going to be the Vue speaker page. And we want this to be a route. So we're just going to pass in the record itself on the table, let's give a way to go

And we want this to be a route. So we're just going to pass in the record itself on the table, let's give a way to go to the Vue page, which is simply Filament's provided table view action. So we can do that. And now when we go to our speaker table, and give it a refresh, we now have an action to Vue. So if we go to Vue, we can see that this looks very similar to the edit page, that it's just not editable. All these fields can't be edited. So if we look at edit, it's almost exactly the same thing.

All these fields can't be edited. So if we look at edit, it's almost exactly the same thing. This one's editable, the other is not. And that's not really what we want. That doesn't give us anything else. I don't really like the concept of when you're reviewing your data, you can in line just change stuff. I like to have a dedicated view, and then click a button to edit. So we can do that by going to our Vue page, but instead of using this, we can define a different schema for how we want to view the page, which is called an InfoList.

So we can do that by going to our Vue page, but instead of using this, we can define a different schema for how we want to view the page, which is called an InfoList. So let's go into our resource, and we can add another method here. So just go ahead and type InfoList, and you should have your IDE if you're using it. Pull this up. And so for an InfoList, the InfoList is passed into the method here, and we're just going to return it. But before we do, we're going to define the schema. So just like we define schema for forms, and groups, and sections within forms, we're going to do the same thing on the InfoList.

So just like we define schema for forms, and groups, and sections within forms, we're going to do the same thing on the InfoList. So really quickly, we do have those same sections that we have on forms. We have them as InfoLists, but make sure, again, you're always looking at the namespace. We need the InfoList section. So let's do this, and let's just call it personal information. And now we define the schema. So instead of text inputs, we're looking for text entries. So let's do a text entry, and then we're going to name this the name of the database field, just like we would on a text input.

So let's do a text entry, and then we're going to name this the name of the database field, just like we would on a text input. And let's just see what this looks like. So we go to our browser, hit refresh. So here you can get a little sense of what this is going to look like as we continue to build it out. So let's go back into our InfoList, and let's add something else. We've got a text entry for the email. There's also a Twitter handle. So we just look at what we get in the browser.

There's also a Twitter handle. So we just look at what we get in the browser. It's one single column stacking on top of each other, and that's probably not what we want. So we can add different columns just the same way that we can do with forms as we customize that. So in this section, let's give it three columns, and let's auto-format a little bit. And then within the schema, the first thing I actually probably want is, let's have that picture, the avatar of the speaker. So we'll do an image entry, remember, not an input.

picture, the avatar of the speaker. So we'll do an image entry, remember, not an input. So we'll pass an avatar. Again, we don't have to do anything else. We go back and take a look. There it is. Now, it's not circular, and we probably want it circular, so we can chain that on. And I think what I want is the rest of this stuff to live over on this right side of the form. So the first column is going to be this, and let's add a group.

form. So the first column is going to be this, and let's add a group. So again, make sure it's namespaced to InfoLists, and this is just going to group stuff together. There's not going to be any lines or anything, but we're going to make this group. We're going to have the column span take 2. So that's going to take up the remainder of the space, and then we have our schema. And let's take all these things that were right here, move them in here. Let's reformat and take a look at how this looks now. There we go. And I also want there to be 2 columns in here so that it gets spread out there.

There we go. And I also want there to be two columns in here so that it gets spread out there. So that looks nice. I don't want the Twitter handle. That's a weird label. So let's just change it back to Twitter. And actually, wouldn't it be nice if we could just click on that and go out to their Twitter profile? Well, that's not hard as well. We can attach a url method here, and this will accept a closure, of course.

Well, that's not hard as well. We can attach a url method here, and this will accept a closure, of course. So we get our record. And now we can just return Twitter and then add on their Twitter handle here. So if we go back to the browser, and now if we hover over this, you can see down in the bottom left that we do have a link to Twitter. Maybe we also want to add the at symbol in front of it. So if we want to do that, and if you want to change the state of whatever you're getting back from the database, because maybe you have an accessor and you want to, like, maybe you have first and last name in separate fields and you want to concatenate it or do anything.

back from the database, because maybe you have an accessor and you want to, like, maybe you have first and last name in separate fields and you want to concatenate it or do anything with the record, we can always update the state that comes back with this method called getState using. So now we're going to accept the record here, make sure we spell that properly. And so here we can just return something like at and then the Twitter handle. So we do that and come back to the browser. And when I refresh, now there's an at symbol. And then that just updates the state. So you can actually display whatever you want there.

And then that just updates the state. So you can actually display whatever you want there. Now, let's go ahead and add another section for the rest of the information we have. So we'll do a section, we'll just call this otherInformation. And this is going to hold the bio and the qualifications that we added before. So we've got our schema here. Let's do a text entry for the bio and a text entry for the qualifications. So that's looking pretty good. Now one thing what I actually like to do is I don't really like being able to edit directly from the table.

Now one thing what I actually like to do is I don't really like being able to edit directly from the table. I think it makes a lot more sense to just view the record. And then if you want to edit, let's have the slide over from the view page. So that's up to you. But let's implement that here. So if we are on our Speaker resource, let's go ahead and get rid of the edit action. And then within the view action, or actually not in the view action, we go down to the pages and we need to go to the viewSpeaker page. And here, this is a pretty simple class, but we can add a method to get the header actions.

pages and we need to go to the view Speaker page. And here, this is a pretty simple class, but we can add a method to get the header actions. And so here we can just return an edit action, which in this case, we're not in a table. So we'll just do the regular edit action, make, and then we just need to pass in the form. And then here is, of course, the speaker get form. And so now if we go to our browser and go back to the Speaker, so let's view this, and I'm getting an error here because this accepts an array and I just passed a single one. So let's do that. All right, and go back to the page.

So let's do that. All right, and go back to the page. And here we go. So now we have an edit button. And when I click edit, it does right now take me to the edit page. I don't want that. So let's actually get rid of that edit page because I don't think we need it anymore at all. And usually I don't have an edit page. I just have the view page where I can edit from a slide over.

And usually I don't have an edit page. I just have the view page where I can edit from a slide over. And if you want to edit from the table, you can do that as well. So we'll delete that. And the other thing is I don't like editing in a modal. I like editing in a slide over. So we'll just add slideOver here. And if we refresh and now we click edit, we get a slideOver and then we can update this form however we like. But this allows us to make any changes that we want here.

form however we like. But this allows us to make any changes that we want here. And of course, if we change something else and we save it, it's going to reflect here on the info list. Now let's say we wanted to add something, use this space here to say, you know, has this Speaker ever, you know, had a talk approved or not and make that a badge. So we can do that pretty simply. We go back to our SpeakerResource class, we go to the info list. And right here, we'll add another text entry. And this is not something that we have in our database.

And right here, we'll add another text entry. And this is not something that we have in our database. So when you pass a value into the make, it can really be whatever you want. So we'll just say hasSpoken and Filament is going to say, yeah, I don't see that in the database, but we have, we have to pass in this getState using. And so let's use this here to define whether they've had a talk approved or not, which is pretty simple. We can just say recordTalks, and then where the status is, we're going to use our enum to define whether it was approved and count. And if, if that's greater than zero, let's have it return previousSpeaker, let's say,

to define whether it was approved and count. And if, if that's greater than zero, let's have it return previousSpeaker, let's say, and then otherwise we'll return hasNotSpoken. And let's make this a badge. So we just do badge like that. Let's take a look in our browser. And we can see hasSpoken gives us that badge here. Now of course, like we've done before, if we want to update the color of this badge, we can do that as well. So color, and this will accept the state.

we can do that as well. So color, and this will accept the state. So the state is as was defined in this method here. So if state is previousSpeaker, let's return success. And then otherwise, we'll just return primary. And if we go back to the browser and refresh, now we can see that it's green because that was a previousSpeaker. So let's take a look at this other information quickly. And can we do anything else down here? This bio right now it's a text entry.

And can we do anything else down here? This bio right now it's a text entry. But what if that was like a rich text editor? So let's actually change that. Let's go into our Speaker model. Let's find the bio here and instead of a text area, let's make it a rich editor. And so if we go back to the browser, and we click Edit, now we have this nice rich editor. So let's just add a heading here. Let's bold some of this, another line, more content, and we'll underline something. Okay, so let's save that.

Let's bold some of this, another line, more content, and we'll underline something. Okay, so let's save that. And you can see that doesn't look like it's working. We're not rendering it as HTML. So that's an easy fix. In the info list, we would just come to the place where we're showing the bio, which is right here. And we just chain on HTML. So it is rendering the HTML. Now we don't have the heading actually showing up any differently.

So it is rendering the HTML. Now we don't have the heading actually showing up any differently. That's because the way Tailwind comes by default, it doesn't actually give you any styling for the headings out of the box. But we can actually add that. And what we would need to do is here in the bio, we can also add extra attributes. And so here we can add a class and attach it to the record. And the Tailwind class pros should do the styling that we want here. So if I go back to the browser, I hit refresh, and it's hard to see, I guess, because we don't have dark mode.

So if I go back to the browser, I hit refresh, and it's hard to see, I guess, because we don't have dark mode. Let me go to light mode. So in light mode, it works pretty well. But that might be burning your eyes right now. So we would have to do the dark mode pros as well. So in order to fix this, let's just go back to PhpStorm. And we also need to pass in pros invert. And you can see now with the dark invert that we are rendering this in dark mode properly. So any type of additional attributes you would ever need to pass to really anything in filament,

And you can see now with the dark invert that we are rendering this in dark mode properly. So any type of additional attributes you would ever need to pass to really anything in filament, you can use that extraAttributes and pass that along. And it will be injected into the DOM element. Now, lastly, on the qualifications, if you have a list, you can have it comma separated just like that. There are a couple other options where we can say list with line breaks. And we can also, let's say we want it bulleted, we can do that and refresh. And there we go. In this case, I think just to try to keep everything above the fold, let's leave it.

And there we go. In this case, I think just to try to keep everything above the fold, let's leave it as comma separated. And that looks nice. The only thing we're missing is speakers have talks. If I'm going to view a speaker, I also want to see the talks that they have. And I can't see that right now. So in the next video, we're going to tackle that.