Filament•13mo ago

Add action buttons to custom page with HasForms

Hi everyone, I have a question regarding the best method to add action buttons, such as "Create" to my custom page. I've been searching through the documentation, but couldn't find any relevant information. I attempted to implement the HasFormActions interface on my Page and added the getCachedFormAction() method. However, I'm unsure how to properly render these buttons in the view. If anyone has any insights or suggestions, I would greatly appreciate your help. Thank you!

class Edit extends Page implements HasForms, HasFormActions
{
    use InteractsWithForms;

// ... 

    public function getCachedFormAction(string $name): ?\Filament\pages\Actions\Action
    {
        if ($name === 'submit') {
            return \Filament\pages\Actions\Action::make('submit')
                ->action('submit')
                ->icon('heroicon-s-save');
        }
            return null;
        }
    }

class Edit extends Page implements HasForms, HasFormActions
{
    use InteractsWithForms;

// ... 

    public function getCachedFormAction(string $name): ?\Filament\pages\Actions\Action
    {
        if ($name === 'submit') {
            return \Filament\pages\Actions\Action::make('submit')
                ->action('submit')
                ->icon('heroicon-s-save');
        }
            return null;
        }
    }

and my view :

<x-filament::page>
   
        {{ $this->form }}

</x-filament::page>

<x-filament::page>
   
        {{ $this->form }}

</x-filament::page>

7 Replies

toeknee•13mo ago

protected function getActions(): array
    {
        return [
            Action::make('submit')
                ->modalHeading('Create')
                ->extraAttributes([
                    'wire:click' => 'submit',
                ])
                ->action(fn () => true)
                ->icon('heroicon-o-plus'),
        ];
    }

protected function getActions(): array
    {
        return [
            Action::make('submit')
                ->modalHeading('Create')
                ->extraAttributes([
                    'wire:click' => 'submit',
                ])
                ->action(fn () => true)
                ->icon('heroicon-o-plus'),
        ];
    }

KiaBoluki•13mo ago

Thank you for response, but this code will add a button to the page. I want to add the action button at bottom of the form . I can make it with a

<x-filament::button icon="heroicon-o-upload" type="submit">Save</x-filament::button>

<x-filament::button icon="heroicon-o-upload" type="submit">Save</x-filament::button>

but this button does'nt act like a defult action.

toeknee•13mo ago

Ahh so I think you want #drop-in-action ‘s? V3 will have native support for actions everywhere

KiaBoluki•13mo ago

I would like to implement a feature similar to the one shown in the image. However, I want to incorporate default action behaviors such as displaying a circular progress indicator with the text "Uploading..." while the form is being saved.

toeknee•13mo ago

That's just a file upload field customised slightly?

KiaBoluki•13mo ago

Thank you so much! Your hint was really helpful, and I managed to solve it using the following approach:

    public function getCachedFormAction(string $name): ?\Filament\pages\Actions\Action
    {
        if ($name === 'submit') {
            return \Filament\pages\Actions\Action::make('create')
                ->label('Save')
                ->action(fn () => true )
                ->extraAttributes([
                    'wire:click' => 'submit',
                ])
                ->icon('heroicon-s-upload');
        }
    }

    public function getCachedFormAction(string $name): ?\Filament\pages\Actions\Action
    {
        if ($name === 'submit') {
            return \Filament\pages\Actions\Action::make('create')
                ->label('Save')
                ->action(fn () => true )
                ->extraAttributes([
                    'wire:click' => 'submit',
                ])
                ->icon('heroicon-s-upload');
        }
    }

and I added this line to the view

{{ $this->getCachedFormAction('submit') }}

{{ $this->getCachedFormAction('submit') }}

and it works .

toeknee•13mo ago

👍

Gaming

Programming

Add action buttons to custom page with HasForms