Filament•2mo ago

Modal action or table inside form

My use case is a CRM application where each resource only has an edit screen. A list of related resources, each within a tab, should be rendered within the parent resource form. This is the center section in the attached screenshot below the „Überblick“ heading, “Aktivitäten”, “Jobs” etc. are said tabs. Please also note the action triggers “+ Notiz” to add a new note from a modal form, and the “bearbeiten” link action triggers to edit one of the listed notes. Basically standard table header + row actions, but … If I implement each tab with a Livewire component that uses Filament tables as documented [1], this will break the parent form submit button. I've read a bunch of threads and GitHub issues [1,2,3] about using Filament tables in forms. If I understand it correctly, the main issue is nested form elements, because the action modal blade component [4] required for actions on custom components will render form elements. This breaks the main form actions because browsers will render them outside the parent form while trying to mitigate the nested formelements, thus leading to $el.closest('form') on the form action button returning null instead of the resource form element. The same issue occurs when I add modal actions to a Livewire component, as they require <x-filament-actions::modals /> to work. Questions and links in a self-reply to work around the character limit. Missing good old forums like Discourse … Thanks in advance 🙏

12 Replies

tg•2mo ago

- Is there a way to render a table or at least modal actions within custom Livewire components, without introducing nested form elements? registerActions on a ViewField seems to work, but I don't know if/how I can use them to edit a related model. - If that's currently impossible, can someone from the core team share their insights why the @teleport investigation at [6] was dropped as “not planned”? @Dan Harrin teased this as a potential Filament v3 feature in [7], but probably had good reasons to drop it. 1: https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component 2: https://www.answeroverflow.com/m/1138201866354835536 3: https://discord.com/channels/883083792112300104/1191881756987633856/1191881756987633856 4: https://github.com/filamentphp/filament/discussions/11845 5: https://github.com/filamentphp/filament/blob/3.x/packages/actions/resources/views/components/modals.blade.php 6: https://github.com/filamentphp/filament/discussions/3654 7: https://github.com/filamentphp/filament/discussions/3654#discussioncomment-3720002

Adding a table to a Livewire component - Table Builder - Filament

How to use table inside a form? - Filament

I want to use table with checkboxes, pagination and filters (as we use it on list page) inside a form on edit page. Is that possible?

GitHub

Filament V3 announcement: Relationmanagers in the form using @telep...

When Filament V3 was announced (#3654) i saw that moving relation managers to anywhere in the form like a formcomponnent was a thing. This could be done using the @teleport function. Since then i w...

GitHub

filament/packages/actions/resources/views/components/modals.blade.p...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

GitHub

Filament v3 Plans · filamentphp filament · Discussion #3654

Filament v3 is on the horizon, and in the interest of transparency, I thought it would be a good idea to let you all know what our plans are. Livewire v3 only According to the Laracon website, Live...

Dan Harrin•2mo ago

@teleport was not implemented by Livewire in the way I expected it to be and remains limited, so we were unable to solve our problem with it

awcodes•2mo ago

Can you not make a custom page then you can render the form and the table separately on the same page.

tg•2mo ago

@Dan Harrin Thanks for the insight! Bummer but reasonable. @awcodes Would be an option to have them on the same page, but the design guidelines of this project demand a three-column form with a listing inside.

Dan Harrin•2mo ago

you can embed a livewire component in a modal and put the table in there maybe

tg•2mo ago

That might be an option, will check. Thanks! Just in case it got lost in my wall of text above: Form component actions are not usable for resource edit operations, or am I missing something? I'd suspect it should work like the Select component editOption modal, but can't get it to.

Dan Harrin•2mo ago

you can use form component actions within resource forms, yes

tg•2mo ago

That I know, but I don't know how to feed the existing related model into the form component action's form. I'll dig into the editOption code of the Select component to see how it's done.

Dan Harrin•2mo ago

You can inject $record into a function, is that what you want? $record will be the currently editing record

tg•2mo ago

Unfortunately, the edit form should edit one of the related records of the currently editing record, so $record doesn't help if it is the parent record. My model relationship: Company -morphMany-> Notes In the screenshot of my EditCompany page, the “bearbeiten” link action should edit the selected row's note: https://cdn.discordapp.com/attachments/1224815288160354324/1224815288382656612/image.png?ex=661edd20&is=660c6820&hm=43ee2a4d2c5a842f27e271142a5c0e6d7a9c675eee5271376e289ad3b041b14d& (middle column, light gray – I complained fruitlessly to the designer about the lack of contrast) This is why I'd like to use a table, as it comes with all of this included 😄 But breaks because of nested forms.

Dan Harrin•2mo ago

i dont really understand

tg•2mo ago

In essence, I want to put a relation manager (i.e. table of related resources) inside its parent resource form. Overriding hasCombinedRelationManagerTabsWithContent render relation managers below the resource form, but not inside – presumably because of the nested forms. This is a purely visual requirement. But I found a solution while digging through the Select component code! A ->model() call to the form component action on a ViewField does the trick. This requires some additional setup for the actions, but I can probably refactor that into a custom field.

Forms\Components\ViewField::make('notes')
    ->hintAction(
        CreateNoteInFormAction::make()
    )
    ->view('filament.resources.notes-list')
    ->registerActions([
        Action::make('editNote')
            ->label('bearbeiten')
            ->link()
            ->form(fn($form) => NoteResource::form($form)->model(Note::class))
            ->fillForm(fn(Action $action, $arguments) => Note::find($arguments['note'])->toArray())
            ->action(static function (array $arguments, array $data) {
                Note::find($arguments['note'])->update($data);
            }),
    ])

Forms\Components\ViewField::make('notes')
    ->hintAction(
        CreateNoteInFormAction::make()
    )
    ->view('filament.resources.notes-list')
    ->registerActions([
        Action::make('editNote')
            ->label('bearbeiten')
            ->link()
            ->form(fn($form) => NoteResource::form($form)->model(Note::class))
            ->fillForm(fn(Action $action, $arguments) => Note::find($arguments['note'])->toArray())
            ->action(static function (array $arguments, array $data) {
                Note::find($arguments['note'])->update($data);
            }),
    ])

The CreateNoteInFormAction is a custom action class that does some setup. Nonetheless, tables inside forms would be nice to have, but I understand the difficulties 🙂 Thanks @Dan Harrin !

Gaming

Programming

Modal action or table inside form