Skip to main content
You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.Looking for the current stable version? Visit the 5.x documentation.
Before proceeding, make sure filament/infolists is installed in your project. You can check by running:
composer show filament/infolists
If it’s not installed, consult the installation guide and configure the individual components according to the instructions.

​
Setting up the Livewire component

First, generate a new Livewire component: 
php artisan make:livewire ViewProduct
Then, render your Livewire component on the page: 
@livewire('view-product')
Alternatively, you can use a full-page Livewire component: 
use App\Livewire\ViewProduct;
use Illuminate\Support\Facades\Route;

Route::get('products/{product}', ViewProduct::class);
You must use the InteractsWithSchemas trait, and implement the HasSchemas interface on your Livewire component class: 
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;

class ViewProduct extends Component implements HasSchemas
{
    use InteractsWithSchemas;

    // ...
}

​
Adding the infolist

Next, add a method to the Livewire component which accepts an $infolist object, modifies it, and returns it: 
use Filament\Schemas\Schema;

public function productInfolist(Schema $schema): Schema
{
    return $schema
        ->record($this->product)
        ->components([
            // ...
        ]);
}
Finally, render the infolist in the Livewire component’s view: 
{{ $this->productInfolist }}
filament/infolists also includes the following packages:
  • filament/actions
  • filament/schemas
  • filament/support
These packages allow you to use their components within Livewire components. For example, if your infolist uses Actions, remember to implement the HasActions interface and use the InteractsWithActions trait on your Livewire component class.If you are using any other Filament components in your infolist, make sure to install and integrate the corresponding package as well.

​
Passing data to the infolist

You can pass data to the infolist in two ways: Either pass an Eloquent model instance to the record() method of the infolist, to automatically map all the model attributes and relationships to the entries in the infolist’s schema: 
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;

public function productInfolist(Schema $schema): Schema
{
    return $schema
        ->record($this->product)
        ->components([
            TextEntry::make('name'),
            TextEntry::make('category.name'),
            // ...
        ]);
}
Alternatively, you can pass an array of data to the state() method of the infolist, to manually map the data to the entries in the infolist’s schema: 
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;

public function productInfolist(Schema $schema): Schema
{
    return $schema
        ->constantState([
            'name' => 'MacBook Pro',
            'category' => [
                'name' => 'Laptops',
            ],
            // ...
        ])
        ->components([
            TextEntry::make('name'),
            TextEntry::make('category.name'),
            // ...
        ]);
}
Edit this page on GitHub

Sponsored by

KirschbaumBaiz.aiSerpApiAgiledropMailtrapCMS Max