Saltar al contenido principal

Descripción general

Introducción​

Los schemas forman la base del enfoque de UI dirigida por el servidor (Server-Driven UI) de Filament. Te permiten construir interfaces de usuario de forma declarativa usando objetos de configuración en PHP. Estos objetos representan componentes que definen la estructura y el comportamiento de tu UI, como formularios, tablas o listas. En lugar de escribir HTML o JavaScript manualmente, creas estos schemas para controlar qué se renderiza en el servidor, simplificando el desarrollo y garantizando consistencia en toda tu aplicación.

Los schemas se utilizan ampliamente en Filament para renderizar elementos dinámicos de la UI. Ya sea que estés definiendo un campo de formulario, el layout de tu página o un botón de acción, el objeto schema define tanto la configuración del componente como su interacción con tus datos. En esencia, los schemas son los bloques constructivos de las UIs de Filament.

Los paquetes de Filament te proporcionan varios componentes. Puedes ver la lista completa en la sección de componentes disponibles:

  • Campos de formulario aceptan entrada del usuario, por ejemplo: texto, select o checkbox. Vienen con validación integrada.
  • Entradas de infolist son componentes para renderizar listas de descripciones. Muestran pares clave-valor, ya sea texto, íconos o imágenes. Los datos generalmente provienen de un registro Eloquent.
  • Componentes de layout estructuran otros componentes, por ejemplo: grid, tabs o asistentes (wizards).
  • Componentes prime son básicos para mostrar contenido estático: texto, imágenes o botones (acciones).

Un schema actúa como contenedor de muchos componentes, y puede anidar infinitamente otros schemas.

Un schema está representado por un objeto Filament\Schemas\Schema al que puedes pasarle los componentes usando el método components().

Componentes disponibles​

Formularios:

Infolists:

Layouts:

Primes:

También se pueden insertar botones de acción (actions) para ejecutar funciones de PHP o abrir modales. Más información en la documentación de acciones.

Ejemplo de schema​

use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Components\Section;

$schema
    ->components([
        Grid::make(2)
            ->schema([
                Section::make('Detalles')
                    ->schema([
                        TextInput::make('name'),
                        Select::make('position')
                            ->options([
                                'developer' => 'Desarrollador',
                                'designer' => 'Diseñador',
                            ]),
                        Checkbox::make('is_admin'),
                    ]),
                Section::make('Auditoría')
                    ->schema([
                        TextEntry::make('created_at')->dateTime(),
                        TextEntry::make('updated_at')->dateTime(),
                    ]),
            ]),
    ])

Grid renderiza varios componentes en columnas responsivas.
Section agrupa componentes en una tarjeta con encabezado.
TextInput, Select y Checkbox aceptan input del usuario.
TextEntry muestra valores de solo lectura como timestamps.

Inyección de utilidades en componentes​

Los métodos de configuración aceptan funciones, lo que permite gran flexibilidad. Además, Filament puede inyectar utilities como parámetros en estas funciones.

Inyectar el estado de otro componente​

use Filament\Schemas\Components\Utilities\Get;

function (Get $get) {
    $email = $get('email');
}
tip

A menos que un campo sea reactivo, el schema no se refrescará al cambiar valor, solo con la siguiente interacción que haga request al servidor. Si necesitas escuchar cambios inmediatos, usa live().

Inyectar el registro Eloquent actual​

use Illuminate\Database\Eloquent\Model;

function (?Model $record) {
    // ...
}

Inyectar la operación actual​

function (string $operation) {
    // ...
}
info

Puedes establecer la operación manualmente usando $schema->operation().

Inyectar instancia de Livewire​

use Livewire\Component;

function (Component $livewire) {
    // ...
}

Inyectar instancia de componente​

use Filament\Schemas\Components\Component;

function (Component $component) {
    // ...
}

Inyectar múltiples utilidades​

use Filament\Schemas\Components\Utilities\Get;
use Filament\Schemas\Components\Utilities\Set;
use Livewire\Component as Livewire;

function (Livewire $livewire, Get $get, Set $set) {
    // ...
}

Inyectar dependencias del container de Laravel​

use Filament\Schemas\Components\Utilities\Set;
use Illuminate\Http\Request;

function (Request $request, Set $set) {
    // ...
}

Configuración global​

Puedes modificar el comportamiento global de un componente usando configureUsing() dentro del método boot() de un service provider. Por ejemplo, hacer que todas las secciones tengan 2 columnas por defecto:

use Filament\Schemas\Components\Section;

Section::configureUsing(function (Section $section): void {
    $section->columns(2);
});

Esto puede sobrescribirse individualmente en cada componente:

Section::make()->columns(1)