Tricks

Automatic label translations

Mar 23, 2023
Reinbier
Admin panel, Form builder, Table builder

When it comes to translating your resources or models, the Spatie Translatable plugin got you covered. But what if you need to translate the UI when inserting those models in your database? Sure enough, Filament provides a nice fluent helper by adding ->translateLabel() to your Fields and Columns. However, adding that to all inputs & columns for every resource in a very large project can be very cumbersome.

Filament's Configurable-trait to the rescue!

For translating all labels, just put the following piece of code in your AppServiceProvider:

use Filament\Forms\Components\Field;
use Filament\Forms\Components\Placeholder;
use Filament\Tables\Columns\Column;
use Filament\Tables\Filters\BaseFilter;
 
/**
* Bootstrap any application services.
*/
public function boot(): void
{
// ...
 
$this->autoTranslateLabels();
}
 
private function autoTranslateLabels()
{
$this->translateLabels([
Field::class,
BaseFilter::class,
Placeholder::class,
Column::class,
// or even `BaseAction::class`,
]);
}
 
private function translateLabels(array $components = [])
{
foreach($components as $component) {
$component::configureUsing(function ($c): void {
$c->translateLabel();
});
}
}

Since the Filter itself is not a Field, you need to configure this as well for the filter's indicator to be translated.

Now all you need to do is provide your translations in your lang/{your-locale}.json file and all of your columns, form inputs and filter labels will be automatically translated.

No comments yet…