(upbeat music) We added some actions in the previous episode. Now let's add notifications to improve the user experience. But first, I think the requested books are zero. So let me just request some books, quest, request, and request, okay. And when I cancel the request, you noticed that we see a notification by default. Let me show you again, cancel request, click yes.

Let me show you again, cancel request, click yes. And we see this particular notification, which is the default. For the delete action, the default notification message is deleted. So let's change that first. We have the delete action right here. Yes. And here we can change the notification saying success,

Yes. And here we can change the notification saying success, notification title. That means the delete action was successful. And the notification we just saw was this. We change this to whatever we want. We can simply say request, canceled, yeah. And the failure notification, in case something goes wrong,

And the failure notification, in case something goes wrong, we can just say failure, notification title, fail to cancel request, try again. Later. Yeah, something like this. Now this doesn't change any structure of the notification. It just changes the text. So let's see refresh. Let me cancel again.

So let's see refresh. Let me cancel again. Yes. As you can see, request canceled is the text. Now let's change where this notification appears. I somehow feel top right corner is not the best place. We can change the position of the notifications globally in the app service provider. Let's go to app service provider. And in the register method,

Let's go to app service provider. And in the register method, you use the notifications, which is filament notifications live via. This is the one. And you use the alignment method to change the horizontal alignment and vertical alignment to change the vertical one. So first, let's look at the horizontal alignment. And you can set this to alignment,

So first, let's look at the horizontal alignment. And you can set this to alignment, center, start or end. All the others are not useful here for the notifications. So let's just set it to center and see what it looks like because end is what we have. That is in the right corner. Now for the vertical alignment, let's say notifications, vertical alignment and use vertical alignment end.

let's say notifications, vertical alignment and use vertical alignment end. So, which means the bottom. Let's see what this looks like. Fresh, say cancel request, yes. And now you see it at the bottom. We just customized an existing notification. Now let's add a notification for our custom action. First, let's add a notification when the user returns a book and submits this.

First, let's add a notification when the user returns a book and submits this. For that, let's go to the custom action right here. After the action, we could use the success notification title and failure notification title exactly like so. Or we could customize it further by using success notification and then give more information here. So we could say notification, make, return requested. Yeah, we could add a title

So we could say notification, make, return requested. Yeah, we could add a title and we could add a body to the notification also. Yeah, something like this, return requested or request placed successfully. Thank you for your feedback. You will be notified when your request is. Yeah, when your return is processed, something like this. Let me import this and that is filament, vacation, notification.

Let me import this and that is filament, vacation, notification. And here also we can customize this further so saying notification, make, yeah, return failed. We could say failed to request return and in the body, we could say, please try again later or contact us if the issue persists. Yeah, exactly like this. We'll see what this looks like. Fresh return book.

We'll see what this looks like. Fresh return book. Yeah, my, your click on submit and yes, this is what it looks like, the title and then the body. This looks great. We can also optionally add an icon here. You can do that using icon, yeah. Now another place we've added a custom action is in the books table when we request for the book.

Now another place we've added a custom action is in the books table when we request for the book. Here also, let's customize the notification. Go to books table action. Yes, right here. Use the success notification method and make the notification with title, yes, book requested. And here it would be great to see a button as soon as the user has requested the book, maybe they would like to see all the requests.

as soon as the user has requested the book, maybe they would like to see all the requests. So we can add an action within the notification using actions and that could be, yes, exactly this. View, view all requests maybe, all requests and the URL book users resource. We could simply say user resource, get URL. Let me import notification, filament notifications. Let's also add the failure notification. Yeah, let's see what this looks like.

Let's also add the failure notification. Yeah, let's see what this looks like. Refresh, request a book and yes, we do see the notification with this, but let's make this look like a button. Let's see if this goes to the correct tab and it does. Change it, change the action to make it look button. So change the size because it's a notification, it's too small. Eyes could be excess.

it's too small. Eyes could be excess. Let's try again, fresh request another book and yes, now we see we could even add a body to make this look great. Now this is okay, but did you notice that the notification obviously just disappeared after a few seconds? In our case, we might want it to stay because there's a button on top. Only in this case, we can add this persistent method

because there's a button on top. Only in this case, we can add this persistent method to make it remain. So true as the default, if you add this method, this is what it is, let me refresh and return another book and it stays. It doesn't go away unless I dismiss it or I click on view all requests. Okay, this is good on to the next one.

Okay, this is good on to the next one.