Filament Tips : Modal View on the Table Action

#laravel #filamentphp #php #filamenttips

Introduction

Today, i got question from my sponsors. they ask me how to change filamentphp table row action (default, will be redirect to edit / view page). so, what he wanted is showing a modal slideOver view after click the table row (a record of the list).

Let's Begin

In this case, im using a resource called Example. So, don't be confused.

So, we need set url record to null and add a ViewAction.

public static function table(Table $table): Table
{
    return $table
           ->actions([
               ViewAction::make()->slideOver()
           ])
           ->recordUrl(url: null)
}

it will be look like this

And it don't stop there, he didn't want the view show a disabled from, but a information like infolist.

in filament, i didn't found how to change the form to the infolist.

Then?

Create a custom view, name it example_view.blade.php

Next things is, how we get a record of clicked row.

so, in ListRecord there is a property called cachedMountedTableActionRecord. They cached a clicked row (basically, it can used for an actions of the table).

Next, im add a method called cachedMountedTableActionRecordInfolist to the ListExample page and return a Infolist.

public function cachedMountedTableActionRecordInfolist(Infolist $infolist) : Infolist
    {
        $data = $this->cachedMountedTableActionRecord;

        return $infolist
            ->state($data->toArray())
            ->schema([
                TextEntry::make('name'),
                TextEntry::make('created_at')
            ]);
    }

Next, modify the example_view.blade.php and call the method.

{{$this->cachedMountedTableActionRecordInfolist}}

Last, Change the ViewAction to Action in the ExampleResource.

public static function table(Table $table): Table
{
    return $table
           ->actions([
               Tables\Actions\Action::make('view')
                    ->slideOver()
                    ->modalContent(view('example_view'))
                    ->modalSubmitAction(false)
                    ->modalCancelActionLabel('Close'),
           ])
           ->recordUrl(url: null)
}