Filament•9mo ago

How do I pass form modal input back to the main form?

I am opening a form modal through an action, and having a new input field there. Upon saving the modal, i'd like that contents of the input field inside the modal to go back to the original input field the modal was opened from on the main form. How would one achieve that in Filament?

Solution:

To set a field, try adding Set $set to your argument, then $set("field name", $value)

Jump to solution

19 Replies

MikeG•9mo ago

Still very stuck on this

SirFat•9mo ago

Within your action in the modal, can you not get the state of the item and update the results of your dialog there? For example;

->action(function (<your component> $component): void {
$data = $component->getState();
$data["stuff"] = "things";
$component->state($data);
})

->action(function (<your component> $component): void {
$data = $component->getState();
$data["stuff"] = "things";
$component->state($data);
})

MikeG•9mo ago

Very new to Filament & livewire, so still getting used to some of these fundamentals, is the component suppose to be the model? Or is that some kind of livewire component? I am using a normal filament resource for this My code:

return $form
            ->schema([
                Forms\Components\TextInput::make('title')->columnSpan(2),
                Forms\Components\Textarea::make('description')
                    ->columnSpan(2)
                    ->helperText('This will be used as a base for all AI generated content. Make sure it contains the core information.')
                    ->hintAction(
                        Forms\Components\Actions\Action::make('aiImprove')
                            ->label('Improve with AI')
                            ->mountUsing(function (Form $form, Campaign $campaign) {
                                $form->fill();

                                $form->fill([
                                    'newInputText' => 'Some new text'
                                ]);
                            })
                            ->form([
                                Forms\Components\Textarea::make('aiGenerated')
                            ])
                            ->action(function (array $data, Campaign $campaign, Form $form) {
                                $campaign->description = $data['newInputText'];
                            })
                    ),
            ]);

return $form
            ->schema([
                Forms\Components\TextInput::make('title')->columnSpan(2),
                Forms\Components\Textarea::make('description')
                    ->columnSpan(2)
                    ->helperText('This will be used as a base for all AI generated content. Make sure it contains the core information.')
                    ->hintAction(
                        Forms\Components\Actions\Action::make('aiImprove')
                            ->label('Improve with AI')
                            ->mountUsing(function (Form $form, Campaign $campaign) {
                                $form->fill();

                                $form->fill([
                                    'newInputText' => 'Some new text'
                                ]);
                            })
                            ->form([
                                Forms\Components\Textarea::make('aiGenerated')
                            ])
                            ->action(function (array $data, Campaign $campaign, Form $form) {
                                $campaign->description = $data['newInputText'];
                            })
                    ),
            ]);

This is what I tried

SirFat•9mo ago

It's the component that is creating the action. So, in my case I have a custom 'repeater' which has the action in it, and the argument is the repeater What if you tried TextInput $component which should be the text input itself Modifying data won't do anything I wouldn't have thought because you're not saving it back anywhere. and if you modify campaign, what is saving it?

MikeG•9mo ago

Ye it is what I assumed also, but even the thought of PHP being reactive in JS is still confusing me due to how new I am to this xD I come from VueJS prior to doing this xD

SirFat•9mo ago

haha, I'm only on day 60 😛 So I feel your learning curve

MikeG•9mo ago

Well I dont wasnt it to save anything yet, i basically want to modal to show the new version of the input field, and upon actioning the modal, i'd like the input field in the original form to change

SirFat•9mo ago

and I came along with no laravel/symfony/react/vue at all Oh, then wouldn't you just use $set for that?

MikeG•9mo ago

Oh wow, tht is challenging 🥲

SirFat•9mo ago

ie, function (Set $set ..

MikeG•9mo ago

ye perhaps, i've seen $set come along a couple of times, perhaps I need to investigate that more

Solution

SirFat•9mo ago

To set a field, try adding Set $set to your argument, then $set("field name", $value)

MikeG•9mo ago

Yup that did it 😮

SirFat•9mo ago

huzzah!

MikeG•9mo ago

I need to understand that more, Im assuming $set passed in the original state of the form then (on the top level) Ty so much, I have something to go off of now 😄

SirFat•9mo ago

No problem 🙂 just mark the question as 'solved' 🙂

MikeG•9mo ago

Yes definitely will do, this has stumped me for a while, really appriciate you taking the time to reply to this 😄

SirFat•9mo ago

and yes, Set is useful to learn as is Get, especially when dealing with parent items as well. Having the debugbar going helps as well so you can see where in the data payload you're trying to access ie, $set("../../blah", $value)

MikeG•9mo ago

Aaaah, super usefull, I am starting to fall in love with Filament, specially coming from nova, it seems so much more powerful but definitely has it's learning curve... Once again really appriciate it @SirFat ❤️

Gaming

Programming

How do I pass form modal input back to the main form?