Filament•11mo ago

How do I correctly use a Filament action on a custom widget?

I have built the following widget as part of a project I am working on (pictured) where by I am listing the rooms associated with a quote. Each room, has an edit room button that I am trying to use as the editAction and when I click on it, something fires in the network tab but there is no visual change in the UI. I will share some code snippets below for additional context. The button to call edit:

// rooms-overview-list.blade.php
...
<x-filament::button size="sm" class="col-start-11 col-span-2"
                    wire:click="editRoomAction">Edit Room
</x-filament::button>
...

// rooms-overview-list.blade.php
...
<x-filament::button size="sm" class="col-start-11 col-span-2"
                    wire:click="editRoomAction">Edit Room
</x-filament::button>
...

RoomOverview class where I have defined an edit room action:

// RoomOverview.php
public function editRoomAction(): Action
{
    return Action::make('editRoom')
        ->modalHeading('Edit Room')
        ->modalContent(fn () => view('filament.resources.quote-resource.modals.edit-room', compact('room')))
        ->modalFooterActionsAlignment(Alignment::End)
        ->modalWidth('5xl')
        ->action(function ($data, $arguments) {
            dd($data, $arguments);
        });
}

// RoomOverview.php
public function editRoomAction(): Action
{
    return Action::make('editRoom')
        ->modalHeading('Edit Room')
        ->modalContent(fn () => view('filament.resources.quote-resource.modals.edit-room', compact('room')))
        ->modalFooterActionsAlignment(Alignment::End)
        ->modalWidth('5xl')
        ->action(function ($data, $arguments) {
            dd($data, $arguments);
        });
}

editRoomAction has been created in a similar way to createRoomAction which is a method I didn't write but works correctly. I have tried passing a $room param as I figured this may be an issue without it but that does not seem to fix the issue either and causes more problems than it fixes. It could be a lack of livewire experience Any help is greatly appreciated.

3 Replies

DamienOP•11mo ago

(I forgot the image)

bernhard•11mo ago

I think you missunderstood the Action concept. The Action itself is the button and all the methods called on it (modalHeading, etc.) are bound to this button. What you are doing in the code above is, that you are rendering your own button, bind a click event on it and on the click event listening method (editRoomAction) you are returning the Action Button

DamienOP•11mo ago

ah how silly of me! I need to call it like this {{ $this->editRoomAction() }} I now have a modal opening up with cancel / submit buttons which is good, I just need to figure out how to pass the room to it correctly.

Gaming

Programming

How do I correctly use a Filament action on a custom widget?