(upbeat music) Okay, we've done all the form inputs. Now you guys have all the information you need to create the forms you need to get the data you need into your system. Now let's make it look nice. And this video we're just gonna focus on within a filament panel, let's call it an info list, which is this right here when you're viewing a page. Now obviously this does not look very nice.

which is this right here when you're viewing a page. Now obviously this does not look very nice. A couple of things before we get started. If we go back to the code in the last video, we talked about doing milestones one of two different ways. And I'm gonna actually stick with that first way where we're saving the milestone as a JSON column. So that's what we have. And we're just gonna clean up this info list and it's gonna go really fast.

And we're just gonna clean up this info list and it's gonna go really fast. A filament gives us some nice design options. So this is where we're in the feature info list. Now this actually comes from the feature resource. So when I come here, you can see we've got the resource and we define the info list right here. So there's its own class, we're gonna do this. And what I wanna do is use the same concept we use when we were making our form look nice.

And what I wanna do is use the same concept we use when we were making our form look nice. What sections do we have? And then we can extract the array that that section needs out into its own method. And it should be a nice looking file and also a nice looking front end. So let's start just with a section here. And this is going to be the feature information. I'm gonna do four columns here.

And this is going to be the feature information. I'm gonna do four columns here. And it gives us our feature information schema. We'll add that method here. And let's go ahead and take these first three. And we're gonna paste these down here in the bottom. Of course, we are returning an array. Okay, and let's format this a little nicer. There we go. So we can take a look and see,

There we go. So we can take a look and see, this is already a little bit better. There's a couple of things about this, number one. Now you might remember that status and type are enums and those don't just work on a form, they work on info lists as well. So if we come back here, first of all, I probably want this section I created to have a columns fan full.

I probably want this section I created to have a columns fan full. And let's go ahead and come in here and say a status is a badge. Because it's an enum, it will use that get color or the has icons has color and has label. So we did this, let's refresh and there we go. So now we have a nice looking badge for both of these things. Let's grab some more of the data that is just kind of text. We'll make our own section for description. So let's just grab effort in days, priority costs,

We'll make our own section for description. So let's just grab effort in days, priority costs, target delivery dates. We'll grab all of this stuff and put it down here. Let's see how this looks. It's looking pretty good. Oh, I did want to delete it up here. So effort in days, all of that stuff gone and maybe delivered at we don't need created at or updated at this was generated a long time ago.

and maybe delivered at we don't need created at or updated at this was generated a long time ago. I'm just going to get rid of that. Let's take delivered at and we'll cut that and put it in here as well. You can see that we have placeholders. You can choose whatever you want. You could say NA and when we don't have anything here, now we do have a target delivery date. If you want to see that, it just looks like that really quickly.

now we do have a target delivery date. If you want to see that, it just looks like that really quickly. So this is a nice way to summarize some of the feature information. Now we have the description. And if you remember, we changed that description to be the rich text editor. And so this could be something really nice. Like here's the header. Let's just give it some data.

Like here's the header. Let's just give it some data. Heading two, I want you to see some bold text. All right, we've got bold. Maybe I'm just going to make a list here. We've got that two, three. Okay, so we've got some content here. Now when I go to view this page, here's the content. This looks very ugly, obviously. This is not what we want.

This looks very ugly, obviously. This is not what we want. So we need to figure out how to tell filament we want this to look like HTML. Let's go to the IDE. We've got our description here and I actually want the description to just be in its own section. So first we'll say description. It's one column, column spanful,

So first we'll say description. It's one column, column spanful, and the schema is going to be just this. And one thing, let's take a look at what it looks like here. So it's a little bit better. We don't need the schema, the section to have a heading and also have this label here. So let's get rid of that label. Hidden label, right there. We refresh.

Hidden label, right there. We refresh. This is looking a little better, but obviously this is not formatted the way we want it to be. So there's two things we need to do. First, we need to say HTML. Now before we go any farther, it's very important to understand what this HTML does. What it does is it renders whatever content it has as HTML,

it's very important to understand what this HTML does. What it does is it renders whatever content it has as HTML, which means we're opening ourselves up to a potential cross-site scripting error or some type of way for people to execute JavaScript on our site. If a user can enter text into a form input, if they type in JavaScript and it gets rendered, we might have a problem. Now when you're using filament, it's all fine.

we might have a problem. Now when you're using filament, it's all fine. The filament rich editor will sanitize that stuff, will make sure that it doesn't come out on the other end bad. But just be aware, when you're using HTML, you have to be very careful, okay? Now let's go ahead and look at the browser now that we've added HTML. And this looks a little bit better, but not much.

now that we've added HTML. And this looks a little bit better, but not much. And the reason for that is because we just don't really have any styling on this section. It's up to you to figure out how you want to style it. Now one thing you might want to do is use the tailwind pros. And if that's what you want to do, that's what I do, you just add pros here, very easy. And now we actually have everything rendering in a nice format, so that works for us here.

And now we actually have everything rendering in a nice format, so that works for us here. If you want to do anything with these sections, it's just like on the forms, I can just add a quick description here and say, you know, detailed description of the feature, sure. So you can get some other stuff here if you would like. And then finally our milestones. We already set this up in the last video. Well, we can review it really quickly,

We already set this up in the last video. Well, we can review it really quickly, but we have this repeatable entry. I do think, again, let's give it its own section. One column, column span full, and we want the schema. It's just this single thing, so we'll close our schema. And let's take a look at how this looks. This top section's nice. We have our description and then the milestones. Again, we don't need this, it's already in the section.

We have our description and then the milestones. Again, we don't need this, it's already in the section. So we will just say, let's get rid of the label completely. Refresh, that doesn't get rid of it. We have to do like we did last time, hidden label. And here we go. We've got our milestones, our description. And this is a really nice looking info list. You can do a lot of different stuff just out of the box with filament

You can do a lot of different stuff just out of the box with filament to make your info lists look really nice.