F
Filament•4d ago
Avi

Display Cards under Select

Within a Wizard I'm trying to display the selected items in a custom card but I keep getting Typed property Filament\Forms\Components\Component::$container must not be accessed before initialization, how do I solve this? This is Laravel 12 with Filament 3.x. My code is too long to include in this message I can share it in the comments.
11 Replies
Dennis Koch
Dennis Koch•4d ago
Share the relevant code. Select and the "card"
Avi
AviOP•3d ago
This is the step within the Wizard

message.txt

Avi
AviOP•3d ago
this is the card 
<?php

class ContactCard extends Field
{
    protected string $view = 'filament.forms.components.contact-card';

    public static function make(string $name): static
    {
        return (new static($name))
            ->schema([
                Hidden::make("{$name}_id"),
                Grid::make(1)
                    ->schema([
                        TextInput::make("{$name}_first_name")
                            ->label('First Name')
                            ->disabled(),
                        TextInput::make("{$name}_last_name")
                            ->label('Last Name')
                            ->disabled(),
                        TextInput::make("{$name}_email")
                            ->label('Email')
                            ->disabled(),
                        TextInput::make("{$name}_phone")
                            ->label('Phone')
                            ->disabled(),
                    ]),
                Actions::make([
                    Action::make('view')
                        ->label('View')
                        ->url(fn ($get) => route('filament.admin.resources.contacts.edit', ['record' => $get("{$name}_id")]))
                        ->openUrlInNewTab()
                        ->color('warning'),
                    Action::make('remove')
                        ->label('')
                        ->icon('heroicon-o-x-mark')
                        ->color('danger')
                        ->action(fn ($get, $set) => $set($name, null)),
                ])->alignment(Alignment::Right),
            ])
            ->columnSpanFull()
            ->extraAttributes([
                'class' => 'bg-white rounded-lg shadow-sm border border-gray-200 p-4',
            ]);
    }
} 
<?php

class ContactCard extends Field
{
    protected string $view = 'filament.forms.components.contact-card';

    public static function make(string $name): static
    {
        return (new static($name))
            ->schema([
                Hidden::make("{$name}_id"),
                Grid::make(1)
                    ->schema([
                        TextInput::make("{$name}_first_name")
                            ->label('First Name')
                            ->disabled(),
                        TextInput::make("{$name}_last_name")
                            ->label('Last Name')
                            ->disabled(),
                        TextInput::make("{$name}_email")
                            ->label('Email')
                            ->disabled(),
                        TextInput::make("{$name}_phone")
                            ->label('Phone')
                            ->disabled(),
                    ]),
                Actions::make([
                    Action::make('view')
                        ->label('View')
                        ->url(fn ($get) => route('filament.admin.resources.contacts.edit', ['record' => $get("{$name}_id")]))
                        ->openUrlInNewTab()
                        ->color('warning'),
                    Action::make('remove')
                        ->label('')
                        ->icon('heroicon-o-x-mark')
                        ->color('danger')
                        ->action(fn ($get, $set) => $set($name, null)),
                ])->alignment(Alignment::Right),
            ])
            ->columnSpanFull()
            ->extraAttributes([
                'class' => 'bg-white rounded-lg shadow-sm border border-gray-200 p-4',
            ]);
    }
}
the imports are there but I took them out of this message because of the character limit
Dennis Koch
Dennis Koch•3d ago
I guess this part could be the issue: ->schema(function ($get) { Could you test, whether 1 static card does work?
Avi
AviOP•3d ago
static card with dummy data or what? the idea is that when a user selects an Employee, the selected employee(s) appear in cards. I thought I would be able to set some sort of state so every time an employee is selected it gets pushed into an array and as long as they array is populated, we can map over it and display a card per employee.
Dennis Koch
Dennis Koch•3d ago
Static card like: 
ContactCard::make("employee_1")
    ->state([
        "employee_1_id" => $employee->id,
        "employee_1_first_name" => $employee->first_name,
        "employee_1_last_name" => $employee->last_name,
        "employee_1_email" => $employee->email,
        "employee_1_phone" => $employee->phone,
    ])
ContactCard::make("employee_1")
    ->state([
        "employee_1_id" => $employee->id,
        "employee_1_first_name" => $employee->first_name,
        "employee_1_last_name" => $employee->last_name,
        "employee_1_email" => $employee->email,
        "employee_1_phone" => $employee->phone,
    ])
Avi
AviOP•3d ago
(also, thank you so much for your time/help)
Dennis Koch
Dennis Koch•3d ago
Just trying to simplify the problem to find the source of the issue
Avi
AviOP•3d ago
a static card throws the same error: 
Typed property Filament\Forms\Components\Component::$container must not be accessed before initialization
Typed property Filament\Forms\Components\Component::$container must not be accessed before initialization
the error points to the ->state() line I must be missing something fundamental but I don't know what I don't know and am not sure how to look it up
Dennis Koch
Dennis Koch•3d ago
Ah makes sense. I don't think you can set the state before the component is initialised I'd probably refactor this into a single ViewField that just uses $get('selected_employees'), runs the DB query and loops over them. I don't think state() should be called from user land You could try replacing ->state() with ->getStateUsing(fn () => )
Avi
AviOP•2d ago
the context is there is an Account and now we're adding Employees to the account. When selecting an employee to be added, we want to display the cards. So when viewing in edit mode, we could have the ViewField query and iterate. But when adding in real time, we just want to use local state because the employees aren't really added to the account until the user clicks "save" on this step of the wizard. I ended up using a Placeholder component with custom HTML rendered for each item in the list, ditching the idea of using a component for each item. This seems to be working!

Did you find this page helpful?