Filament•7mo ago

Multi field FieldComponent

I am trying to find out if it is possible to create a custom field / livewire component that actually controls several database fields in a filament form. For example a google maps integration where you can define the latitude and longitude database columns. Something like this:

GoogleMapsField::make('')
->setStatePathLatitude('latitude')
->setStatePathLongitude('longitude)

GoogleMapsField::make('')
->setStatePathLatitude('latitude')
->setStatePathLongitude('longitude)

All implementations (including the existing google maps plugin) use tricks to overcome this (like getter and setter attributes on the model, or have traits on the editRecord/createRecord page). But I was wondering if it is possible to create a component that interacts with a form and can set several "statePaths". If I read the document of a field, there it is clearly stated that a field is bound to one public property, so my guess is that it is not possible, but just checking. Thanks in advance kind regards Andries

10 Replies

Tally•7mo ago

Hi Andries, Most times I see components use a json/array field in the database to store the multiple values check out these examples for inspiration: https://github.com/arbermustafa/filament-locationpickr-field and https://github.com/cheesegrits/filament-google-maps

GitHub

GitHub - arbermustafa/filament-locationpickr-field: Filament Locati...

Filament LocationPickr Field. Contribute to arbermustafa/filament-locationpickr-field development by creating an account on GitHub.

GitHub

GitHub - cheesegrits/filament-google-maps: Google Maps package for ...

Google Maps package for Filament PHP. Contribute to cheesegrits/filament-google-maps development by creating an account on GitHub.

andriesOP•7mo ago

hi Tally, that is indeed what I found, but we would like to do this differently, as we need to search on certain fields in the database (and I think that it is faster to search on a number field then on a JSON field)

Tally•7mo ago

you could fill some hidden fields with the data so they are stored in a seperate column in the table

Tally•7mo ago

https://filamentphp.com/docs/3.x/forms/advanced#field-updates

Advanced forms - Form Builder - Filament

andriesOP•7mo ago

yes but what kind of component would that be? First I thought I could make a Group component, and add multiple fields to it that are hidden. But I don't see any way in extending a FieldComponent and actually add other hidden fields. so now I am looking into extending a Component, but I don't see how to interact with the state of the form

Tally•7mo ago

Are you planning to make a package or is it only for your project?

Tally•7mo ago

In the project I would use a TextInput so you can see the values... after it works change it to a Hidden field https://filamentphp.com/docs/3.x/forms/fields/hidden

Hidden - Form Builder - Filament

andriesOP•7mo ago

package but I found a way I overwrite the dehydrateState() method

 public function dehydrateState(array &$state, bool $isDehydrated = true): void
    {
        $stateToDeHydrate = $this->getStateToDehydrate()[$this->getStatePath()];
        foreach ($stateToDeHydrate as $key => $value) {
            Arr::set($state[$this->getContainer()->getStatePath()], $key, $value);
        }
    }

 public function dehydrateState(array &$state, bool $isDehydrated = true): void
    {
        $stateToDeHydrate = $this->getStateToDehydrate()[$this->getStatePath()];
        foreach ($stateToDeHydrate as $key => $value) {
            Arr::set($state[$this->getContainer()->getStatePath()], $key, $value);
        }
    }

not sure though how dangerous this is... 🙂 and this is the blade part:

data = {};
data[config.fieldLat] = lat;
data[config.fieldLng] = lng;
// save it to the backend
$wire.set(config.statePath, data)

data = {};
data[config.fieldLat] = lat;
data[config.fieldLng] = lng;
// save it to the backend
$wire.set(config.statePath, data)

I could probably add some checks in the foreach loop to check if the key is actually the fieldname... but besides that it all seems functional. If you have any feedback, please feel free

Tally•7mo ago

looks legit maybe ask specific info in the plugin-development-chat if this is the way to go... but I think it will work

andriesOP•7mo ago

thx, I will

Gaming

Programming

Multi field FieldComponent