FilamentF
Filament•2y 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.

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>


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');
}


FilamentPHP is so much fun to use and even more fun to learn, I love it, and thanks for that! 🤩
Jump to solution
Was this page helpful?