Alright, the last of the Filament packages that we haven't explicitly covered, although we've been using it throughout the course, is the Notifications package. Now this is a really nice, easy way to send notifications to your users and is actually one of the best ways to get into Filament if you have an existing app and you just want to add these notifications in and then maybe work your way into some of the other packages as well. So let's use this widget that we just created for the dashboard, and let's just use some of the things we've learned, make sure we can add an action to be able to send a notification, and then let's just play with that class a little bit. So we go back into PHPStorm, we're in our test chart, and so again, a widget, especially

and then let's just play with that class a little bit. So we go back into PHPStorm, we're in our test chart, and so again, a widget, especially a custom widget, is really just a Livewire component that we're going to be using. So let's create an action and implement this action in this Blade view. So instead of hello, let's have this call notification. So this is an action, and we're going to create that in our class. So we need a public function for callNotification, it's going to return an action, and in order to use actions in a Livewire component, we have to implement hasActions and hasForms, and we need to use interactsWithActions and interactsWithForms, right, and hasActions wasn't imported.

and we need to use interactsWithActions and interactsWithForms, right, and he has actions wasn't imported. Let's do that. And now we should be able to really simply again, this is just standard filament using the actions, we would return an action, we're going to make it call notification. What we're doing now is customizing the look and feel. So let's make it a button, let's make the color warning, the label is going to be send a notification. And then we pass in what we actually want it to do in the action method. So we have a closure here.

And then we pass in what we actually want it to do in the action method. So we have a closure here. And this is going to be really simple. We just want to pass in the FilamentNotification class, we're going to make one, it's going to be a warning, and let's give it a title and a body. Of course, we have to send notifications. It's something I regularly forget. If you're wondering why your notifications not actually showing up, it's probably because you haven't added the send method to the end of it. So let's go back to the browser.

you haven't added the send method to the end of it. So let's go back to the browser. Let's refresh. Okay, so now we have a Livewire widget, and the widget has an action in it. And if we click send a notification, we get this notification here. So it's pretty simple, pretty straightforward. There's just a couple things I want to show you. Number one, we can customize how long that notification lasts. So we have if we have a duration, this will be the number of milliseconds you want it to last.

So we have if we have a duration, this will be the number of milliseconds you want it to last. So if you want it to be really, really short, we can do 500. Let's send a notification here, and it's almost disappearing right as soon as we see it. Maybe you want it to stay for a long time. So you could make this a really big number, or maybe you want it to stay until it's dismissed. And then we would just add persistent. And so now if we go back and send a notification, this is going to stay. And if you have multiple notifications going on at the same time, they'll stack like this. So you can see you have a bunch of them.

And if you have multiple notifications going on at the same time, they'll stack like this. So you can see you have a bunch of them. And these are just going to stay here until the page is refreshed, or we come in here and manually close them out. So we have the ability to, you know, control how long they stay. The other thing that we can do is have actions within a notification. So we are passing in an array of actions here. So we need to pass in an action, and this is important because we need to not use the standard action class, but it's actually a NotificationAction class. So if we go action, it's in the Filament namespace, and it's the NotificationAction.

standard action class, but it's actually a notification action class. So if we go action, it's in the filament namespace, and it's the notification action. So this is the one we want here. And so this will be, I don't know, let's just make a really simple one. Let's go to attendees. This action here, we'll say it's a button. The color is primary, and we'll pass in a URL. And so this is just going to be attendeeResource and getURL. If you're ever wanting to navigate through your various filament resources, this is how I recommend you do it.

If you're ever wanting to navigate through your various Filament resources, this is how I recommend you do it. You get the URL from here. So let's see how this one works. Let's go back. So we send the notification. Of course, it's not view, it's actually index. So we'll change it to index and refresh, send a notification. And there we go. So we have this notification here.

And there we go. So we have this notification here. And if we want to go somewhere, we can click here, and it's going to send us to the attendees list. Now, if you wanted to go to a particular attendee, let's say we wanted to go to the edit page for this attendee. Let's go back to our dashboard. And if we want to do that, instead of the get resource of index, this would be edit. And in this case, we need to know which one we're going to pass in. So the next parameter is the record.

And in this case, we need to know which one we're going to pass in. So the next parameter is the record. And we can just hard code an ID of one. And if we go back to our browser, let's send a notification. This will actually go to that specific attendee, and we'll bring you here. So it's important to use that getUrl off of a resource. If you're navigating through your app, it's going to be a lot better than trying to hard code strings, because those could change. And it's also just much more self-evident where you're going when you're using that resource class.

And it's also just much more self-evident where you're going when you're using that resource class. So let's go back and look at our notifications one more time. If we wanted to add a second action, we can do that here. Again, action, this notifications one, and let's call this undo. And this maybe is just a link. The color is gray. And the action here is, we don't need to do anything. We can just ray high. Okay, and if we go back to the browser really quickly, we can see now we have two different

We can just ray high. Okay, and if we go back to the browser really quickly, we can see now we have two different actions here. And so it's really easy to make your notifications a little more interactive as opposed to just showing information to your users. Now, the last thing for you to be aware of, I'm not going to show you or implement it. But if we go to the Filament docs, you can see there are also database notifications. So you can integrate your Filament notifications with your Laravel standard notifications that are saved in the database. And so you can have something that looks like this, and users have notifications they need

are saved in the database. And so you can have something that looks like this, and users have notifications they need to mark as read. And all of that is built directly into Filament. So you have that option to you if you need it.