FilamentPHP: form in confirmation modal when creating record

FilamentPHP: form in confirmation modal when creating record

Question: In FilamentPHP, how can you create a form in a confirmation modal when creating a record?

Answer: In FilamentPHP, you can create a form in a confirmation modal when creating a record by using the confirm method with a custom callback function. Here's a step-by-step guide on how to achieve this:

1. Define the form schema: First, you need to define the form schema for the record you want to create. Create a new file in the resources/forms directory with a name that describes the form, for example, CreateRecordForm.php.

namespace App\Forms;

use Filament\Forms\Form;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;

class CreateRecordForm extends Form
{
    protected function fields(): array
    {
        return [
            TextInput::make('name')
                ->label('Name'),
            Textarea::make('description')
                ->label('Description'),
        ];
    }
}

2. Create the record resource: Next, you need to create a record resource that uses the form schema you defined earlier. Create a new file in the resources/record directory with a name that describes the resource, for example, RecordResource.php.

namespace App\Resources\Record;

use Filament\Resources\Resource;
use App\Models\Record;
use App\Forms\CreateRecordForm;

class RecordResource extends Resource
{
    protected function form(Create $create): CreateRecordForm
    {
        return new CreateRecordForm();
    }

    protected function model(): string
    {
        return Record::class;
    }
}

3. Create the record page: Now, you need to create the record page that displays the form when creating a new record. Create a new file in the resources/views/record.blade.php directory with the following content:

<?php

use Filament\Facades\Filament;
use App\Resources\Record\RecordResource;

return Filament::make(RecordResource::class)
    ->with('createView', 'resources.views.create.create-record.blade.php');

Create a new file in the resources/views/create.blade.php/create-record.blade.php directory with the following content:

<?php

use Filament\Forms\Components\Actions\CreateAction;
use Filament\Forms\Components\ConfirmationModal;
use Filament\Forms\Components\Form;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Contracts\HasForms;
use Filament\Support\Facades\Filament;
use App\Forms\CreateRecordForm;

return function (CreateRecordForm $form) {
    return [
        Form::component('default', function () use ($form) {
            return $form->render();
        }),

        CreateAction::component('create', function () use ($form) {
            return function () use ($form) {
                $form->submit(function () use ($form) {
                    $form->create();
                });

                return ConfirmationModal::component('default', function () use ($form) {
                    return [
                        'title' => 'Confirm creating record',
                        'content' => 'Are you sure you want to create this record?',
                        'confirmText' => 'Create Record',
                        'cancelText' => 'Cancel',
                        'onConfirm' => function () use ($form) {
                            $form->submit();
                        },
                    ];
                });
            };
        }),
    ];
};

4. Register the resource: Finally, you need to register the record resource with Filament. Add the following code to the app/Providers/AppServiceProvider.php file:

use App\Resources\Record\RecordResource;

protected function register()
{
    Filament::registerResources();

    Filament::serving(function () {
        Filament::registerCurrentResource('record');
    });

    Filament::serving(function () {
        Filament::registerResource(RecordResource::class);
    });
}

Now, when you create a new record, Filament will display a confirmation modal with the form you defined. Once you confirm the creation, the record will be saved in the database.