In this video we will be setting up the ArticleResource using php artisan make:filament-resource . We will mostly be working on the basic of the ArticleForm so that we can create an article in the database.

This video will look into the:

1. Filament\Forms\Components\FileUpload field.

2. Filament\Forms\Components\RichEditor field.

3. Filament\Forms\Components\Selectfield.

4. Filament\Forms\Components\TextInput field.

5. Filament\Forms\Components\DateTimePicker field.

These component is what our form component will primarily consist of.

The full ArticleForm below:

<?php
namespace App\Filament\Resources\Articles\Schemas;
use Filament\Forms\Components\DateTimePicker;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;
class ArticleForm
{
public static function configure(Schema $schema): Schema
{
return $schema
->components([
TextInput::make('title')
->required()
->afterStateUpdatedJs(<<<'JS'
function slugify(text) {
return text
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.replace(/[^a-zA-Z0-9\s-]/g, '')
.trim()
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.toLowerCase();
}
$set('slug', slugify($state ?? ''));
JS
)->minLength(2),
TextInput::make('slug')
->unique(ignoreRecord: true)
->helperText('This is the url for the article, e.g., /articles/your-slug-here')
->required(),
RichEditor::make('body')
->label('Article Content')
->required()
->columnSpanFull(),
FileUpload::make('thumbnail')
->image()
->imageEditor()
->required(),
TextInput::make('seo_title')
->required(),
Select::make('user_id')
->relationship('user', 'name')
->label('Author'),
DateTimePicker::make('published_at')->required(),
TextInput::make('summary')
->helperText('Summary appearing on article cards and as seo meta description for search engine optimization.')
->required()
]);
}
}