Custom field Open Modal Form

I create a custom field

class FeaturedImage extends Field
{
    protected string $view = 'forms.components.featured-image';

    public function editAction(): Action
    {
        return Action::make('updateAuthor')
            ->form([
                Select::make('authorId')
                    ->label('Author')
                    ->options(User::query()->pluck('name', 'id'))
                    ->required(),
            ])
            ->action(function (array $data): void {
            });
    }
}

class FeaturedImage extends Field
{
    protected string $view = 'forms.components.featured-image';

    public function editAction(): Action
    {
        return Action::make('updateAuthor')
            ->form([
                Select::make('authorId')
                    ->label('Author')
                    ->options(User::query()->pluck('name', 'id'))
                    ->required(),
            ])
            ->action(function (array $data): void {
            });
    }
}

` Button render correct but modal not open? I use this button on a form

6 Replies

Dennis Koch•12mo ago

It's hard to tell since you didn't provide your blade code. Also check for console errors.

giro•12mo ago

My field code is very simple.

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }">
        <!-- Interact with the `state` property in Alpine.js -->

        {{$editAction()}}
    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }">
        <!-- Interact with the `state` property in Alpine.js -->

        {{$editAction()}}
    </div>
</x-dynamic-component>

No error from browser console.

Dennis Koch•12mo ago

Ah you are using the new actions. Not sure whether that's supported in fields. They are no LW components.

giro•12mo ago

Ok, what is best to have a field that I can reuse and have a button that open a modal. A view, and a LW component?

Dennis Koch•12mo ago

I am not 100% sure. Instead of a field you could just use class with a static method, that returns a field. You can use the Actions form field an put a action in there.

giro•12mo ago

OK, thanks I create a filament page for testing, and create a LW component like this:

namespace App\Livewire;

use Livewire\Component;

use App\Models\User;
use Filament\Forms\Components\Select;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;

class FeaturedImageLW extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

    public function render()
    {
        return view('livewire.featured-image-l-w');
    }

    public function editAction(): Action
    {
        return Action::make('updateAuthor')
            ->form([
                Select::make('authorId')
                    ->label('Author')
                    ->options(User::query()->pluck('name', 'id'))
                    ->required(),
            ])
            ->action(function (array $data): void {
            });
    }
}

namespace App\Livewire;

use Livewire\Component;

use App\Models\User;
use Filament\Forms\Components\Select;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;

class FeaturedImageLW extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

    public function render()
    {
        return view('livewire.featured-image-l-w');
    }

    public function editAction(): Action
    {
        return Action::make('updateAuthor')
            ->form([
                Select::make('authorId')
                    ->label('Author')
                    ->options(User::query()->pluck('name', 'id'))
                    ->required(),
            ])
            ->action(function (array $data): void {
            });
    }
}



and this blade render LW component
```<div>
    {{$this->editAction}}
    <x-filament-actions::modals />
</div>```

Button is rendered but modal not open.
Browser console say:

(el2) => {
        if (isntElement(el2))
          return;
        return el2.hasAttribute(

wire:key) ? el2.getAttribute(wire:key) : el2.hasAttribute(wire:id) ? el2.getAttribute(wire:id`) : el2… Thanks

Gaming

Programming

Custom field Open Modal Form