تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Finding Filament Plugins0:00

So now that we've gone over the basics of Filament and you understand what all the six packages as well as the PanelProvider can do, you might be thinking, well there's still this thing that my app needs that I haven't seen yet. And that's okay. You could either build it custom for yourself, or you can go to the Filament website and check and see if there's an existing package. So if we go to the Filament site here, you can see there's plugins at the top, and when we click there, at the time of the recording of this video, there's 114 plugins that are available for v3, which is the current version of Filament. So we can look through these plugins, follow the installation instructions, and get additional

Installing Environment Indicator0:30

available for v3, which is the current version of Filament. So we can look through these plugins, follow the installation instructions, and get additional functionality in our app. So let's go ahead and look for, there's a plugin I know exists, I want to know what environment I'm in. So there's this environment indicator. So that way I always know I don't want to drop a bunch of data out of production. So let's click here. You can see that we have the instructions here as we scroll down. And so let's just composer require this.

Registering Panel Plugin0:53

You can see that we have the instructions here as we scroll down. And so let's just compose or require this. All right, so now that's installed. Let's go back and see if there are other steps. We do need to register the plugin for our panel. So let's copy this. And I'm going to go back to phpStorm. And I'm in my AppServiceProvider. And what we need to do is pass in a method, I'm going to put it on at the bottom, that is called plugins.

And what we need to do is pass in a method, I'm going to put it on at the bottom, that is called plugins. And this is where we have an array where we define all the plugins that we want to work on this panel. Now you've seen that you can have multiple panels, and you might only want certain plugins on certain ones. So we're going to import this class. And let's see if there's anything else we need to do. It doesn't look like we need to do anything, we might be able to customize it, but let's take a look at our app.

Fixing Panel Access1:37

It doesn't look like we need to do anything, we might be able to customize it, but let's take a look at our app. Let's give it a refresh. And now you can see, I've got local here. So assuming let's go into our .env file. Let's change the environment to test. And if I refresh, I'm getting a 403, because we actually didn't finish implementing allowing a User to access the panel. So let's do that. Now, we'll go into the User model.

So let's do that. Now, we'll go into the User model. And let's bring back that class we're implementing. It's the FilamentUser class. And then we need to add the method subs. And so down here, we have the canAccessPanel. And let's just return true, obviously, again, you need to do this in your app before you deploy to production. But alright, so this is true. And now if we go back and refresh, you can see we have tests here.

But alright, so this is true. And now if we go back and refresh, you can see we have tests here. So you'll never be confused again, which environment you're in, you can probably change the colors on this. Yeah. So if we look down here, we can pass in colors here. So let's do that just to make sure it looks a little bit different. So let's go back to our PanelProvider. And let's do this here. So we've got production, it doesn't show at all, staging is orange, and default is blue.

And let's do this here. So we've got production, it doesn't show at all, staging is orange, and default is blue. So we are on default right now. So it should be blue. Let's check. Okay, we're blue right now. And let's change it to staging. So our environment, instead of tests, let's call it staging. And if we refresh, now we have orange. So that way, you can kind of change the colors.

Adding Shout Alerts3:09

And if we refresh, now we have orange. So that way, you can kind of change the colors. So let's add one more plugin I use all the time. I'm going back to the Filament page, and we're going to go back to plugins. And I use, it's called Shout. And this plugin is basically a way to give messages to your users within the context, particularly in forms, sometimes info list, but I almost always use them as forms. So you can see these kind of alerts that are available. And I use this to help give information as people are filling out forms. So let's install this one as well.

And I use this to help give information as people are filling out forms. So let's install this one as well. We're going to composer require. All right, go back and see. We don't actually have to register this plugin because it's not used globally. This is really just basically a form input that you can use throughout your app. So let's see how it works here. Let's go into, let's say we've been using the Attendee resource. So let's go back to that. We've got our form here.

So let's go back to that. We've got our form here. And this is kind of a contrived example, but the ticket costs. So this is, let's say if the ticket cost is more than $500, we want to warn the user, like, hey, this is really expensive. So in order to do that, number one, we need to make this live or we can make it lazy at least because again, it's a Livewire component. If it's live, every time you type a number, it's going to update. Lazy means once you're done typing and tab out of the form, that's going to be the update. So if this is greater than $500, let's show some kind of a warning.

Lazy means once you're done typing and tab out of the form, that's going to be the update. So if this is greater than $500, let's show some kind of a warning. So I'm going to add a shout here. I'm going to give it a name, just, you know, warnPrice. There's a type. We're going to call this a warning, and then we're going to have the content that we have here and we'll say the price is too high. So we reformat. So now let's go to the app. Let's go to our attendees and now I'll click newAttendee here and we can see the price.

So now let's go to the app. Let's go to our attendees and now I'll click newAttendee here and we can see the price is too high. Now, of course, I didn't actually make it conditional on the ticketCost. So let's do that now. So this is always going to show. So you might want something to always show, but we can also say if it's visible and let's pass in the getClass, it's now will return if get the ticketCost is greater than, let's say, $500. So now we go back and refresh the page.

say, $500. So now we go back and refresh the page. It's no longer there, but let's say I put $600 in here, all of a sudden we're getting this warning and we probably want it to span the entire column. So we'll do columnSpan full. That looks good. Put it back here if the ticket cost is above. Now we get a nice warning that tells the user this is not going to fail validation. You're allowed to pay $600, but maybe it's a little bit high and you might want to look into lowering it.

You're allowed to pay $600, but maybe it's a little bit high and you might want to look into lowering it. You could also even give them more information instead of just passing a string in here. You could pass a closure here. Let's get the value and say, so let's get the price here. And this is not namespace properly, so let's do that. And then let's return this is price minus $500 more than the average ticket price. So we do something like that. And then if we go back to the browser, give it a refresh. If the ticket cost is $750, we can say this is $250 more, and if we change it, it's obviously.

Exploring Premium Plugins6:40

And then if we go back to the browser, give it a refresh. If the ticket cost is $750, we can say this is $250 more, and if we change it, it's obviously going to change. So these are just two of the over 100 plugins that are available to you. Let's go back to the Filament page really quick and take a look. Most of these plugins are free. The two we installed are actually free. There are also some premium plugins. So if we filter here on the paid plugins, you can see there's seven of them currently and some of these give you really incredible functionality.

So if we filter here on the paid plugins, you can see there's seven of them currently and some of these give you really incredible functionality. One of them that I use and really love is the advanced tables. So if we take a look at the content here, now there's a lot of stuff in here, but you can see in this picture, you have the ability to on any table, not just in the filament panels, have these things where you can kind of save what filters you've applied to your table and use those over and over again. We have that and we can build them manually in the resource by default. But this allows you to do it with any table and it lets your users themselves create their own filters, which is really, really useful.

But this allows you to do it with any table and it lets your users themselves create their own filters, which is really, really useful. So I'm not going to go through all of this. This package provides a bunch of functionality. One of the other things it allows you to do is show, not just show and hide columns, but also reorder them. So when they save their sets of filters, they can also say how they like to view their table. And so it allows your users to just fully customize their experience with whatever tables you have. So if you don't have what you need, just out of the box of Filament, you have all these

Building Custom Plugins8:08

you have. So if you don't have what you need, just out of the box of Filament, you have all these plugins that you can look into, which could give you what you need. The other thing that you can do is build your own plugin. And so if we go to the documentation, let's go to the forms. And we're going to see in here, if we go to the custom fields, you've got instructions with the documentation here. You also have a Laracasts series. And this Laracasts series is going to walk you through from the creator of Filament, how to build advanced components for Filament.

And this Laricast series is going to walk you through from the creator of Filament, how to build advanced components for Filament. So this is an amazing course. As you can see, I haven't finished it yet, but I've been going through it. And it really helps you to figure out how you can build those custom components for yourself. And if you really want to, you could add yours as a community plugin as well.

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