How to create a custom Profile page with FilamentPHP

# Intro

Creating a simple Filament page is not a challenge, anyone can run the command and there you have it .... but configuring and customising the page can sometime become challenging. Let's take it step by step and "demystify" the customisation.

Assuming that you already know how to setup a new Laravel project and also add FilamentPHP to it, I jump right into the page creation, as documented on the official docs. Run this comand in your CLI:

1php artisan make:filament-page Profile

# Working on the page

First of all, the profile page should be a form that allows a user to update their profile data so we should implement the HasForms contract and use the InteractsWithForms trait.

And because we want a Profile page, we would like to hide it in the navigation sidebar (a custom page would be added automatically here by Filament) ...

 1// file: app/Filament/Pages/Profile
 2 
 3use Filament\Forms\Concerns\InteractsWithForms;
 4use Filament\Forms\Contracts\HasForms;
 5use Filament\Pages\Page;
 6 
 7class Profile extends Page implements HasForms
 8{
 9    use InteractsWithForms;
10 
11    //...
12 
13    public static function shouldRegisterNavigation(): bool
14    {
15        return false;
16    }
17 
18    // ..
19}

... and show it in the user dropdown menu by providing a MenuItem in the userMenuItems method of your PanelProvider:

 1// file: app/Providers/Filament/AdminPanelProvider
 2 
 3use App\Filament\Pages\Profile;
 4use Filament\Navigation\MenuItem;
 5use Filament\Panel;
 6 
 7public function panel(Panel $panel): Panel
 8{
 9    return $panel
10        // ...
11        ->userMenuItems([
12            MenuItem::make()
13                ->label('Profile')
14                ->url(fn (): string => Profile::getUrl())
15                ->icon('heroicon-o-user'),
16        ])
17        // ...
18}

# Add some data

After these preliminary steps, we need go back to our newly created page to add some data. Let's not forget that in the end, the Filament Page is a Livewire component. So, let's add the $data property that should hold your user details and mount the form

 1// file: app/Filament/Pages/Profile
 2 
 3//...
 4public ?array $data = [];
 5 
 6public function mount(): void
 7{
 8    $this->form->fill(
 9        auth()->user()->attributesToArray()
10    );
11}
12//...

# Build the form fields

Ok, now, let's add the form method and add some fields to it:

 1// file: app/Filament/Pages/Profile
 2 
 3//...
 4use Filament\Forms\Form;
 5 
 6//...
 7public function form(Form $form): Form
 8{
 9    return $form
10        ->schema([
11            Forms\Components\TextInput::make('name')
12                ->autofocus()
13                ->required(),
14            Forms\Components\TextInput::make('email')
15                ->required(),
16        ])
17        ->statePath('data')
18        ->model(auth()->user());
19}
20//...

And before moving to the view file generated by the command we've run in the start of this article, let's add some behaviour to our form by creating another two methods in the Profile page class, getFormActions() for adding the action button and update() for the action that will be executed when the button is pressed:

 1// file: app/Filament/Pages/Profile
 2 
 3//...
 4use Filament\Actions;
 5 
 6//...
 7protected function getFormActions(): array
 8{
 9    return [
10        Actions\Action::make('Update')
11            ->color('primary')
12            ->submit('Update'),
13    ];
14}
15 
16public function update()
17{
18    auth()->user()->update(
19        $this->form->getState()
20    );
21}
22 
23//...

# The view file

As mentioned above and also in the official docs, when we've run the command to create a custom page, we were also provided with a blade file skeleton

1<!-- file: resources/views/filamHereent/pages/profile.blade.php -->
2 
3<x-filament-panels::page>
4 
5</x-filament-panels::page>

Here we need to tell blade to render our form by adding the following Filament component:

1<!-- file: resources/views/filament/pages/profile.blade.php -->
2 
3<x-filament-panels::page>
4 
5    <x-filament-panels::form>
6        {{ $this->form }}
7    </x-filament-panels::form>
8 
9</x-filament-panels::page>

And because we've create also the action buton and the form action in our Profile class, we could use those inside the blade view to give some useful behaviour to the form:

 1<!-- file: resources/views/filamHereent/pages/profile.blade.php -->
 2 
 3<x-filament-panels::page>
 4    <x-filament-panels::form wire:submit="update">
 5        {{ $this->form }}
 6 
 7        <x-filament-panels::form.actions
 8                :actions="$this->getFormActions()"
 9        />
10    </x-filament-panels::form>
11</x-filament-panels::page>

# Conclusion

With this final step, our custom Profile page is ready to be used! Of course, you can you a lot of extra configuration provided by Filament, like adding widgets, changing title or the label or the icon .. and lots more.

# Extra

As a bonus, you could also add some notifications when you update the profile, here's how:

 1// file: app/Filament/Pages/Profile
 2 
 3//...
 4use Filament\Actions;
 5use Filament\Notifications\Notification;
 6 
 7//...
 8protected function getFormActions(): array
 9{
10    return [
11        Actions\Action::make('Update')
12            ->color('primary')
13            ->submit('Update'),
14    ];
15}
16 
17public function update(): void
18{
19    auth()->user()->update(
20        $this->form->getState()
21    );
22 
23    Notification::make()
24        ->title('Profile updated!')
25        ->success()
26        ->send();
27}
28 
29//..