Syahril Zulkefli
Posted on October 20, 2024
How about adding a phone number, for instance, to the Breezy plugin's Personal Info section?
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
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');
});
}
Remember to execute the migration command in order to apply the modifications to our table.
php artisan migrate
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
Change the class to make sure it extends the Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo
component instead.
use Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo;
class MyPersonalInfo extends PersonalInfo
{
...
...
}
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',
];
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'));
}
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];
}
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];
}
}
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
Add telephone
to the fields array in /lang/vendor/filament-breezy/en/default.php
.
'fields' => [
...
'email' => 'Email',
'telephone' => 'Telephone',
'login' => 'Login',
...
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,
])
]);
It should do the trick. A telephone field has been added to our Personal Info section.
You can add other fields as well by modifying the codes above.
Posted on October 20, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.