Custom component render filament

i have a list page with this actions button


namespace App\Filament\Resources\ScreeningResource\Pages;

use App\Filament\Resources\ScreeningResource;
use Filament\Actions;
use Filament\Resources\Pages\ListRecords;

class ListScreenings extends ListRecords
{
    protected static string $resource = ScreeningResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\Action::make('Add Screening')
                ->icon('heroicon-s-plus')
                ->color('primary')
                ->modalHeading('Choose Screening')
                ->modalContent(view('filament.tables.columns.screening-choose-type'))
                ->modalSubmitAction(false)
                ->modalCancelAction(false),
        ];
    }
}

the view calling in the modal is

<div>
        <div 
            class="h-40 w-full flex flex-col items-center justify-center
                   rounded-2xl border-2 border-gray-300 
                   hover:border-blue-500 hover:bg-blue-50 
                   text-blue-600 transition cursor-pointer shadow-sm hover:shadow-md" wire:click="redirectToTestPage" >
            <x-heroicon-o-credit-card class="w-10 h-10 mb-2" />
            <span class="text-lg font-semibold">Credit Check Union</span>
        </div>
</div>
<div>
        <div 
            class="h-40 w-full flex flex-col items-center justify-center
                   rounded-2xl border-2 border-gray-300 
                   hover:border-green-500 hover:bg-green-50 
                   text-green-600 transition cursor-pointer shadow-sm hover:shadow-md">
            <x-heroicon-o-document-text class="w-10 h-10 mb-2" />
            <span class="text-lg font-semibold">Advance Tenancy Screening</span>
        </div>
    
</div>

now i want when i click credit check union i want to open a new pop up window with custom component

<?php

namespace App\Livewire;

use Filament\Forms\Components\Select;
use Livewire\Component;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Forms\Form;

class ScreeningCreditcheck extends Component implements HasForms
{
    use InteractsWithForms;

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Select::make('type')
                    ->options([
                        'Credit Check' => 'Credit Check',
                        'Advance Credit Check' => 'Advance Credit Check',
                ])
            ]);
    }

    public function render()
    {
        return view('livewire.screening-creditcheck');
    }
}

LaryAI

8 months ago

Level 58

Certainly! Here’s how you can achieve the desired behavior in Filament: when clicking "Credit Check Union", you want to open a new modal (or popup) that renders your custom Livewire component (ScreeningCreditcheck).

Step 1: Use Filament’s Modal Actions with Livewire

Instead of using a plain Blade view for your modal content, you should use a Livewire component as the modal content. Filament supports this out of the box.

Update your `ListScreenings` action:

use App\Livewire\ScreeningCreditcheck;

protected function getHeaderActions(): array
{
    return [
        Actions\Action::make('Add Screening')
            ->icon('heroicon-s-plus')
            ->color('primary')
            ->modalHeading('Choose Screening')
            ->modalContent(view('filament.tables.columns.screening-choose-type'))
            ->modalSubmitAction(false)
            ->modalCancelAction(false),
    ];
}

But you want to open a second modal with your Livewire component when clicking "Credit Check Union". You can do this by:

Emitting a Livewire event from your Blade view.
Listening for that event in your Filament page and showing a modal with the Livewire component.

Step 2: Emit an Event When Clicking

In your Blade view (screening-choose-type.blade.php), update the "Credit Check Union" div to emit an event:

<div
    class="h-40 w-full flex flex-col items-center justify-center
           rounded-2xl border-2 border-gray-300 
           hover:border-blue-500 hover:bg-blue-50 
           text-blue-600 transition cursor-pointer shadow-sm hover:shadow-md"
    wire:click="$emitUp('openCreditCheckModal')"
>
    <x-heroicon-o-credit-card class="w-10 h-10 mb-2" />
    <span class="text-lg font-semibold">Credit Check Union</span>
</div>

Use $emitUp so the event bubbles up to the parent Livewire component (the Filament page).

Step 3: Listen for the Event in Your Filament Page

In your ListScreenings class, add a Livewire listener and a property to control the modal:

use Livewire\Attributes\On;

class ListScreenings extends ListRecords
{
    protected static string $resource = ScreeningResource::class;

    public bool $showCreditCheckModal = false;

    #[On('openCreditCheckModal')]
    public function openCreditCheckModal()
    {
        $this->showCreditCheckModal = true;
    }

    public function render()
    {
        return view('filament.resources.screening-resource.pages.list-screenings', [
            'showCreditCheckModal' => $this->showCreditCheckModal,
        ]);
    }
}

Step 4: Show the Modal with the Livewire Component

In your custom page Blade view (list-screenings.blade.php), add:

<x-filament::modal
    id="credit-check-modal"
    :visible="$showCreditCheckModal"
    wire:model.defer="showCreditCheckModal"
>
    @livewire('screening-creditcheck')
</x-filament::modal>

Summary

The first modal shows your screening type choices.
Clicking "Credit Check Union" emits an event.
The Filament page listens for this event and sets a property to show a second modal.
The second modal contains your custom Livewire component.

Tip:
If you want to close the modal from within the ScreeningCreditcheck component, emit an event (e.g., $emitUp('closeCreditCheckModal')) and add a corresponding method in your page to set $showCreditCheckModal = false;.

Let me know if you need a more detailed example or run into any issues!