How to add custom actions on Filament dashboard page

In this article, we are going to add custom actions on filament dashboard page.

In this article, we are going to discuss essential laravel filament tips and tricks that every developer must know. In the last article, we discussed about 5 such filament tips and tricks. You can check that article here.

To check add custom actions on Filament dashboard page, you can directly move to part 3.

Check out the video:

Tab View on Resource page

Need different tabs data on the list page on a resource, this is what we need to do. Let’s take our example of ProductResource where i want to have 2 tabs first for showing all the products and second for out_of_stock products.

Learn more about tab view from official docs.

For that feature, we need to override the getTabs() method on our ListProduct page. Check out the code below:

public function getTabs():array 
    {
        return [
            "all" => Tab::make(),
            "out_of_safety_stock" => Tab::make()
        ];
    }

You can see i have added two tabs . Now to modify the query for each tab we can override the modifyQueryUsing() method.

public function getTabs():array 
    {
        return [
            "all" => Tab::make(),
            "out_of_safety_stock" => Tab::make()
                                        ->modifyQueryUsing(function(Builder $query){
                                            return $query->whereColumn('quantity','<=','safety_stock');
                                        })
        ];
    }

Here, I am filtering the column to select only those products which quantity is less than the safety stock.So, in this way you can add different tabs as you want.

SlideOver on modal forms

Have you ever noticed, some forms are opened on a modal popup, especially the one from relation manager or our own custom forms. You can use slideOver() to display forms or modals or additional content in the sliding panel. For that you just need to add:

.......
->slideOver()
......

Add custom actions on filament dashboard page

Did you encounter any situation where you need to add the custom actions on your dashboard page. If yes, then this may come in handy. To add that we need to follow some steps.

Create new Dashboard page by extending the old Dashboard page

Firstly, we can create a new page name Dashboard and extends the existing dashboard page. The reason for extending is all the widgets that are registered can be visible on our custom dashboard page.

Add actions

Now, we just need to add the actions on our custom dashboard page.For that just follow the following code.

 public function getActions(): array
    {
.........
}

Now we can add our own custom actions here. Its very simple.

Conclusion

In this article, we discussed about how we can add tab views, add custom actions on filament dashboard page. If you have any confusion, you can comment down below.