Filament•6mo ago

How do Custom Components actually work? Can someone explain it to me?

Hi guys, I'm working on a custom component for the form of my "Video" resource. Problem: I get the following error: Undefined variable $record I started to create a custom layout via php artisan make:form-layout BunnyVideo . The Blade looks like this:

<div {{ $attributes }}>
    {{ $getChildComponentContainer() }}

    <div class="mt-6">
        <h2 class="text-xl font-bold">Video Preview</h2>
        <iframe src="https://iframe.mediadelivery.net/embed/249784/{$record->key}" width="640" height="360" allowfullscreen></iframe>
    </div>
</div>

<div {{ $attributes }}>
    {{ $getChildComponentContainer() }}

    <div class="mt-6">
        <h2 class="text-xl font-bold">Video Preview</h2>
        <iframe src="https://iframe.mediadelivery.net/embed/249784/{$record->key}" width="640" height="360" allowfullscreen></iframe>
    </div>
</div>

In addition I have this BunnyVideo Class:

class BunnyVideo extends Component
{
    protected string $view = 'forms.components.bunny-video';

    public function __construct(protected string|Closure|null $key)
    {
    }

    public static function make(string $key): static
    {
        logger()->info($key);
        return app(static::class, ['key' => $key]);
    }

    public function getKey(): ?string
    {
        return $this->key instanceof Closure ? ($this->key)() : $this->key;
    }
}

class BunnyVideo extends Component
{
    protected string $view = 'forms.components.bunny-video';

    public function __construct(protected string|Closure|null $key)
    {
    }

    public static function make(string $key): static
    {
        logger()->info($key);
        return app(static::class, ['key' => $key]);
    }

    public function getKey(): ?string
    {
        return $this->key instanceof Closure ? ($this->key)() : $this->key;
    }
}

I use the BunnyVideo component like this in the form function of the VideoResource: BunnyVideo::make('key'),

4 Replies

Dan-webplusm•6mo ago

May be need {{ ...}} on record, not only one {

<iframe src="https://iframe.mediadelivery.net/embed/249784/{{ $record->key }}" width="640" height="360" allowfullscreen></iframe>

awcodes•6mo ago

You need to use $getRecord()

Dan-webplusm•6mo ago

too, mdr 👍

DanielOP•6mo ago

Thank you guys!

Gaming

Programming

How do Custom Components actually work? Can someone explain it to me?