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()

mutateFormDataBeforeCreate()

and

handleRecordCreation()

handleRecordCreation()

methods in the Creation Class.
Furthermore, I also used the

->submitAction()

->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

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!

Jump to solution

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()

mutateFormDataBeforeCreate()

and

handleRecordCreation()

handleRecordCreation()

methods in the Creation Class.
Furthermore, I also used the

->submitAction()

->submitAction()

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

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!

Jump to solution

Wizard Form display a modal after submit instead a redirect

Wizard Form display a modal after submit instead a redirect

Similar Threads

Similar Threads

Similar Threads