Skip to main content
Premium Members Only
Join to unlock this tutorial and all of our courses.
Premium Tutorial

Filament Custom Edit Profile Page: Multiple Forms and Full-Page Design

August 27, 2023
8 min read

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:

default filament profile page

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:

breeze profile page

So, we have two goals for this tutorial:

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.

empty custom profile page


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.

Premium membership includes:

Access to all premium tutorials
Video and Text Courses
Private Discord Channel
Barbu Ionut avatar

thanks. how would you change the session data when changing the information ?

Nerijus avatar

By setting a new value to the session?

Barbu Ionut avatar

is possbile to hide one of the forms based on user role ?

Barbu Ionut avatar

to respond my own question use whatver condition you have for the role in getForms, fillForms and the blade file :)

Nerijus avatar

You can. Simple ifs for che

Barbu Ionut avatar

ok for this one i could not find anything anywhere. how can i send a verification email on email change ?

Nerijus avatar

use eloquent events

Moussepi avatar

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,

Rafał Skonieczka avatar

From what I see, it doesn't work on multi-Tenancy :(. Have you found a solution?

Nerijus avatar

There is a property something liie tenant aware which make route to not require a

dailer avatar
  1. How to use ->requiresConfirmation(true)? I added it but no effect
  2. How do add a custom button beside save for each form? e.g. clear all fields in that section?
Povilas Korop avatar

We just published a tutorial about Clear button in the form: Filament: Add Custom Button to Form - Reset Example to Clear Fields

Muhammad Sidiq Ali avatar

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 :|

Steve avatar

->userMenuItems([ 'profile' => MenuItem::make()->url(fn (): string => EditProfile::getUrl(panel: 'admin')), ])

Ismail Mahmoud avatar

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:

public function afterSave(): void
{
if (request()->hasSession() && array_key_exists('password', $this->data)) {
request()->session()->put([
'password_hash_' . Filament::getAuthGuard() => $this->data['password'],
]);
}
}
```
 
but the error still happening
 
Any suggetions?
Nerijus avatar

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

Ismail Mahmoud avatar

could you give me an example?

Ismail Mahmoud avatar

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?

Modestas avatar

You can create a custom page with 2 livewire components inside of it. Each containing individual forms

novobyte avatar

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

Nerijus avatar

I think it should be possible using filament tabs blade component https://filamentphp.com/docs/3.x/support/blade-components/tabs

novobyte avatar

thank you!

Pedro Barradas avatar

If i've multitenancy, how I make profile URL?

->userMenuItems([
'profile' => MenuItem::make()->url(fn (): string => EditProfile::getUrl())
])
Hossam Mohamed avatar

There is a package already exists for this

Zayed Hassan avatar

Which one?

Nerijus avatar

he might be talking about companies

Frugone avatar

How could you add a "relationManager" table, for example "AddressesRelationManager"?

In a resources file, it would look like this:

public static function getRelations(): array
{
return [
RelationManagers\AddressesRelationManager::class,
];
}

But how can you do it in a "Page" ?

Nerijus avatar

You would add it manually. How they are added you need to check the source code or search examples in the filament

Daniel Haven avatar

Where do you import Halt from on your exceptions in EditProfile?

Also, I assume the import for the MenuItem in the AdminPanelProvider is use Filament\Navigation\MenuItem;

Nerijus avatar

use Filament\Support\Exceptions\Halt;

Zoltan Farkas avatar

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?

Tabs::make('Tabs')
->tabs([
Tabs\Tab::make('Profile')
->schema([
$this->editProfileForm()
]),
Tabs\Tab::make('Password')
->schema([
$this->editPasswordForm()
]),
])
Nerijus avatar

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

Zoltan Farkas avatar

In the meantime, I managed to solve it. I'll share it in case someone finds it useful. Thank you.

<x-filament-panels::page x-data="{ activeTab: 'editProfileForm' }">
<x-filament-panels::form wire:submit="save">
<div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
<x-filament::tabs contained>
<x-filament::tabs.item
icon="heroicon-o-cog-6-tooth"
alpine-active="activeTab === 'editProfileForm'"
x-on:click="activeTab = 'editProfileForm'">
Profile
</x-filament::tabs.item>
 
<x-filament::tabs.item
icon="heroicon-o-inbox"
alpine-active="activeTab === 'editPasswordForm'"
x-on:click="activeTab = 'editPasswordForm'">
Password
</x-filament::tabs.item>
 
</x-filament::tabs>
 
<div class="fi-fo-tabs-tab p-6">
<div x-show="activeTab === 'editProfileForm'">
{{ $this->editProfileForm }}
</div>
 
<div x-show="activeTab === 'editPasswordForm'">
{{ $this->editPasswordForm }}
</div>
</div>
</div>
 
<x-filament-panels::form.actions :actions="$this->getFormActions()" />
 
</x-filament-panels::form>
</x-filament-panels::page>

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.