Filament: the TALL Stack Admin Panel

Filament[1] is the elegant TALL stack admin for Laravel artisans. V1 has been in the … Read more Filament: the TALL Stack Admin Panel

Filament[1] is the elegant TALL stack admin for Laravel artisans. V1 has been in the works for over a year, and we are pleased to release it!

[embedded content]

The admin panel has simple foundations of pure Livewire components, with a powerful form and table builder that relies heavily on Alpine.js. The UI is a custom design built using Tailwind CSS v2.

Setup

Installation is straightforward:

composer require filament/filament
php artisan migrate

Create a user account for your admin panel by running

php artisan make:filament-user

and answering the input prompts.

Creating a Resource

Resources are associated with Eloquent models from your app. To create a resource for the AppModelsCustomer model:

php artisan make:filament-resource Customer

This will create several files in the app/Filament/Resources directory:

.
+-- CustomerResource.php
+-- CustomerResource
|   +-- Pages
|   |   +-- CreateCustomer.php
|   |   +-- EditCustomer.php
|   |   +-- ListCustomers.php

Your new resource class lives in CustomerResource.php. Resource classes register forms, tables, authorization settings, and pages associated with that model.

The classes in the Pages directory are used to customize the pages in the admin panel that interact with your resource.

Building a Form

Filament comes with a powerful form builder which can be used to create intuitive, dynamic, and contextual forms in the admin panel.

Forms have a schema, which is an array that contains many form components. Let’s define a form schema for our CustomerResource:

use FilamentResourcesFormsComponents;
use FilamentResourcesFormsForm;

public static function form(Form $form)
{
    return $form
        ->schema([
            ComponentsTextInput::make('name')->autofocus()->required(),
            ComponentsTextInput::make('email')->email()->required(),
            ComponentsSelect::make('type')
                ->placeholder('Select a type')
                ->options([
                    'individual' => 'Individual',
                    'organization' => 'Organization',
                ]),
            ComponentsDatePicker::make('birthday'),
        ])
        ->columns(2);
}

For more information about building forms, please see the documentation[2].

Building a Table

Filament includes a table builder which can be used to create interactive tables in the admin panel.

Tables have columns and filters, which are defined in two methods on the table object. Let’s build a table for our CustomerResource:

use FilamentResourcesTablesColumns;
use FilamentResourcesTablesFilter;
use FilamentResourcesTablesTable;

public static function table(Table $table)
{
    return $table
        ->columns([
            ColumnsText::make('name')->primary(),
            ColumnsText::make('email')->url(fn ($customer) => "mailto:{$customer->email}"),
            ColumnsText::make('type')
                ->options([
                    'individual' => 'Individual',
                    'organization' => 'Organization',
                ]),
            ColumnsText::make('birthday')->date(),
        ])
        ->filters([
            Filter::make('individuals', fn ($query) => $query->where('type', 'individual')),
            Filter::make('organizations', fn ($query) => $query->where('type', 'organization')),
        ]);
}

For more information about the table builder, please see the documentation[3].

Wrapping up

For more information about the Filament project, please visit our website. We’d love to see how you will use it and hear any suggestions – drop us a message on Twitter @danjharrin or @ryanscherler[4][5][6]

References

  1. ^ Filament (github.com)
  2. ^ documentation (filamentadmin.com)
  3. ^ documentation (filamentadmin.com)
  4. ^ our website (filamentadmin.com)
  5. ^ @danjharrin (twitter.com)
  6. ^ @ryanscherler (twitter.com)


Source: Laravel News


Categories: DevelopmentTags:

Tags:


Leave a Reply

Your email address will not be published. Required fields are marked *