Generating URL Modal Pop-Ups within FilamentPHP Resource Pages

FilamentPHP is a rapidly growing, user-friendly admin panel package for Laravel that makes building complex admin interfaces a breeze. One of the features that can enhance the user experience in a FilamentPHP resource page is modal pop-ups. Modals are useful for displaying additional information, forms, or actions without navigating away from the current page. In this blog post, we will explore how to generate URL modal pop-ups within FilamentPHP resource pages.

Why Use Modal Pop-Ups?

Modal pop-ups can significantly improve the user interface by:

1. Providing Contextual Information: Displaying additional information related to a resource without requiring the user to navigate to a different page.
2. Streamlining User Actions: Allowing users to perform actions such as editing or deleting records within the same context, making the experience seamless.
3. Enhancing User Engagement: Keeping the user on the same page can lead to better engagement and reduce the risk of losing the user's attention.

Enhancing user experience with modal pop-ups in FilamentPHP resource pages can significantly improve the interactivity of your Laravel application. In this guide, we will walk you through the process of generating URLs for modal actions within the resource's table, allowing you to pass tableAction and tableActionRecord as URL parameters.

Setting Up FilamentPHP

First, ensure you have FilamentPHP installed in your Laravel application. If not, install it via Composer:

composer require filament/filament

Creating a Resource

Next, create a resource in FilamentPHP. For instance, let's create a Product resource:

php artisan make:filament-resource Product

This command generates a resource class, complete with table and form configurations.

Defining Modal Actions

To generate URLs for modal actions in the resource's table, you need to define the actions in your resource's table configuration. Open the ProductResource.php file and locate the table method. Add a custom action:

use Filament\Tables\Actions\Action;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            // Your columns here
        ])
        ->actions([
              Action::make('advance')
                ->action(fn (Product $record) => $record->advance())
                ->modalContent(view('filament.pages.actions.advance'))
        ])
        ->filters([
            // Your filters here
        ]);
}

If you need to generate a URL for that popup action from anywhere within your application, you can do so with the following lines of code:

$url = ProductResource::getUrl(parameters: [
    'tableAction' => 'advance',
    'tableActionRecord' => $this->record->id,
]);

I hope this helps