F
Filament•15mo ago
S. Mert ÖZTÜRK

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?
No description
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
toeknee•15mo 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ÜRK
S. Mert ÖZTÜRKOP•15mo 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
Vp•15mo ago
Sauravisus
Sauravisus•15mo 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
mar5hall•15mo ago
Try to make a header action with dispatch event for save form. And in component need to add this event listener.
Solution
mar5hall
mar5hall•15mo 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
Sauravisus•15mo 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ÜRK
S. Mert ÖZTÜRKOP•15mo ago
This is acceptable and working good, thanks for help.

Did you find this page helpful?