How to enable profile display for user in Filament

Enabling user profile display in Filament is a great way to allow users to quickly update their name, email, and password through a simple form. Filament provides us with a built-in and customizable solution that makes this process easy. In this article, I'll show you how to enable and customize user profile display in Filament.

Basic Setup for Profile Display in Filament

The first step to enabling profile display in Filament is to configure the dashboard to enable authentication features such as login, registration, password reset, email verification, and profile display.

To do this, you need to modify the dashboard configuration file:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // Other configurations...
        ->login()
        ->registration()
        ->passwordReset()
        ->emailVerification()
        ->profile(); // Activate the profile visualization
}

With this setup, Filament will automatically enable a profile page where users can update their personal information.

Customizing the Profile Page

While Filament's basic setup is functional, you may want to customize the profile page to fit your project's specific needs. You can do this by creating a custom class that extends Filament's EditProfile base class.

Here's how you can do it:

1. Create the Custom Class

First, create a new PHP class in app/Filament/Pages/Auth/EditProfile.php:

<?php
 
namespace App\Filament\Pages\Auth;
 
use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use Filament\Pages\Auth\EditProfile as BaseEditProfile;
 
class EditProfile extends BaseEditProfile
{
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('username')
                    ->required()
                    ->maxLength(255),
                $this->getNameFormComponent(),
                $this->getEmailFormComponent(),
                $this->getPasswordFormComponent(),
                $this->getPasswordConfirmationFormComponent(),
            ]);
    }
}

In this example, the EditProfile class extends Filament's EditProfile base class. This allows you to modify the profile form using methods like getNameFormComponent() to get the default form components.

2. Integrate the custom class

Once you've created the class, integrate it into your dashboard configuration:

use App\Filament\Pages\Auth\EditProfile;
use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // Ohers configurations
        ->profile(EditProfile::class); // Use the custom class
}

3. Customize Form Components

You can customize form components as needed. For example, you could add additional validations, change the layout of fields, or even add new fields to the form.

Conclusion

Enabling and customizing user profile display in Filament is a simple process that offers great flexibility. By following the steps mentioned above, you can implement a user profile system that fits the needs of your project, improving the end-user experience.

Remember that Filament offers many customization options, so you can explore and adapt the functionalities to optimize your workflow.

This article has shown you how to configure and customize user profile display in Filament. With these tools, you will be on your way to offering a more complete and personalized experience to the users of your application.