Filament•6mo ago

Livewire actions on form component layout

Hi, I'm creating a custom filament form component layout. I need to exec a function in the controller of the component but wire:click is not working for that. I create a public function called addPreset in my controller, and in the element I add a wire:click="addPreset". When I click it trows an error saying method not found.

Solution:

It's ok if you switch to using Event. protected function setUp(): void { parent::setUp();...

Jump to solution

6 Replies

jals65•6mo ago

Please, can someone help me? hi

Ngannv•6mo ago

https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component I think this might be what you need

Adding an action to a Livewire component - Actions - Filament

jals65•6mo ago

Yes, in that case the component is type Livewire\Component but to use it in the filament forms, it must be of type Filament\Forms\Components\Component i think is that the reason why the wire:click doesn't found the component public methods

Ngannv•6mo ago

Can you share your code?

jals65•6mo ago

Controller:

<?php

namespace App\Forms\Components;

use App\Forms\Components\Traits\HasOptionsColors;
use Closure;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\Concerns\CanDisableOptions;
use Filament\Forms\Components\Concerns\HasExtraInputAttributes;
use Filament\Forms\Components\Concerns\HasName;
use Filament\Forms\Components\Concerns\HasOptions;
use Filament\Forms\Components\Contracts\CanConcealComponents;
use Filament\Support\Concerns\HasExtraAlpineAttributes;
use Illuminate\Contracts\Support\Htmlable;

class ProgressBarSection extends Component implements CanConcealComponents
{
    use CanDisableOptions;
    use HasOptions;
    use HasOptionsColors;
    use HasExtraInputAttributes;
    use HasExtraAlpineAttributes;
    use HasName;

    protected string $view = 'forms.components.progress-bar-section';

    protected string|Htmlable|Closure|null $description = null;

    protected string|Htmlable|Closure $heading;

    final public function __construct(string|Htmlable|Closure $name, string|Htmlable|Closure $heading)
    {
        $this->heading($heading);
        $this->name($name);
    }

    public static function make(string|Htmlable|Closure $name, string|Htmlable|Closure $heading): static
    {
        $static = app(static::class, ['name' => $name, 'heading' => $heading]);
        $static->configure();

        return $static;
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->columnSpan('full');
    }

    public function addBar(): void
    {
        return;
    }
}

<?php

namespace App\Forms\Components;

use App\Forms\Components\Traits\HasOptionsColors;
use Closure;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\Concerns\CanDisableOptions;
use Filament\Forms\Components\Concerns\HasExtraInputAttributes;
use Filament\Forms\Components\Concerns\HasName;
use Filament\Forms\Components\Concerns\HasOptions;
use Filament\Forms\Components\Contracts\CanConcealComponents;
use Filament\Support\Concerns\HasExtraAlpineAttributes;
use Illuminate\Contracts\Support\Htmlable;

class ProgressBarSection extends Component implements CanConcealComponents
{
    use CanDisableOptions;
    use HasOptions;
    use HasOptionsColors;
    use HasExtraInputAttributes;
    use HasExtraAlpineAttributes;
    use HasName;

    protected string $view = 'forms.components.progress-bar-section';

    protected string|Htmlable|Closure|null $description = null;

    protected string|Htmlable|Closure $heading;

    final public function __construct(string|Htmlable|Closure $name, string|Htmlable|Closure $heading)
    {
        $this->heading($heading);
        $this->name($name);
    }

    public static function make(string|Htmlable|Closure $name, string|Htmlable|Closure $heading): static
    {
        $static = app(static::class, ['name' => $name, 'heading' => $heading]);
        $static->configure();

        return $static;
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->columnSpan('full');
    }

    public function addBar(): void
    {
        return;
    }
}

Blade view:

<div>
   <button wire:click="addBar">Test</button>
</div>

<div>
   <button wire:click="addBar">Test</button>
</div>

The error that trows when I click de button is that can't found public method addBar.

Solution

Ngannv•6mo ago

It's ok if you switch to using Event. protected function setUp(): void { parent::setUp(); $this->registerListeners([ 'ProgressBarSection::addBar' => [ function ($component, $customValue) { // Your code here Notification::make()->title("You just called ProgressBarSection::addBar ")->send(); }, ], ]); $this->columnSpan('full'); } Blade view: <div> <button type="button" wire:click="dispatchFormEvent('ProgressBarSection::addBar', '{{ $getStatePath() }}', 'extra value')" >Click test demo Event </button> </div>

Gaming

Programming

Livewire actions on form component layout