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=customDon'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:
Comments & Discussion
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,
- How to use
->requiresConfirmation(true)? I added it but no effect - How do add a custom button beside save for each form? e.g.
clearall 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 :|
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?
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
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?
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
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" ?
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()
]),
])
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>
thanks. how would you change the session data when changing the information ?
By setting a new value to the session?