Filament Breezy: add new field to Personal Info component

syahzul

Syahril Zulkefli

Posted on October 20, 2024

Filament Breezy: add new field to Personal Info component

How about adding a phone number, for instance, to the Breezy plugin's Personal Info section?

Default Personal Info component

Step 1: Create a new migration

In order to include our new field, we must first create a migration file.

php artisan make:migration add_column_telephone_to_users_table --table=users
Enter fullscreen mode Exit fullscreen mode

Make adjustments similar to the code below:

/**
 * Run the migrations.
 */
public function up(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('telephone')->nullable()->after('password');
    });
}

/**
 * Reverse the migrations.
 */
public function down(): void
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn('telephone');
    });
}
Enter fullscreen mode Exit fullscreen mode

Remember to execute the migration command in order to apply the modifications to our table.

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Step 2: Create a new Livewire component

Create a new Livewire component by using the command below. The Breezy Personal Info component will be overridden by this component.

php artisan make:livewire MyPersonalInfo
Enter fullscreen mode Exit fullscreen mode

Change the class to make sure it extends the Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo component instead.

use Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo;

class MyPersonalInfo extends PersonalInfo
{
    ...
    ...
}
Enter fullscreen mode Exit fullscreen mode

Next, we must specify the array of fields that will be utilised. If the fields are not declared, the database will not store our phone number.

public array $only = [
    'name', 'email', 'telephone',
];
Enter fullscreen mode Exit fullscreen mode

To render the telephone field, we must then write a new function.

protected function getTelephoneComponent(): Forms\Components\TextInput
{
    return Forms\Components\TextInput::make('telephone')
        ->tel()
        ->label(__('filament-breezy::default.fields.telephone'));
}
Enter fullscreen mode Exit fullscreen mode

Finally, to add our new field, override the getProfileFormSchema().

protected function getProfileFormSchema(): array
{
    $groupFields = Forms\Components\Group::make([
        $this->getNameComponent(),
        $this->getEmailComponent(),
        $this->getTelephoneComponent(),
    ])->columnSpan(2);

    return ($this->hasAvatars)
        ? [filament('filament-breezy')->getAvatarUploadComponent(), $groupFields]
        : [$groupFields];
}
Enter fullscreen mode Exit fullscreen mode

This is our MyPersonalInfo component's complete code.

<?php

namespace App\Livewire;

use Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo;
use Filament\Forms;

class MyPersonalInfo extends PersonalInfo
{
    public array $only = [
        'name', 'email', 'telephone',
    ];

    protected function getTelephoneComponent(): Forms\Components\TextInput
    {
        return Forms\Components\TextInput::make('telephone')
            ->tel()
            ->label(__('filament-breezy::default.fields.telephone'));
    }

    protected function getProfileFormSchema(): array
    {
        $groupFields = Forms\Components\Group::make([
            $this->getNameComponent(),
            $this->getEmailComponent(),
            $this->getTelephoneComponent(),
        ])->columnSpan(2);

        return ($this->hasAvatars)
            ? [filament('filament-breezy')->getAvatarUploadComponent(), $groupFields]
            : [$groupFields];
    }
}

Enter fullscreen mode Exit fullscreen mode

Step 3: Add new translation

To add our telephone field to the newly created field, we must publish Breezy translation files.

php artisan vendor:publish --tag=filament-breezy-translations
Enter fullscreen mode Exit fullscreen mode

Add telephone to the fields array in /lang/vendor/filament-breezy/en/default.php.

'fields' => [
    ...
    'email' => 'Email',
    'telephone' => 'Telephone',
    'login' => 'Login',
    ...
Enter fullscreen mode Exit fullscreen mode

As you see fit, you can include translation into another language.

Step 4: Set the new Profile Info component

Last but not least, we must configure our new Personal Info component in our panel service provider, which for me is /app/Providers/Filament/AdminServiceProvider.

->plugins([
    BreezyCore::make()
        ->myProfileComponents([
            'personal_info' => MyPersonalInfo::class,
        ])
]);
Enter fullscreen mode Exit fullscreen mode

It should do the trick. A telephone field has been added to our Personal Info section.

New Personal Info component

You can add other fields as well by modifying the codes above.

💖 💪 🙅 🚩
syahzul
Syahril Zulkefli

Posted on October 20, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related