Filament•4w ago

Custom Field: Using Form Components

As the title says, i want make use of filament components like a select, inside my custom filament field, how can i achieve that? i tried using HasForm Contract , and InteractsWithForm but it wasn't successful. any suggestions?

5 Replies

toeknee•4w ago

If it's a custom field, just extend the original and add whatever custom logic you are using.

loading_personalityOP•4w ago

i need to have a something like a form, and use a combination of filament form components. i've succeeded at making what i want, but i'm not sure if it's the right approach.

php 

protected ?ComponentContainer $childComponentContainer = null;

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

public function getChildComponents(): array
{
    if (!$this->childComponentContainer) {
        $this->childComponentContainer = ComponentContainer::make($this->getLivewire())
            ->components($this->getFormSchema());
    }

    return $this->childComponentContainer->getComponents();
}

protected function getFormSchema(): array
{
    return [
        Select::make('type')
            ->options([
                'option1' => 'Option 1',
                'option2' => 'Option 2',
            ])
            ->live()
            ->required()
            ->afterStateUpdated(function () {
                logger()->debug('iiiiii');
            }),

        TextInput::make('value')
            ->required()
            ->maxLength(255),
    ];
}

php 

protected ?ComponentContainer $childComponentContainer = null;

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

public function getChildComponents(): array
{
    if (!$this->childComponentContainer) {
        $this->childComponentContainer = ComponentContainer::make($this->getLivewire())
            ->components($this->getFormSchema());
    }

    return $this->childComponentContainer->getComponents();
}

protected function getFormSchema(): array
{
    return [
        Select::make('type')
            ->options([
                'option1' => 'Option 1',
                'option2' => 'Option 2',
            ])
            ->live()
            ->required()
            ->afterStateUpdated(function () {
                logger()->debug('iiiiii');
            }),

        TextInput::make('value')
            ->required()
            ->maxLength(255),
    ];
}

and in the field view:

<div>
    @foreach($getChildComponents() as $component)
        {{ $component->render() }}
    @endforeach
</div>

<div>
    @foreach($getChildComponents() as $component)
        {{ $component->render() }}
    @endforeach
</div>

LeandroFerreira•4w ago

why would you like to add a field inside custom field?

loading_personalityOP•4w ago

i'm making an invoice page, and in the section where the user should add products i want it to be something like in this image below. I thought that the default filament repeater wouldn't do it, so i thought of making it a field, since i'll be using it also for quotes, invoices etc. any better suggestions, i may be taking a wrong path here

LeandroFerreira•4w ago

maybe table repeater? https://filamentphp.com/plugins/icetalker-table-repeater

Filament

Table Repeater by Martin Hwang - Filament

Filament Repeater display in table layout.

Gaming

Programming

Custom Field: Using Form Components