Filament 3 has authentication features that you can easily enable, like the Profile page. But its default design is the same as the login/register page. What if we want to use the full-page design, with menus, for the Edit Profile page, too? Let's see how to do it.
This is how it looks by default:

What if we want to use the "full" Filament design with menus on the left? Also, we can go one step further and have form layouts similar to Laravel Breeze:

So, we have two goals for this tutorial:
- Use the full-page Filament design with custom pages
- Create multiple forms on one Filament page
Let's go!
Custom Page for Edit Profile Page
So first, let's create a new custom page.
php artisan make:filament-page EditProfile --type=custom
Don't choose any Resource.
This command created two files:
-
App\Filament\Pages\EditProfile.php- A Livewire component's PHP class where all the logic goes. -
resources\filament\pages\edit-profile.blade.php- a View file where the front-end code goes.
Next, let's change Filament panels settings so the profile link goes to our custom page.
app/Providers/Filament/AdminPanelProvider.php:
use App\Filament\Pages\EditProfile; class AdminPanelProvider extends PanelProvider{ public function panel(Panel $panel): Panel { return $panel ->default() ->id('admin') ->path('admin') ->login() ->profile() ->userMenuItems([ 'profile' => MenuItem::make()->url(fn (): string => EditProfile::getUrl()) ]) // ... }}
After visiting the Edit Profile page, you should see our custom page with the heading text Edit Profile.

Showing Multiple Forms on One Page
Next, let's add forms to our custom page. Because the custom page is a Livewire component, we must prepare it to...
Premium Members Only
This advanced tutorial is available exclusively to Laravel Daily Premium members.
Already a member? Login here
Premium membership includes:
thanks. how would you change the session data when changing the information ?
By setting a new value to the session?
is possbile to hide one of the forms based on user role ?
to respond my own question use whatver condition you have for the role in getForms, fillForms and the blade file :)
You can. Simple ifs for che
ok for this one i could not find anything anywhere. how can i send a verification email on email change ?
use eloquent events
Hi, great post!
I'm using the Multi-Tenancy and all is working the same way, just one thing, I don't succeed to call the profile page on a custom route outside the tenant. For now my route is /tenant-1/profile but I'm trying to get /profile as it is not tenant related.
It is working on the default profile page example (even using tenant), but I cannot replicate.
Any idea?
Thank you in advance,
From what I see, it doesn't work on multi-Tenancy :(. Have you found a solution?
There is a property something liie tenant aware which make route to not require a
->requiresConfirmation(true)? I added it but no effectclearall fields in that section?We just published a tutorial about Clear button in the form: Filament: Add Custom Button to Form - Reset Example to Clear Fields
How do you implement this if you have multiple panel?
I notice I get filament.{panel-name}.page.{page-name} route not define.
My guess is I need to setup Panel config.
But can't get it to work :|
->userMenuItems([ 'profile' => MenuItem::make()->url(fn (): string => EditProfile::getUrl(panel: 'admin')), ])
As an Admin i have a userResource, when i update the password information i got the message
Route [login] not defined.as you mentioned in the tutorial i tire to apply this code in EditUser:Hard to tell what you are doing different, but this part is from Filament itself https://github.com/filamentphp/filament/blob/3.x/packages/panels/src/Pages/Auth/EditProfile.php#L138
One way to fix it is to add login route with a redirect
could you give me an example?
What if i want to make two different actions one for edit password and the other for edit the personal infomation (conditionaly hiding the forms), how to acomplish this? any ideas?
You can create a custom page with 2 livewire components inside of it. Each containing individual forms
https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#using-multiple-forms
It is possible to have a "main filament tab" with multiple forms, each in separate tab? For example: Tab "Profile Information" --> editProfileForm with getUpdateProfileFormActions Tab "Update Password" --> editPasswordForm with getUpdatePasswordFormActions
I think it should be possible using filament tabs blade component https://filamentphp.com/docs/3.x/support/blade-components/tabs
thank you!
If i've multitenancy, how I make profile URL?
There is a package already exists for this
Which one?
he might be talking about companies
How could you add a "relationManager" table, for example "AddressesRelationManager"?
In a resources file, it would look like this:
But how can you do it in a "Page" ?
You would add it manually. How they are added you need to check the source code or search examples in the filament
Thanks.
Where do you import
Haltfrom on your exceptions inEditProfile?Also, I assume the import for the
MenuItemin theAdminPanelProviderisuse Filament\Navigation\MenuItem;use Filament\Support\Exceptions\Halt;How can I make my two different forms appear under three separate tabs? Where should I place the tabs and the forms associated with each tab?
You can't do it this way. In this case you should create a custom page. With this approach maybe adding a livewire form as a field would work. https://filamentphp.com/docs/3.x/forms/advanced#inserting-livewire-components-into-a-form
In the meantime, I managed to solve it. I'll share it in case someone finds it useful. Thank you.