Filament•17mo ago

How to pass custom data to view from Custom Field?

I have a custom field called Checklist. In a loop, I am passing the $record to a custom method called device, and a checklist_id from a pivot table 'checklist_device' to a method called list.

Checklist::make('items')
    ->device($record)
    ->list($list->pivot->checklist_id)

Checklist::make('items')
    ->device($record)
    ->list($list->pivot->checklist_id)

This is to render specific json items from this pivot table in a field called 'items'. This is my custom field class:

class Checklist extends Field
{
    protected string $view = 'forms.components.checklist';

    protected int $list;
    protected Model $device;

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

    public function list(int $list): static
    {
        $this->list = $list;

        return $this;
    }

    public function getList(): int
    {
        return $this->list;
    }

    public function device($device)
    {
        $this->device = $device;

        return $this;
    }

    public function getDevice()
    {
        return $this->device;
    }



    public function render(): View
    {
        $checklistItems = $this->getDevice()
            ->checklists()
            ->where('checklist_id', $this->getList())
            ->first()
            ->pivot
            ->items;

        return view(
            $this->getView(),
            array_merge(
                ['attributes' => new ComponentAttributeBag()],
                $this->extractPublicProperties(),
                $this->extractPublicMethods(),
                isset($this->viewIdentifier) ? [$this->viewIdentifier => $this] : [],
                $checklistItems
            ),
        );
    }
}

class Checklist extends Field
{
    protected string $view = 'forms.components.checklist';

    protected int $list;
    protected Model $device;

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

    public function list(int $list): static
    {
        $this->list = $list;

        return $this;
    }

    public function getList(): int
    {
        return $this->list;
    }

    public function device($device)
    {
        $this->device = $device;

        return $this;
    }

    public function getDevice()
    {
        return $this->device;
    }



    public function render(): View
    {
        $checklistItems = $this->getDevice()
            ->checklists()
            ->where('checklist_id', $this->getList())
            ->first()
            ->pivot
            ->items;

        return view(
            $this->getView(),
            array_merge(
                ['attributes' => new ComponentAttributeBag()],
                $this->extractPublicProperties(),
                $this->extractPublicMethods(),
                isset($this->viewIdentifier) ? [$this->viewIdentifier => $this] : [],
                $checklistItems
            ),
        );
    }
}

I guess what I'm failing to understand is how to bypass that 'make' function and in my view, have custom data from the render method instead, as you can see $checklistItems is currently not doing anything.

2 Replies

Josh777OP•17mo ago

FYI, this is the basis of my view

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :id="$getId()"
    {{--:label="$getLabel()"--}}
    :label-sr-only="$isLabelHidden()"
    :helper-text="$getHelperText()"
    :hint="$getHint()"
    :hint-action="$getHintAction()"
    :hint-color="$getHintColor()"
    :hint-icon="$getHintIcon()"
    :required="$isRequired()"
    :state-path="$getStatePath()"
>
    <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }">
        <div x-data="{ toggled: false }" class='flex flex-col space-y-4'>
            <h1 class="font-bold">{{ $getLabel() }}</h1>
            <template x-for="(item, index) in state">
etc...

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :id="$getId()"
    {{--:label="$getLabel()"--}}
    :label-sr-only="$isLabelHidden()"
    :helper-text="$getHelperText()"
    :hint="$getHint()"
    :hint-action="$getHintAction()"
    :hint-color="$getHintColor()"
    :hint-icon="$getHintIcon()"
    :required="$isRequired()"
    :state-path="$getStatePath()"
>
    <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }">
        <div x-data="{ toggled: false }" class='flex flex-col space-y-4'>
            <h1 class="font-bold">{{ $getLabel() }}</h1>
            <template x-for="(item, index) in state">
etc...

And this works perfectly when rendering for example a json field on my Device model. I need this to also grab data from a specific pivot model. Bump

Patrick Boivin•17mo ago

I'm sorry, what is the question exactly? It looks like you have already figured out how to pass variables to your view?

Gaming

Programming

How to pass custom data to view from Custom Field?