Últimas Entradas

Ver todos los artículos

Everything about the Filament v4 Beta Release: Nested Resources, Multi-Factor Authentication, and Much More

The Filament team has announced exciting details about the upcoming Filament v4 Beta release, and it’s undoubtedly the most anticipated version to date. Filament v4 is the largest and most feature-packed release Filament has ever had, surpassing even the massive v3 that required over 100 minor versions.

Most Notable Features of Filament v4

Nested Resources

One of the longest-standing community requests is finally becoming reality. Nested resources allow you to operate on a Filament resource within the context of a parent resource.

Practical example: In a learning management system, you’d have a CourseResource for your Course model. Within a course, you’d also have many related Lesson objects. Previously in v3, you could only edit Lesson records through a modal within the CourseResource. Now, with v4, you can edit a Lesson in the context of its related Course, but on a full page.

Creating a nested resource is simple: use the make:filament-resource command as you would to create a normal resource, but add the –nested flag.

php artisan make:filament-resource LessonResource --nested

Built-in Multi-Factor Authentication (MFA)

Multi-factor authentication is considered almost a necessity in the modern era of application authentication, and Filament v4 includes it out of the box.

MFA Features:

  • App authentication: Compatible with Google Authenticator, Authy, or Microsoft Authenticator
  • Email authentication: Sending one-time codes to email
  • Automatic configuration: Just enable the system and Filament does the work for you
use Filament\Auth\MultiFactor\App\AppAuthentication;
use Filament\Auth\MultiFactor\Email\EmailAuthentication;

public function panel(Panel $panel): Panel
{
    return $panel
        ->multiFactorAuthentication([
            AppAuthentication::make(),
            EmailAuthentication::make()->codeExpiryMinutes(2),
        ], isRequired: true);
}

Tables with Static Data

Another revolutionary change: Filament tables can now take static data not backed by models and display it with all the same features you know and love.

Previously, the recommendation was to create a “Model” backed by Sushi, but this didn’t work in all situations. Now it’s as simple as passing an array of data to the records() method:

Table::make()
    ->records([
        ['name' => 'Juan', 'email' => 'juan@example.com'],
        ['name' => 'María', 'email' => 'maria@example.com'],
    ])
    ->columns([
        TextColumn::make('name'),
        TextColumn::make('email'),
    ]);

Performance and User Experience Improvements

Partial Rendering

With partial rendering in Filament v4, only the specific part of the form that needs updating is refreshed, providing a smoother and faster user experience.

Enhanced Heroicons

The new Heroicon enum class provides IDE autocomplete to help you quickly find the icon you need, no more magic strings. Each icon is available in solid and outlined variants.

use Filament\Support\Enums\Heroicon;

// Before
->icon('heroicon-o-star')

// Now
->icon(Heroicon::OutlinedStar)

Unified Schemas and Flexibility

Server-Driven UI Schema System

Schemas form the basis of Filament’s Server-Driven UI approach. They allow you to build user interfaces in PHP using structured configuration objects.

Available components:

  • Form fields
  • Infolist entries
  • Layout components
  • Core components like text and buttons

New Components

Code Editor: Allows users to write and edit code directly in the interface, supporting HTML, CSS, JavaScript, PHP, and JSON.

Slider Component: Allows users to select one or more numeric values by dragging a handle along a track, ideal for ranges, ratings, or percentages.

Table Repeaters: Display repeater items in a table layout using defined columns.

Global Timezone Configuration

The new FilamentTimezone facade allows you to set a default timezone for Filament globally, simplifying default configuration across multiple components like DateTimePicker, TextColumn, and TextEntry.

FilamentTimezone::set('Europe/Madrid');

Accessibility Improvements

Filament v4 takes accessibility seriously with:

  • Dynamic labels: Adjust based on schema depth
  • Color contrast management: Using OKLCH colors to meet WCAG guidelines
  • Container Queries: New CSS feature that allows elements to respond to their parent container’s size

Tailwind CSS v4 Support

Tailwind CSS v4 is a major update focused on performance, flexibility, and modern web standards, with a revamped configuration system and faster builds.

When Will It Be Available?

While the team hasn’t given an exact date, the beta is expected to be available “in the near future” according to the official announcement. The team has confirmed they’re working on final launch details.

Conclusion

Filament v4 promises to be a quantum leap in functionality and developer experience. With native nested resources, built-in multi-factor authentication, static data support in tables, and significant performance improvements, this version will further solidify Filament as the go-to tool for building admin panels in Laravel.

The combination of powerful new features with user experience improvements makes Filament v4 a must-have upgrade for any Laravel developer working with admin interfaces.

Are you excited about these new features? Share your thoughts on which Filament v4 feature you’re most looking forward to!