Filament•7mo ago

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:

Jump to solution

2 Replies

AlexandreOP•7mo 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•7mo 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! 🤩

Gaming

Programming

Wizard Form display a modal after submit instead a redirect