Filament•6mo ago

How to trigger a Livewire component update after saving an Edit form?

Hi, I've been struggling with this for some time now and could sure use a nudge in the right direction. I have a Filament edit form with a layout that includes a Livewire component, being included like this in the Form schema:

Group::make([
    Livewire::make(UserSidebar::class)
    ->id('user-sidebar'),
])

Group::make([
    Livewire::make(UserSidebar::class)
    ->id('user-sidebar'),
])

What I would like to have happen is that when the form is saved it dispatches a refresh request to that component to refresh its data, as it displays several fields found in the form. I've been able to get it to work with an afterStateUpdated() on every related field in the Form, like this:

TextInput::make('display_name')
    ->afterStateUpdated(function (Component $livewire, $state) {
        $livewire->dispatch('updateUserSidebar', ['display_name' => $state]);
    })

TextInput::make('display_name')
    ->afterStateUpdated(function (Component $livewire, $state) {
        $livewire->dispatch('updateUserSidebar', ['display_name' => $state]);
    })

(note that is just updating one field due to some limitations I ran into trying to pass in the whole record) ...but I would much rather have one refresh defined in one place. I tried many, many variations in the UserEdit page php file, on the Action call itself and on the afterSave() event like this:

protected function afterSave(): void
{
    $this->fromView()->findComponent('user-sidebar')
        ->dispatchBrowserEvent('updateUserSidebar', $this->record);
}

protected function afterSave(): void
{
    $this->fromView()->findComponent('user-sidebar')
        ->dispatchBrowserEvent('updateUserSidebar', $this->record);
}

which doesn't work, those methods don't exist, and I've tried several other variations. I haven't found how to tap into properly dispatching an event to Livewire from this point. My question is, am I even thinking about this the right way? I would think the user sees their edit form with this sidebar component on the side. They edit a few fields, hit Save to have those changes take effect, and then the sidebar should update. I would expect Filament has a trigger to dispatch a refresh of the Livewire component with the entire updated record data when a save Action is triggered. Any suggestions would be greatly appreciated, thank you!

Solution:

Add in the livewire component ```php use Livewire\Attributes\On; ...

Jump to solution

4 Replies

LeandroFerreira•6mo ago

Why do you need to send $record if you can access the current record in the LW component? https://filamentphp.com/docs/3.x/forms/advanced#accessing-the-current-record-in-the-livewire-component

public ?YourModel $record = null;

public ?YourModel $record = null;

<div>
    {{ $record->your_field }}
</div>

<div>
    {{ $record->your_field }}
</div>

Advanced forms - Form Builder - Filament

karikasOP•6mo ago

Hey thanks for the reply! My Livewire component is referencing the $record just like the docs suggest, and that's how it's showing the record's data initially, but it does not automatically update the data when the form updates unless I dispatch a refresh event. When I do a refresh event all the $record references update perfectly, but right now I'm only able to dispatch that refresh on individual field updates with afterStateUpdated(). I would really like to have just one place in the code that dispatches that refresh when the whole form is saved, and I thought that would be an afterSave() method in my Edit page php file, but I haven't found a way to access Livewire from that function to do the dispatch. Hope that makes sense, I've been coding for a zillion years but Livewire and Filament are both pretty new to me, so I may be taking the wrong approach here or overlooking something.

Solution

LeandroFerreira•6mo ago

Add in the livewire component

use Livewire\Attributes\On;

#[On('updateData')]
public function updateData(array $data): void
{
    //you can access $data from Form or $record..
}

use Livewire\Attributes\On;

#[On('updateData')]
public function updateData(array $data): void
{
    //you can access $data from Form or $record..
}

Add in the EditPage

protected function afterSave(): void
{
    $this->dispatch('updateData', data: $this->data);
}

protected function afterSave(): void
{
    $this->dispatch('updateData', data: $this->data);
}

karikasOP•6mo ago

Fantastic @Leandro Ferreira , that did it! It's perfect - thank you very much for your help! I hadn't realized that I could just call $this->dispatch() from the EditPage, that was the tricky part for me. Thanks again.

Gaming

Programming

How to trigger a Livewire component update after saving an Edit form?