Filament form with factory data

Sometimes, when we need to test our application locally, we always have to fill forms manually. Of course, there are some solutions out there, like browser plug-ins, but let's take the Filament approach and achieve this with more accurate data.

When I say Filament approach, I mean an easy way like pressing a button and have our form filled with the fake data. To achieve this, we will make use of the Laravel Eloquent Factories feature. Let's take the classic example of a post an define our PostFactory class.

# Prepare the Factory definition

Let's imagine we have a Post model with the following fields:

 1class PostFactory extends Factory
 2{
 3    public function definition(): array
 4    {
 5        $title = $this->faker->sentence;
 6 
 7        return [
 8            'title' => $title,
 9            'slug' => str($title)->slug()->toString(),
10            'excerpt' => $this->faker->sentences(3, true),
11            'body' => $this->faker->sentences(10, true),
12        ];
13    }
14}

Pretty straight forward, right? Now, let's see how we can use this factory to fill our form.

# Fill the Form Action

Well, in our CreatePost page, we will add a new action to the header actions array. This action will be responsible for filling the form with the fake data. Let's see how we can do this:

 1<?php
 2 
 3namespace App\Filament\Resources\PostResource\Pages;
 4 
 5use App\Filament\Resources\PostResource;
 6use App\Models\Post;
 7use Filament\Actions\Action;
 8use Filament\Resources\Pages\CreateRecord;
 9 
10class CreatePost extends CreateRecord
11{
12    protected static string $resource = PostResource::class;
13 
14    protected function getHeaderActions(): array
15    {
16        return [
17            // Action definition here
18        ];
19    }
20}

After creating this skeleton, we will add our action definition:

 1<?php
 2 
 3namespace App\Filament\Resources\PostResource\Pages;
 4 
 5use App\Filament\Resources\PostResource;
 6use App\Models\Post;
 7use Filament\Actions\Action;
 8use Filament\Resources\Pages\CreateRecord;
 9 
10class CreatePost extends CreateRecord
11{
12    protected static string $resource = PostResource::class;
13 
14    protected function getHeaderActions(): array
15    {
16        return [
17            Action::make('form-fake-filler')
18                ->label('Fill Form')
19                ->icon('heroicon-o-sparkles')
20                ->color('info')
21                ->action(function(self $livewire): void {
22                    $data = Post::factory()->make()->toArray();
23 
24                    $livewire->form->fill($data);
25                }),
26        ];
27    }
28}

And after you press the Fill Form button, you will see something like this:

Ta-da! ✨

# Conclusion

This is a simple approach to fill forms with fake data. Of course, you can use this approach for any form you want. Just make sure you have a factory for that model.

As a bonus, let's show this button only when we are in development mode. To achieve this, let's add a condition to our action definition:

 1//...
 2protected function getHeaderActions(): array
 3{
 4    return [
 5        Action::make('form-fake-filler')
 6            //...
 7            ->action(function(self $livewire): void {
 8                $data = Post::factory()->make()->toArray();
 9 
10                $livewire->form->fill($data);
11            })
12            ->visible(fn () => app()->environment('local'))
13    ];
14}
15//...