Filament•14mo ago

how to, livewire form save button to header in filament custom page

Hi, As I summarized in the title, I have a livewire form and I have a submit button in the form. I want to move this submit button to the header (as seen in the picture), how can I do it?

Solution:

For example. Header action:

Action::make('saveForm')
    ->action(function () {
        $this->dispatch('saveFormData');
}),

Action::make('saveForm')
    ->action(function () {
        $this->dispatch('saveFormData');
}),

...

Jump to solution

8 Replies

toeknee•14mo ago

How have you added the submit button, did you see: I believe the original v2 principle should work: https://filamentphp.com/docs/2.x/forms/getting-started#preparing-your-livewire-component

Getting started - Form Builder - Filament

S. Mert ÖZTÜRKOP•14mo ago

@toeknee i don't have any problem with form submit, or button functionality. If you look to screen shot you can see, i want to move button to page header. But it's livewire component and button must be inside of form. But i'm asking, is there anyway to move header

Vp•14mo ago

https://filamentphp.com/docs/3.x/panels/pages#header-actions

Pages - Panel Builder - Filament

Sauravisus•14mo ago

That'd move it outside the form and make it non-functional. I'm trying to find a solution to the same problem. 😅

mar5hall•14mo ago

Try to make a header action with dispatch event for save form. And in component need to add this event listener.

Solution

mar5hall•14mo ago

For example. Header action:

Action::make('saveForm')
    ->action(function () {
        $this->dispatch('saveFormData');
}),

Action::make('saveForm')
    ->action(function () {
        $this->dispatch('saveFormData');
}),

Then in component:

#[On('saveFormData')]
public function saveFormData()
{
    ## Create record or something;
    dd($this->form->getState());
}

#[On('saveFormData')]
public function saveFormData()
{
    ## Create record or something;
    dd($this->form->getState());
}

Sauravisus•14mo ago

Alternatively, the one and only Dan Harrin just shared a solution to putting the submit button into header actions over here: https://discord.com/channels/883083792112300104/1166754657310355456/1166766327072051241

S. Mert ÖZTÜRKOP•14mo ago

This is acceptable and working good, thanks for help.

Gaming

Programming

how to, livewire form save button to header in filament custom page