Actions Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require filament/actions
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Filament\Actions\ActionsServiceProvider" --tag="actions-config"
   

2. First Action Add an action to a Livewire component:

   use Filament\Actions\Action;
   
   public function getActions(): array
   {
       return [
           Action::make('delete')
               ->label('Delete Record')
               ->icon('heroicon-o-trash')
               ->action(fn () => $this->deleteRecord()),
       ];
   }
   

3. Triggering the Action Use the actions() method in your Livewire blade template:

   <x-filament::actions :actions="$this->getActions()" />
   

First Use Case

• Quick Modal Action: Add a confirmation modal for a destructive action (e.g., delete).
• Inline Form: Use Action::make('edit') with a form input to modify a record without a full page reload.

Implementation Patterns

Common Workflows

1. Conditional Actions Disable actions based on state:

   Action::make('export')
       ->visible(fn () => $this->record->isExportable())
       ->disabled(fn () => $this->isProcessing),
   

2. Action Groups Organize related actions (e.g., "Bulk Actions"):

   ActionGroup::make([
       Action::make('archive'),
       Action::make('share'),
   ])->label('Bulk Actions'),
   

3. Dynamic Actions Fetch actions from a database or API:

   public function getActions(): array
   {
       return Action::make('custom')
           ->label('Dynamic Action')
           ->url(fn () => route('dynamic.action', $this->record))
           ->openUrlInNewTab();
   }
   

4. Form-Based Actions Use Action::make('create') with form() to collect input:

   Action::make('update-status')
       ->form([
           TextInput::make('status')->required(),
       ])
       ->action(fn (array $data) => $this->updateStatus($data['status'])),
   

Integration Tips

• Livewire Components: Works seamlessly with Filament’s Table, Resource, or custom Livewire components.
• Filament Resources: Extend Filament\Resources\Resource to add actions to tables/views:

  public static function table(Table $table): Table
  {
      return $table->actions([
          Action::make('view'),
          Action::make('edit'),
      ]);
  }
  

• JavaScript Hooks: Customize modal behavior via Alpine.js:

  <x-filament::actions :actions="$actions" @action-confirmed.window="customLogic" />
  

Gotchas and Tips

Pitfalls

1. Action Registration Timing

   • Ensure getActions() is called after $this->record is set (e.g., in mount() or hydrate()).
   • Avoid registering actions in booted() if the component isn’t fully initialized.

2. Form Submission Quirks

   • Use ->defer() for actions that require async processing to prevent UI blocking.
   • Reset form fields after submission:

     ->action(fn (array $data) => $this->process($data))
     ->after(function () { $this->dispatch('refresh'); }),
     

3. Modal Overlays

   • Conflicts with other modals (e.g., Filament’s Modal component). Use ->modal() explicitly if needed:

     Action::make('confirm')->modalContent(fn () => view('custom.modal'));
     

Debugging Tips

• Action Not Showing? Check:

  • visible() conditions (e.g., fn () => auth()->check()).
  • Blade template rendering (<x-filament::actions />).
  • Livewire wire:ignore directives blocking updates.

• Form Data Not Submitting? Verify:

  • form() fields are properly defined (e.g., TextInput::make()).
  • No JavaScript errors in browser console.
  • Action uses ->action() (not ->url()) for form submissions.

Extension Points

1. Custom Modal Views Override the default modal template:

   @push('filament.actions.scripts')
       <script>
           document.addEventListener('filament-action-modal-opened', (e) => {
               console.log('Custom logic here', e.detail);
           });
       </script>
   @endpush
   

2. Action Metadata Add metadata for frontend logic:

   Action::make('export')
       ->extraAttributes(['data-testid' => 'export-action']),
   

3. Server-Side Logic Extend Filament\Actions\Contracts\HasActions for reusable action logic:

   class CustomActions implements HasActions {
       public function getActions(): array { ... }
   }