Filament•10mo ago

Field plugin depending on other field

I'm currently working on a plugin for a SelectTree, and I wanted to check if it could rely on other fields, but it seems to vanish.

7 Replies

BlackShadow•10mo ago

Patrick Boivin•10mo ago

Can you share your form code, to show how the two fields are interacting?

BlackShadow•10mo ago

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->live()
                    ->maxLength(255),

                SelectTree::make('category_id')
                    ->hidden(fn($get) => empty($get('name')))
                    ->label(__('Category'))
                    ->tree(Category::class, 'category_id', 'name')
                    ->disabledBranchNode()
                    ->withCount(),
            ]);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->live()
                    ->maxLength(255),

                SelectTree::make('category_id')
                    ->hidden(fn($get) => empty($get('name')))
                    ->label(__('Category'))
                    ->tree(Category::class, 'category_id', 'name')
                    ->disabledBranchNode()
                    ->withCount(),
            ]);
    }

I have been talking with Awcodes and it seems like i need to use Alpine to load the scripts

<div
        x-data
        x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('tree', package: 'codewithdennis/filament-select-tree'))]"
        x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('tree', package: 'codewithdennis/filament-select-tree'))]"
    >
        <div id="tree" wire:ignore></div>
    </div>

<script>
            window.addEventListener('load', () => {
                const tree = new Treeselect({
            ... lots more
</script>

<div
        x-data
        x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('tree', package: 'codewithdennis/filament-select-tree'))]"
        x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('tree', package: 'codewithdennis/filament-select-tree'))]"
    >
        <div id="tree" wire:ignore></div>
    </div>

<script>
            window.addEventListener('load', () => {
                const tree = new Treeselect({
            ... lots more
</script>

But not sure how its done or if possible at all. When i replace <div id="tree" wire:ignore></div> with blabla it renders perfectly, so the it seems the javascript is not getting called properly.

awcodes•10mo ago

I’ll have a PR for you shortly.

BlackShadow•10mo ago

Thanks! Im gonna take a look soon

awcodes•10mo ago

I didn't test it, but should be enough to get you on the right track.

BlackShadow•10mo ago

Ah oke, lets hope i can figure it out👀 All resolved ✅

Gaming

Programming

Field plugin depending on other field