Filament•6d ago

Action in infolist does not show the form

I made some widgets that consist of just infolists. At this point i'm trying to add an action to one of the TextEntries to allow the user to edit a field directly from the widget. The infolist does show the action icon but the form for the action does not appear. I am not sure anymore if my approach with widgets makes sense, though it seems like infolists are supported by Widgets. As an expirement I also made a custom Livewire component with the Infolist, that resulted in the same outcome. The (simplified) class of the widget looks like this:

<?php

class ServerDetails extends Widget implements HasInfolists
{
    use InteractsWithInfolists;

    protected static string $view = 'filament.resources.assets-object-resource.widgets.server-details';

    public Server $record;

    public function getObjectDetailsInfoListProperty(Infolist $infolist): Infolist
    {
        return $infolist
            ->record($this->record)
            ->name('Server details')
            ->schema([
                Section::make('Server details')
                    ->schema([
                        TextEntry::make('customer.name')
                            ->label(__('Customer'))
                            ->suffixActions([
                                Action::make('update')
                                    ->icon('heroicon-m-pencil-square')
                                    ->form([
                                        TextInput::make('name')
                                    ])
                                    ->action(function (array $data, $record): void {
                                        $record->name = $data['name'];
                                        $record->save();
                                    })
                            ])
                    ]),
            ]);
    }
}

<?php

class ServerDetails extends Widget implements HasInfolists
{
    use InteractsWithInfolists;

    protected static string $view = 'filament.resources.assets-object-resource.widgets.server-details';

    public Server $record;

    public function getObjectDetailsInfoListProperty(Infolist $infolist): Infolist
    {
        return $infolist
            ->record($this->record)
            ->name('Server details')
            ->schema([
                Section::make('Server details')
                    ->schema([
                        TextEntry::make('customer.name')
                            ->label(__('Customer'))
                            ->suffixActions([
                                Action::make('update')
                                    ->icon('heroicon-m-pencil-square')
                                    ->form([
                                        TextInput::make('name')
                                    ])
                                    ->action(function (array $data, $record): void {
                                        $record->name = $data['name'];
                                        $record->save();
                                    })
                            ])
                    ]),
            ]);
    }
}

Solution:

```php public function getObjectDetailsInfoList(Infolist $infolist): Infolist { ... }...

Jump to solution

9 Replies

Dennis Koch•6d ago

You probably need to add <x-filament-actions::modals /> to your component/widget blade

ikbentomasOP•6d ago

Thanks for the suggestion. I didn't know that was necessary. After adding that component to my blade file I can see two forms in the HTML.

<form wire:submit.prevent="callMountedInfolistAction">...</form>
<form wire:submit.prevent="callMountedFormComponentAction">...</form>

<form wire:submit.prevent="callMountedInfolistAction">...</form>
<form wire:submit.prevent="callMountedFormComponentAction">...</form>

When I click the edit button the html is refreshed (the html element is lighting up in the inspector). But the modal does not open, it stays like this <div x-show="isOpen" style="display: none;"> Do you have another pointer for this problem? The blade file is pretty straight forward

<x-filament-widgets::widget>
    {{ $this->objectDetailsInfoList }}
    <x-filament-actions::modals />
</x-filament-widgets::widget>

<x-filament-widgets::widget>
    {{ $this->objectDetailsInfoList }}
    <x-filament-actions::modals />
</x-filament-widgets::widget>

awcodes•6d ago

See here. You probably need the HasForms and InteractsWithForms interface and trait. https://filamentphp.com/docs/3.x/infolists/adding-an-infolist-to-a-livewire-component

Adding an infolist to a Livewire component - Infolist Builder - Fil...

awcodes•6d ago

Unless the widget class already includes them.

ikbentomasOP•6d ago

Thank @awcodes , I gave that a try but it doesn't make a difference (that's also why I had ommited it from the first snippet). I tried it again after adding the modal component but it needs something something more.

awcodes•5d ago

To be clear, which Action are you using? Ie, which namespace is it in?

ikbentomasOP•5d ago

i'm using this Action

use Filament\Infolists\Components\Actions\Action;

use Filament\Infolists\Components\Actions\Action;

LeandroFerreira•5d ago

rename your method from getObjectDetailsInfoListProperty to getObjectDetailsInfoList

Solution

LeandroFerreira•5d ago

public function getObjectDetailsInfoList(Infolist $infolist): Infolist
{
  ...
}

public function getObjectDetailsInfoList(Infolist $infolist): Infolist
{
  ...
}

<x-filament-widgets::widget>
    {{ $this->getObjectDetailsInfoList }}
    <x-filament-actions::modals />
</x-filament-widgets::widget>

<x-filament-widgets::widget>
    {{ $this->getObjectDetailsInfoList }}
    <x-filament-actions::modals />
</x-filament-widgets::widget>

Gaming

Programming

Action in infolist does not show the form

Did you find this page helpful?