JibayMcs/dynamic-forms-example

Example Laravel/FilamentPHP Project for the Filament plugin Dynamic-Forms

About

Laravel / FilamentPHP projet to test the use of the FilamentPHP plugin jibaymcs/dynamic-forms

Load Form from JSON ! ^{(Not ready for production)}

Mainly used to load a form from a JSON file, but also from a database model or relationship.

The purpose of this plugin is to create forms with dynamic fields from a JSON file.

It is not designed to directly modify the values of a Resource, but rather for a custom Page, implementing a form (* *Adding a form to a Livewire component **).

Usage

Do whatever you want with your JSON!

TextInput, Select, RichEditor, Grid, Section, Tabs, almost anything works!

But you'll find the latest list of supported elements below.

Warning

Live alert ! Yep reactivity is a great thing with Livewire ! But for security reasons, nothing about state updates can be done in JSON afterStateUpdate is currently not supported.

But I'm working on callable method from json using a particulation PHP "Controller" for this DynamicForm

Supported Fields/Layouts

Fields

Field	Supported ?
Text input	✅
Select	✅
Toggle	✅
Checkbox	Not tested
Radio	Not tested
Date-time picker	Not tested
File upload	Not tested
Rich editor	✅
Markdown editor	✅
Repeater	Not tested
Builder	Not tested
Tags input	Not tested
Textarea	✅
Key-value	Not tested
Color picker	Not tested
Toggle buttons	Not tested
Hidden	✅
Custom fields	Not implemented

Layouts

Layout	Supported ?
Grid	✅
Fieldset	✅
Tabs	✅
Wizard	Not implemented
Section	✅
Split	Not implemented
Custom layouts	Not implemented
Placeholder	Not implemented

Example Form:

public static function form(Form $form): Form
    {
        return $form
            //   From Database/Model
            ->schema(DynamicForm::make(DummyForm::first(), 'data')->getSchema());

            //   From JSON File
            ->schema(DynamicForm::make(storage_path('forms.json'))->getSchema());

            //   Classic Form
            ->schema([
                Forms\Components\TextInput::make('test')
                ->live()
            ]);

            // Classic Form + Dynamic Form from JSON
            ->schema([
                Forms\Components\TextInput::make('test'),
                ...DynamicForm::make(storage_path('forms.json'))
                    ->getSchema()
            ]);

            /**
             * TODO W.I.P  
             */
            // Classic Form + Dynamic Form from relation
            ->schema([
                Forms\Components\TextInput::make('test'),

                ...DynamicForm::make("test_form")
                    // Used for creation context
                    ->default(storage_path('forms.json'))
                    // Mainly used for edition context
                    ->relationship('dummyForm', 'data', $form)
                    ->getSchema()
            ]);
    }

Example JSON File:

{
    "side": {
        "field": "Filament\\Forms\\Components\\TextInput",
        "label": "Side",
        "default": "Default text hey !",
        "required": true,
        "hint": "Le côté où ajouter les espaces (left, right, both)"
    },
    "size": {
        "field": "Filament\\Forms\\Components\\TextInput",
        "label": "Size",
        "hint": "La longueur de la chaîne",
        "integer": true,
        "default": 15,
        "minValue": 10,
        "visibleOn": [
            "create",
            "edit"
        ],
        "live": {
            "onBlur": true
        }
    },
    "Filament\\Forms\\Components\\Fieldset": {
        "heading": "I'm a fieldset from JSON !",
        "columns": 1,
        "schema": [
            {
                "checkbox": {
                    "field": "Filament\\Forms\\Components\\Checkbox",
                    "label": "Checkbox",
                    "hint": "I'm a checkbox from JSON !"
                }
            }
        ]
    },
    "Filament\\Forms\\Components\\Tabs": {
        "heading": "I'm a fieldset from JSON !",
        "columns": 1,
        "tabs": [
            {
                "Tab 1": [
                    {
                        "yayTabCheckbox": {
                            "field": "Filament\\Forms\\Components\\Checkbox",
                            "label": "Checkbox",
                            "hint": "I'm a checkbox from JSON, From a Tab !"
                        }
                    },
                    {
                        "yayTabText": {
                            "field": "Filament\\Forms\\Components\\TextInput",
                            "label": "Woaw",
                            "hint": "I'm a text input from JSON, From a Tab !"
                        }
                    }
                ]
            }
        ]
    },
    "Filament\\Forms\\Components\\Grid": {
        "columns": {
            "sm": 3,
            "xl": 6,
            "2xl": 1
        },
        "schema": [
            {
                "character": {
                    "label": "Character",
                    "field": "Filament\\Forms\\Components\\TextInput",
                    "hint": "Le caractère à ajouter",
                    "live": {
                        "onBlur": true
                    }
                }
            },
            {
                "visibleOnEdit": {
                    "field": "Filament\\Forms\\Components\\RichEditor",
                    "label": "Editor",
                    "hint": "I'm only visible on edit !",
                    "visibleOn": "edit"
                }
            }
        ]
    },
    "Filament\\Forms\\Components\\Section": {
        "heading": "I'm a section from JSON !",
        "description": "I'm a description from JSON too !",
        "icon": "heroicon-m-shopping-bag",
        "aside": false,
        "collapsible": true,
        "schema": [
            {
                "textOnSection": {
                    "field": "Filament\\Forms\\Components\\TextInput",
                    "label": "Text on section",
                    "default": "I'm a text on a section !"
                }
            }
        ]
    }
}