Hoe maak ik een custom field in Filament?

Draai php artisan make:filament-form-field NaamVanVeld. Je krijgt een class die Filament\Forms\Components\Field extendt en een Blade view. In de view wikkel je je HTML in $getFieldWrapperView() en bind je de waarde via $getStatePath() of $wire.$entangle().

Wat is het verschil tussen een custom page en een resource in Filament?

Een resource is CRUD voor één Eloquent-model: list, create, edit en view. Een custom page is een vrije Livewire-pagina in je panel. Gebruik een custom page voor instellingen, wizards, rapportages en alles wat niet op één model past.

Waarom werken mijn Tailwind-classes niet in een Filament custom view?

Filament's standaard-CSS bevat alleen de classes die Filament zelf gebruikt. Maak een custom theme met php artisan make:filament-theme en zorg dat je views in een @source-pad staan. Registreer het theme met -viteTheme() en draai een nieuwe Vite-build.

Kan ik een bestaande Livewire-component in Filament gebruiken?

Ja. Met Filament\Schemas\Components\Livewire::make() zet je hem in een form of infolist. Je kunt parameters meegeven aan mount() en de component lazy laden. Geef alleen serialiseerbare data mee, omdat de component apart rendert.

Moet ik Filament-views overschrijven om de layout aan te passen?

Liever niet. Gebruik render hooks om HTML op vaste plekken te injecteren en CSS hook classes (prefix fi-) voor styling. Overschreven views moet je bij elke major upgrade opnieuw nalopen.

Wanneer bouw ik een eigen Filament-plugin?

Pas als je dezelfde component in drie of meer projecten gebruikt. Daarvoor is een gewone class in je app eenvoudiger te onderhouden. Een plugin voegt versiebeheer, packaging en compatibiliteitswerk toe. Twijfel je of iets maatwerk vraagt of dat Filament het standaard kan? Neem contact op, dan kijken we er samen naar.

Filament custom field en custom page bouwen: zo werkt het

Een Filament custom field is een PHP-class die Field extendt plus één Blade view. Een custom page is een volledige Livewire-component in je panel. Met vijf bouwstenen kom je ver: custom fields, custom pages, Livewire-componenten, render hooks en een eigen theme. Een plugin is pas zinvol als je...

Een Filament custom field is een PHP-class die Field extendt plus één Blade view. Een custom page is een volledige Livewire-component in je panel. Met vijf bouwstenen kom je ver: custom fields, custom pages, Livewire-componenten, render hooks en een eigen theme. Een plugin is pas zinvol als je het in drie of meer projecten hergebruikt.

Wanneer heb je maatwerk in Filament nodig?

Je hebt maatwerk nodig zodra de standaardcomponenten je proces niet meer volgen. Dat gebeurt later dan de meeste teams denken.

Filament levert tientallen velden, kolommen en layoutcomponenten. Text inputs, selects, repeaters, builders, file uploads, rich editors. In onze uitleg over resources, forms en tables zie je hoe ver je komt met alleen configuratie.

Maar elke backoffice heeft een paar plekken waar het knelt. Concreet:

Een veld dat data uit een externe API toont terwijl je typt (adres, KvK, voorraad).
Een scherm dat geen CRUD is, zoals een importwizard of een planbord.
Een banner die op elke pagina moet staan, bijvoorbeeld "je werkt in de staging-omgeving".
Een huisstijl die verder gaat dan een primaire kleur.

Onze eigen backoffice draait op Filament. Blog, leads, afspraken, cases en een database met Magento-shops. Die is vrijwel volledig standaard Filament, en dat is precies goed: maatwerk bouw je pas als de standaard echt tekortschiet.

Welke uitbreidingsmogelijkheden heeft Filament?

Filament heeft vijf officiële uitbreidingspunten, elk voor een ander probleem. Kies het lichtste dat werkt.

Bouwsteen	Wat het is	Gebruik het voor	Artisan-commando
Custom form field	Class + Blade view die state opslaat	Afwijkende invoer: kaart, kleurkiezer, API-lookup	`make:filament-form-field`
Custom schema component	Class + view zonder eigen state	Weergave binnen een form of infolist	`make:filament-schema-component`
View / Livewire in schema	Blade view of Livewire-component in een form	Grafiek, preview, losse interactie	n.v.t. (`View::make`, `Livewire::make`)
Custom page	Volledige Livewire-pagina in je panel	Wizards, rapportages, instellingen, planborden	`make:filament-page`
Render hook	Injectie van HTML op vaste plekken in de layout	Banners, scripts, extra knoppen in topbar	n.v.t. (`registerRenderHook`)
Custom theme	Eigen Tailwind CSS-build voor je panel	Huisstijl, eigen Tailwind-classes in views	`make:filament-theme`

De volgorde in de tabel is ook de volgorde van complexiteit. Een render hook is tien regels. Een custom field met Alpine.js en een externe API is een dag werk, inclusief tests.

Hoe maak je een Filament custom field?

Je genereert een class die Filament\Forms\Components\Field extendt en koppelt die aan een Blade view. De view regelt de binding met Livewire-state.

Het commando:

bash

php artisan make:filament-form-field LocationPicker

Dat levert een class op in App\Filament\Forms\Components:

php

namespace App\Filament\Forms\Components;

use Filament\Forms\Components\Field;

class LocationPicker extends Field
{
    protected string $view = 'filament.forms.components.location-picker';
}

En een view. De wrapper zorgt dat label, helper text en validatiefouten er hetzelfde uitzien als bij elk ander veld:

blade

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }">
        <input x-model="state" />
    </div>
</x-dynamic-component>

Drie functies doen het werk:

$getStatePath() geeft het pad naar de Livewire-property waar de waarde in staat.
$applyStateBindingModifiers() respecteert ->live() of debounce-instellingen uit je PHP-config.
$wire.$entangle() koppelt Alpine.js-state aan Livewire, zodat je client-side kunt werken zonder elke toetsaanslag naar de server te sturen.

Wat maakt een custom field goed?

Een goed custom field gedraagt zich als een native veld. Validatie, ->required(), ->disabled() en ->hidden() moeten gewoon werken. Dat krijg je gratis door Field te extenden en de wrapper te gebruiken.

Wat wij in de praktijk toevoegen:

Configuratiemethodes in fluent stijl, bijvoorbeeld ->defaultZoom(12). Sla de waarde op als int | Closure en lees hem uit via $this->evaluate(). Dan werken closures met $get en $record ook.
Geen zware JavaScript inline. Laad externe libraries via Filament's asset-systeem, niet via een