Filament•16mo ago

Creating a new new field type that uses multiple existing components (Toggle and Date Picker)

Hi, pretty new to Filament but I'm looking into building a new plugin which allows a published_at field to be added in. Essentially what I'd like to achieve is a simple on/off toggle which when toggled on, shows a date field with the default being now but the ability to change it. My original plan was to try and add a toggle field and date picker field into the same field component and use alpine to toggle the fields. I can't find any examples of being able to import components outside of a few simple ones like buttons into my template file. I'm finding myself copying the template files for both the toggle and datepicker components since I can't get them to instantiate properly on their own. Copy and pasting of template files into my new component feels a little gross to me so I'm wondering if I am missing something. I did try this to get the toggle in but Laravel didn't like that (see attached screenshot).

<x-filament-forms::toggle
    :getFieldWrapperView="$getFieldWrapperView"
    field="published_at"
    :getOffColor="$getOffColor"
    :getOnColor="$getOnColor"
    :getStatePath="$getStatePath"
    :isInline="$isInline"
    :applyStateModifiers="true"
    :applyStateBindingModifiers="$applyStateBindingModifiers"
    :isAutofocused="$isAutofocused"
    :isDisabled="$isDisabled"
    :getId="$getId"
    :getExtraAttributes="$getExtraAttributes"
    :getExtraAlpineAttributes="$getExtraAlpineAttributes"
    ></x-filament-forms::toggle>

<x-filament-forms::toggle
    :getFieldWrapperView="$getFieldWrapperView"
    field="published_at"
    :getOffColor="$getOffColor"
    :getOnColor="$getOnColor"
    :getStatePath="$getStatePath"
    :isInline="$isInline"
    :applyStateModifiers="true"
    :applyStateBindingModifiers="$applyStateBindingModifiers"
    :isAutofocused="$isAutofocused"
    :isDisabled="$isDisabled"
    :getId="$getId"
    :getExtraAttributes="$getExtraAttributes"
    :getExtraAlpineAttributes="$getExtraAlpineAttributes"
    ></x-filament-forms::toggle>

Solution:

what you need is similar to this in the docs https://filamentphp.com/docs/3.x/forms/advanced#dependant-select-options

Advanced forms - Form Builder - Filament

Jump to solution

5 Replies

krekas•16mo ago

i think you are overengineering. you should have two inputs. one is toggle other is text. toggle should be live() and for text just using $get() check toggles state and according to state set date

jaymehsOP•16mo ago

Got it, the above is me trying to use the existing toggle component within filament and I was just passing data it needed to instantiate itself. Thanks for the assistance. I'm still figuring out what the difference between alpine, blade components and livewire are at the moment, perhaps I'll scale it back a bit and just get a basic prototype working 🙂

krekas•16mo ago

then you first need to learn laravel and livewire at least

Solution

krekas•16mo ago

what you need is similar to this in the docs https://filamentphp.com/docs/3.x/forms/advanced#dependant-select-options

Advanced forms - Form Builder - Filament

jaymehsOP•16mo ago

Makes sense, What I'd ideally like to do is expose it as a plugin, not sure if the above workflow would be able to work the same. My endgoal would be something like:

use Jaymeh\FilamentPublishable\FilamentPublishable;

FilamentPublishable::make('published_at')
    ->label(__('Published'))
    ->default(null),

use Jaymeh\FilamentPublishable\FilamentPublishable;

FilamentPublishable::make('published_at')
    ->label(__('Published'))
    ->default(null),

Gaming

Programming

Creating a new new field type that uses multiple existing components (Toggle and Date Picker)