Filament•10mo ago

passing data to infolist action

hey friends 👋🏽, i want to use filament to display repeatable data, like in some kind of accordion. i use the infolist builder, passing my data via state(). now my data includes details that i want to show inside a modal. i want to trigger the modal from within the section body, not the header. my idea is as follows:

public function fooInfolist(Infolist $infolist): Infolist
{
    return $infolist
        ->state($this->foo)
        ->schema([
            RepeatableEntry::make('foo')
                ->schema([
                    Section::make('name')
                        ->collapsible()
                        ->schema([
                            TextEntry::make('name'),
                            ViewEntry::make('bar')
                                ->view('bar')
                                ->registerActions([
                                    Action::make('showDetails')
                                        ->modalContent(view('bar-details'))
                                        ->infolist([
                                            Tabs::make('Tabs')
                                                ->tabs([
                                                    Tab::make('Tab 1')
                                                        ->schema([
                                                            TextEntry::make('bar.name')
                                                        ]),
                                                ])
                                        ])
                                ]),
                        ])
                ])
        ]);
}

public function fooInfolist(Infolist $infolist): Infolist
{
    return $infolist
        ->state($this->foo)
        ->schema([
            RepeatableEntry::make('foo')
                ->schema([
                    Section::make('name')
                        ->collapsible()
                        ->schema([
                            TextEntry::make('name'),
                            ViewEntry::make('bar')
                                ->view('bar')
                                ->registerActions([
                                    Action::make('showDetails')
                                        ->modalContent(view('bar-details'))
                                        ->infolist([
                                            Tabs::make('Tabs')
                                                ->tabs([
                                                    Tab::make('Tab 1')
                                                        ->schema([
                                                            TextEntry::make('bar.name')
                                                        ]),
                                                ])
                                        ])
                                ]),
                        ])
                ])
        ]);
}

the setup works fine. i have multiple cards and i can open the modal. my problem is, that i'm not able to pass the data (here bar) inside the modal. i have two ideas, either create a custom view bar-details.blade or, even better, use another infolist builder inside the modal. do you folks have any idea? or maybe even a completely different approach?

1 Reply

maltebaerOP•10mo ago

another idea i had was to add another state to the Action, but this is not implemented. i found a solution! on my component i added

public function viewAction(): Action
{
    return Action::make('view')
        ->modalContent(fn (array $arguments) => view('foo', ['arguments' => $arguments]));
}

public function viewAction(): Action
{
    return Action::make('view')
        ->modalContent(fn (array $arguments) => view('foo', ['arguments' => $arguments]));
}

inside the schema of my section

ViewEntry::make('bar')
    ->view('bar')

ViewEntry::make('bar')
    ->view('bar')

and inside the blade file

<div>
    {{ ($this->viewAction)(['details' => $getState()]) }}
</div>

<div>
    {{ ($this->viewAction)(['details' => $getState()]) }}
</div>

now in my foo.blade i have access to the data bar of the respective foo entry. hope it can help someone else!

Gaming

Programming

passing data to infolist action