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 🙏
No description
T
tg17d 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
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...
DH
Dan Harrin17d 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
A
awcodes17d ago
Can you not make a custom page then you can render the form and the table separately on the same page.
T
tg16d 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.
DH
Dan Harrin16d ago
you can embed a livewire component in a modal and put the table in there maybe
T
tg16d 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.
DH
Dan Harrin16d ago
you can use form component actions within resource forms, yes
T
tg16d 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.
DH
Dan Harrin16d ago
You can inject $record into a function, is that what you want? $record will be the currently editing record
T
tg16d 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.
DH
Dan Harrin16d ago
i dont really understand
T
tg16d 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 !
Want results from more Discord servers?
Add your server
More Posts
Customizing Data Insertion with Filament's Import ActionHello, Regarding the import: https://filamentphp.com/docs/3.x/actions/prebuilt-actions/import Is iCount SaleItems sold by Product IDHello, I have a Sales Resource with (hasMany) SaleItems Resource which selects a product to sell froMissing required parameter for View routeI have just found out the wonder of Repeaters, and after adding one to a form, the first time I submDownloadable() and Openable() gives me 404 errorhello! I am currently creating our system and the downloadable() and openable() syntax in my filamenhow to add external url in navigationi want to add external url in my navigation sidebar. but i find a way for a specific resource. whatcustom themeHas anyone used Multi-Tenancy with diferent DB Sqlite???Livewire View Not foundI have a brand new install of Laravel 11, Filament 3 and Livewire 3. I have been configuring the adBumped from 3 to 3.2 and getting Leage\Csv\Writer not found```/vendor/filament/actions/src/Exports/Jobs/PrepareCsvExport.php:53 Leage\Csv\Writer not found ``` Using TailwindHi I have a project where I'm using Tailwind. I have a related resouce, which I want to highlught Deferring loadingWhat does it actually do for tables?Column not found with table filter and joinsHello everyone, I am working on my first project with filament and I have hit a brick wall. I'm trTrying to find a way to show the infolist in the EditResource pageis it possible? so far i've just managed to make it appear in the view page, but id like it to appeahow to update another model instead of updating current resource?hello i want to insert data into another model first when user edit a form. what should i do?Laravel-Filament Qr generateHello, I hope you have a good day. I want to make a QR converter based on Laravel-filament. I want aHow to download Export instead of storing on server?I have created an export header action on my table like this: ```php ->headerActions([ ExportActioWizard form submitSo im using wizard steps and in my form i have 3 steps but the "create" , "create and create anotherWidget table custom queryHi all, i've a widget that aims to show the latest casting like this: ```php class LatestCastings Policy not applying on custom actionI have a custom filament class that extends filament table action. Its purpose is to update the recoIncorrect orderingHello everybody. Guys, why is this ordering always wrong? The 1040 should come at the end and not atText overflow ellipsisHi all, I'am looking for a way to the size the textcolumn according to the screen size. If the size