Calling method in custom field type

I'm trying to create a new custom form field and I'm wondering if there's a way to call a method from the component class.

For example, if I have the following form field

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <button wire:click="doSomething">Click me!</button>
    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <button wire:click="doSomething">Click me!</button>
    </div>
</x-dynamic-component>

and the class

class MyCustomComponent extends Field
{
    public function doSomething() {
        // Nothing useful
    }
}

class MyCustomComponent extends Field
{
    public function doSomething() {
        // Nothing useful
    }
}

I get the following error

Unable to call component method. Public method [doSomething] not found on component

Unable to call component method. Public method [doSomething] not found on component

The method obviously exists, but I think it's because the dynamic component doesn't really know where to look. Ss there a way to call the custom

doSomething()

doSomething()

function in a dynamic component?

Solution

Form components aren't Livewire components, therefore your method cannot live in the custom field class.

You have two options:

1. Add the method to the page (ListRecords, ViewRecord, CreateRecord, EditRecord)
2. Use events instead of methods. See how its done in https://github.com/search?q=repo%3Asaade%2Ffilament-adjacency-list%20builder%3A%3Asort&type=code

Jump to solution

Filament•3y ago•

6 replies

ChesterS

Calling method in custom field type

I'm trying to create a new custom form field and I'm wondering if there's a way to call a method from the component class.

For example, if I have the following form field

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <button wire:click="doSomething">Click me!</button>
    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <button wire:click="doSomething">Click me!</button>
    </div>
</x-dynamic-component>

and the class

class MyCustomComponent extends Field
{
    public function doSomething() {
        // Nothing useful
    }
}

class MyCustomComponent extends Field
{
    public function doSomething() {
        // Nothing useful
    }
}

I get the following error

Unable to call component method. Public method [doSomething] not found on component

Unable to call component method. Public method [doSomething] not found on component

The method obviously exists, but I think it's because the dynamic component doesn't really know where to look. Ss there a way to call the custom

doSomething()

doSomething()

function in a dynamic component?

Solution

Jump to solution

Calling method in custom field type

Calling method in custom field type

Similar Threads

Similar Threads

Similar Threads