README

Solution Forest Web development agency based in Hong Kong. We help customers to solve their problems. We Love Open Soruces.

We have built a collection of best-in-class products:

VantagoAds: A self manage Ads Server, Simplify Your Advertising Strategy.
GatherPro.events: A Event Photos management tools, Streamline Your Event Photos.
Website CMS Management: Website CMS Management - Filament CMS Plugin
Filaletter: Filaletter - Filament Newsletter Plugin

Filament Field Group

Filament Field Group is a powerful Laravel package that enhances Filament's form building capabilities. It allows you to easily group and organize form fields, improving the structure and readability of your forms. With this package, you can create collapsible sections, tabs, or custom layouts for your form fields, making complex forms more manageable and user-friendly.

Installation

You can install the package via composer:

composer require solution-forest/filament-field-group

 use SolutionForest\FilamentFieldGroup\FilamentFieldGroupPlugin;

 class AdminPanelProvider extends PanelProvider
 {
     public function panel(Panel $panel): Panel
     {
         return $panel
             ->plugin(FilamentFieldGroupPlugin::make());
     }
 }

Then execute the following commands:

php artisan filament-field-group:install

Publish Config, View, Translation and Migration

You can publish and run the migrations with:

php artisan vendor:publish --tag="filament-field-group-migrations"
php artisan migrate

You can publish the config file with:

php artisan vendor:publish --tag="filament-field-group-config"

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-field-group-views"

This is the contents of the published config file:

return [
    'enabled' => false,
    'models' => [
        'field' => \SolutionForest\FilamentFieldGroup\Models\Field::class,
        'field_group' => SolutionForest\FilamentFieldGroup\Models\FieldGroup::class,
    ],
    'table_names' => [
        'fields' => 'advanced_fields',
        'field_groups' => 'advanced_field_groups',
    ],
];

Usage

Add FilamentFieldGroupPlugin to you panel.
Enable the Field Group resource by setting enabled to true in the config file:

// config/filament-field-group.php
return [
    'enabled' => true,
    // ... other config options
];

Or enable the plugin on FilamentFieldGroupPlugin

use SolutionForest\FilamentFieldGroup\FilamentFieldGroupPlugin;
 
$panel
    ->plugin(FilamentFieldGroupPlugin::make()->enablePlugin());

Create field groups and fields, for example:
- Navigate to the Field Group resource in your Filament admin panel.
- Create a new field group (e.g., "User Basic Info").
- Add fields to the group (e.g., name, email, etc.).
Apply field groups to your form schema:

use SolutionForest\FilamentFieldGroup\Facades\FilamentFieldGroup;

public static function form(Form $form): Form
{
    return $form
        ->columns(1)
        ->schema([
            FilamentFieldGroup::findFieldGroup('user_basic'),
            FilamentFieldGroup::findFieldGroup('user_detail'),
        ]);
}

Available Components

Currently, this package provides the following components:

Text
TextArea
Email
Password
Number
Url
Select
Toggle
Radio
File
Image
Color Picker
DateTime Picker

More components can be added in the future. Feel free to submit a pull request if you have ideas for additional components!

Advanced Usage

Custom Resources

You can call resources on FilamentFieldGroupPlugin to add/replace original resource:

use SolutionForest\FilamentFieldGroup\FilamentFieldGroupPlugin;
 
$panel
    ->plugin(FilamentFieldGroupPlugin::make()
        ->resources([
            // your resource
        ], override: true)
    );

Custom Field Types

You can add your own custom field types by following these steps:

Create a field type class that extends SolutionForest\FilamentFieldGroup\FieldTypes\Configs\FieldTypeBaseConfig
Implement the required methods, particularly getFormSchema() which defines the form fields
Register your custom field type using one of the methods below:

// Option 1: On Your Filament Panel

use SolutionForest\FilamentFieldGroup\FilamentFieldGroupPlugin;

$panel
    ->plugin(FilamentFieldGroupPlugin::make()
        ->fieldTypeConfigs([
            // your field type config
        ], override: true)
    );

// Option 2: On Your AppServiceProvider

use SolutionForest\FilamentFieldGroup\Facades\FilamentFieldGroup;

public function boot(): void
{
    FilamentFieldGroup::fieldTypeConfigs([
        \Your\Custom\FieldType::class
    ], override: true);
}

To completely replace all default field types, set the override parameter to true.

Customizing Field Type Config Form

You can customize the config form for specific field types by adding your own custom options. This is useful when you need to extend the functionality of existing field types with additional configuration parameters.

// In AppServiceProvider.php boot() method
use SolutionForest\FilamentFieldGroup\Facades\FilamentFieldGroup;

public function boot(): void
{
    FilamentFieldGroup::configureFieldTypeConfigFormUsing(
        \SolutionForest\FilamentFieldGroup\FieldTypes\Configs\Text::class,
        function ($field, array $schema) {
            return [
                ...$schema,
                // Your additional config form fields
                Toggle::make('datalist'),
                // More custom configuration options...
            ];
        }
    );
}

This allows you to modify the configuration form for field types while preserving all the default options.

Custom Models

You can set custom models for field groups and fields in your AppServiceProvider:

// In AppServiceProvider.php boot() method
use SolutionForest\FilamentFieldGroup\Facades\FilamentFieldGroup;

public function boot(): void
{
    FilamentFieldGroup::setFieldGroupModelClass(Your\Models\FieldGroup::class);
    FilamentFieldGroup::setFieldModelClass(Your\Models\Field::class);
}

Field Type Mixins

You can extend field type functionality using the mixin method on FieldTypeBaseConfig. This allows you to reuse field configuration logic across different field types:

use SolutionForest\FilamentFieldGroup\FieldTypes\Configs\FieldTypeBaseConfig;

class MyFieldTypeMixin
{
    public function addValidationRules()
    {
        return function (array $rules = []) {
            return array_merge($rules, ['required', 'string']);
        };
    }
    
    public function addHelperText()
    {
        return function () {
            return 'This is a helper text for all fields using this mixin';
        };
    }
}

// Apply the mixin to your field type
FieldTypeBaseConfig::mixin(new MyFieldTypeMixin());

You can also apply mixins to specific field type classes:

use SolutionForest\FilamentFieldGroup\FieldTypes\Configs\Text;

// Apply mixin only to Text fields
Text::mixin(new TextFieldSpecificMixin());

This approach helps maintain DRY code by centralizing common field configurations that can be shared across multiple field types.

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

We welcome contributions to enhance this package. More components can potentially be added, so feel free to submit a pull request with your ideas or improvements.

solution-forest / filament-field-group

Maintainers

Details