F
Filamentβ€’2mo ago
Alexandre

Wizard Form display a modal after submit instead a redirect

Hello all ! I made a 5-step Wizard form that works well. I used the mutateFormDataBeforeCreate() and handleRecordCreation() methods in the Creation Class. Furthermore, I also used the ->submitAction() method to render a custom button. Everything works fine for creation and when the form is submitted and everything works, I'm redirected to the resource view page. My question is: instead of redirecting to the resource page, is it possible to display a modal with informative text and a custom link instead? I don't see anything in the Wizard class that would allow me to use a modal. Do you know if this is possible? And if so, could you give me some advice? Thanks in advance!
Solution:
Perfect, I've found it πŸ₯³ If anyone is looking to do the same, here's how I did it: Go to vendor/filament/filament/resources/views/resources/pages/create-record.blade.php and copy the contents. ...
Jump to solution
2 Replies
Alexandre
Alexandreβ€’2mo ago
Well, I may have an idea, but it's not that yet. I redid the create() function in my CreateRequest.php I copy/pasted all the methods and then removed this part:
$redirectUrl = $this->getRedirectUrl();
$this->redirect($redirectUrl, navigate: FilamentView::hasSpaMode() && is_app_url($redirectUrl));
$redirectUrl = $this->getRedirectUrl();
$this->redirect($redirectUrl, navigate: FilamentView::hasSpaMode() && is_app_url($redirectUrl));
Originally, I wanted to put an Action() on it, but when I clicked on the button, nothing happened and the action didn't open (no error in the console). So I was wondering, is it possible to create a view with the contents of the modal with the Blade component <x-filament::modal/> and call it in the create method with this (instead of the redirect):
$this->dispatch('open-modal', id: 'modal-confirmation');
$this->dispatch('open-modal', id: 'modal-confirmation');
If this is possible, how do I add the view Blade component to the "CreateRequest" page of my resource? A method in mount()? Thanks in advance πŸ™‚
Solution
Alexandre
Alexandreβ€’2mo ago
Perfect, I've found it πŸ₯³ If anyone is looking to do the same, here's how I did it: Go to vendor/filament/filament/resources/views/resources/pages/create-record.blade.php and copy the contents. Create a new blade page in your view folder and paste the content you've just copied. In this page, add your modal :
<x-filament-panels::page
@class([
'fi-resource-create-record-page',
'fi-resource-' . str_replace('/', '-', $this->getResource()::getSlug()),
])
>

<x-filament-panels::form
id="form"
:wire:key="$this->getId() . '.forms.' . $this->getFormStatePath()"
wire:submit="create"
>
{{ $this->form }}

<x-filament-panels::form.actions
:actions="$this->getCachedFormActions()"
:full-width="$this->hasFullWidthFormActions()"
/>
</x-filament-panels::form>
//modal here !
<x-filament-panels::page.unsaved-data-changes-alert/>
<x-filament::modal id="modal-id">
<p>My modal</p>
</x-filament::modal>

</x-filament-panels::page>
<x-filament-panels::page
@class([
'fi-resource-create-record-page',
'fi-resource-' . str_replace('/', '-', $this->getResource()::getSlug()),
])
>

<x-filament-panels::form
id="form"
:wire:key="$this->getId() . '.forms.' . $this->getFormStatePath()"
wire:submit="create"
>
{{ $this->form }}

<x-filament-panels::form.actions
:actions="$this->getCachedFormActions()"
:full-width="$this->hasFullWidthFormActions()"
/>
</x-filament-panels::form>
//modal here !
<x-filament-panels::page.unsaved-data-changes-alert/>
<x-filament::modal id="modal-id">
<p>My modal</p>
</x-filament::modal>

</x-filament-panels::page>
After that, on your create function in CreateRequest.php, just pass the event to open the modal and that it !
public function create(bool $another = false): void
{
//create logic

$this->dispatch('open-modal', id: 'modal-confirmation');
}
public function create(bool $another = false): void
{
//create logic

$this->dispatch('open-modal', id: 'modal-confirmation');
}
FilamentPHP is so much fun to use and even more fun to learn, I love it, and thanks for that! 🀩