Filament•5mo ago

Custom form field detailed docs/material?

I have been trying to make a custom form field but I am just not sure how to go about it. I know how to make Livewire components, but how will the Livewire component link with the Model in the Filament resource. It has me confused.

11 Replies

toeknee•5mo ago

a field has nothing to do with a model? You build a custom field and use it as all form fields are used? https://filamentphp.com/docs/3.x/forms/fields/custom

Custom fields - Form Builder - Filament

MZXOP•5mo ago

A field's value is stored to a property of the model which the resource belongs to no?

toeknee•5mo ago

No, a fields value is stored to the model via the name of the custom field which is set in the ::make('field_name')

MZXOP•5mo ago

For example, Forms\Components\TextInput::make('name') ->required(), over here the text is being saved to 'name' of the Product (model)

toeknee•5mo ago

That's how we have TexTInput::make('my_model_column') Correct And with a custom field you still use make and use name

MZXOP•5mo ago

Yes I get that, but just unable to figure out how I bind it properly. What I am trying to do it basically I have hard coded an array, which contains properties, which can be checked. I want to be able to view those properties to the user who can then click on the one he wants. And for that response to be saved along with the hard coded array.

toeknee•5mo ago

Theres no need too, it should be bound as part of the Make method of extending the field Then you get it as $this->name or $this->statePath ?

MZXOP•5mo ago

Oh okay I will give it a shot Basically I am just unable to wrap my head around how the component would process a JSON Like yeah okay for a simple text input, its this <input type='text' x-model="state" /> But I have a JSON of properties with true and false so i guess i just put it all in the input?

toeknee•5mo ago

Yeah I'd say so

MZXOP•5mo ago

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{
            state: $wire.$entangle('{{ $getStatePath() }}'),
            options: ['Option 1', 'Option 2', 'Option 3'] // Replace these with your actual options
        }">

        <template x-for="(option, index) in options" :key="index">
            <label>
                <input
                    type="checkbox"
                    :value="option"
                    x-model="state"
                />
                <span x-text="option"></span>
            </label>
        </template>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('checkboxField', () => ({
                state: [],
                options: []
            }))
        })
    </script>

</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{
            state: $wire.$entangle('{{ $getStatePath() }}'),
            options: ['Option 1', 'Option 2', 'Option 3'] // Replace these with your actual options
        }">

        <template x-for="(option, index) in options" :key="index">
            <label>
                <input
                    type="checkbox"
                    :value="option"
                    x-model="state"
                />
                <span x-text="option"></span>
            </label>
        </template>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('checkboxField', () => ({
                state: [],
                options: []
            }))
        })
    </script>

</x-dynamic-component>

Over here, the checkboxes are bound to one state model hence checking one checks all of them. But I don't want that, I want the data to be stored as an array of boolean. How do I do that?

toeknee•5mo ago

Look at how the original checkbox does it, it usually states the options differently

Gaming

Programming

Custom form field detailed docs/material?