Filament•15mo ago

Custom Page: open modal from link

Hey there. I have a custom page php artisan make:filament-page MyPage. In there I want a link that once clicked, opens a modal. This modal needs to go to the server and fetch something (so it's not just a JS modal). How can I achieve this? I've been wrestling with the docs to try and solve this for a while now.

<!-- my-page.blade.php -->
<x-filament-panels::page>
    {{ $this->updateUserAction }}
    
    <x-filament-actions::modals />
</x-filament-panels::page>

<!-- my-page.blade.php -->
<x-filament-panels::page>
    {{ $this->updateUserAction }}
    
    <x-filament-actions::modals />
</x-filament-panels::page>

use InteractsWithActions;
use InteractsWithForms;

public function updateUserAction(): Action
{
    return Action::make('updateUserAction')
        ->action(fn () => User::first()->update(['name' => Str::random()]))
        ->requiresConfirmation();
}

use InteractsWithActions;
use InteractsWithForms;

public function updateUserAction(): Action
{
    return Action::make('updateUserAction')
        ->action(fn () => User::first()->update(['name' => Str::random()]))
        ->requiresConfirmation();
}

The example makes no sense but if it works, I would be happy. The button is shown but when clicked, the php request is fired but no modal appears with the response (code 200). Am I missing something?

7 Replies

bwurtz999•15mo ago

From the docs,

You must use the InteractsWithActions and InteractsWithForms traits, and implement the HasActions and HasForms interfaces on your Livewire component class:

. Do you implement HasActions and HasForms?

Mini0nOP•15mo ago

My custom page extends the Filament\Pages\Page who in turn extends the BasePage that extends Livewire\Component and implements those interfaces. It's enough, right? Anyone?

Patrick Boivin•15mo ago

The code looks OK. Which version of Filament exactly?

LeandroFerreira•15mo ago

it shouldn't be necessary if you are using panel builder. This was supposed to work. Any console error?

Mini0nOP•15mo ago

I think I got it. In my code (not the one I put here) the action and the method had different names. That was causing the request to be made but no action taken. I had something like this:

public function updateUserAction(): Action
{
    return Action::make('someActionName')
      ...

public function updateUserAction(): Action
{
    return Action::make('someActionName')
      ...

In the blade I need to call $this->something then in the Livewire component I need to have a somethingAction() that has an Action::make('something') inside. Right?

Patrick Boivin•15mo ago

What you have in your first example code is fine.

Mini0nOP•15mo ago

Thanks!

Gaming

Programming

Custom Page: open modal from link