Filament•17mo ago

Custom form component. But i want it to show a model.

I have a custom component. I want to show a button on my form. A button that shows a modal. I couldnt find anything related to this so i thought i could ask for some help or advice.

Solution:

yes.. create a livewire component called CreateDealer ```html  <div>...

Jump to solution

17 Replies

ZakhaevOP•17mo ago

ReportsNewDealer is the custom component. Code on the right side

Tin•17mo ago

Can this help? https://github.com/filamentphp/filament/discussions/3419

GitHub

How to use · filamentphp filament · Discussion #3419

Hi i have a complex, custom form page where on a click of a button i want to open a modal with some extra data. Can x-filament::modal be used for this? It's not an action so i need to be opened...

Tin•17mo ago

https://filamentphp.com/tricks/opening-a-modal-in-a-blade-with-button-outside-its-trigger-slot

Filament

Opening a modal in a blade with button outside it's trigger slot by...

Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

Tin•17mo ago

Also this You need to dispatch this open-modal event

ZakhaevOP•17mo ago

Thank you i will try it out and let you know It wont work so i tried using a livewire component but that also doesnt work Here i call the custom filament component --------------------------------------------

Grid::make(2)->schema([
                    Heading::make('heading_field')
                        ->setText('Dealer/Reparatiebedrijf'),
                    ReportsNewDealer::make('dealer'),
                ]),

Grid::make(2)->schema([
                    Heading::make('heading_field')
                        ->setText('Dealer/Reparatiebedrijf'),
                    ReportsNewDealer::make('dealer'),
                ]),

this is the component that shows the view --------------------------------------------

namespace App\Forms\Components;

use Filament\Forms\Components\Component;

class ReportsNewDealer extends Component
{
    protected string $view = 'forms.components.reports.new_dealer';

    public static function make(): static
    {
        return new static();
    }
}

namespace App\Forms\Components;

use Filament\Forms\Components\Component;

class ReportsNewDealer extends Component
{
    protected string $view = 'forms.components.reports.new_dealer';

    public static function make(): static
    {
        return new static();
    }
}

this is the content of the view --------------------------------------------

<livewire:create-dealer-component />

<livewire:create-dealer-component />

this is the livewire component -------------------------------

namespace App\Http\Livewire;

use Filament\Forms;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class CreateDealerComponent extends Component implements Forms\Contracts\HasForms
{
    use Forms\Concerns\InteractsWithForms; 
    public $showModal = false;

    public function openModal()
    {
        $this->showModal = true;
    }

    public function closeModal()
    {
        $this->showModal = false;
    }
    public function render()
    {
        return view('livewire.two-way-two-create-dealer-component');
    }

    public function submit(): void
    {
        // ...
    }
 
}

namespace App\Http\Livewire;

use Filament\Forms;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class CreateDealerComponent extends Component implements Forms\Contracts\HasForms
{
    use Forms\Concerns\InteractsWithForms; 
    public $showModal = false;

    public function openModal()
    {
        $this->showModal = true;
    }

    public function closeModal()
    {
        $this->showModal = false;
    }
    public function render()
    {
        return view('livewire.two-way-two-create-dealer-component');
    }

    public function submit(): void
    {
        // ...
    }
 
}

this is the view of the livewire component -------------------------------------------

<div>
    <button wire:click="openModal" class="filament-button filament-button-size-md inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset min-h-[2.25rem] px-4 text-sm text-white shadow focus:ring-white border-transparent bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 filament-page-button-action">
        <span>Nieuw dealer/reparatiebedrijf aanmaken</span>
    </button>

    <x-filament::modal :open="$showModal" wire:ignore.self>
        <x-slot name="header">
            Custom modal:
        </x-slot>

        Modal content

        <x-slot name="footer">
            <button wire:click="closeModal" class="filament-button filament-button-size-md inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset min-h-[2.25rem] px-4 text-sm text-white shadow focus:ring-white border-transparent bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 filament-page-button-action">Close Modal</button>
        </x-slot>
    </x-filament::modal>
</div>

<div>
    <button wire:click="openModal" class="filament-button filament-button-size-md inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset min-h-[2.25rem] px-4 text-sm text-white shadow focus:ring-white border-transparent bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 filament-page-button-action">
        <span>Nieuw dealer/reparatiebedrijf aanmaken</span>
    </button>

    <x-filament::modal :open="$showModal" wire:ignore.self>
        <x-slot name="header">
            Custom modal:
        </x-slot>

        Modal content

        <x-slot name="footer">
            <button wire:click="closeModal" class="filament-button filament-button-size-md inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset min-h-[2.25rem] px-4 text-sm text-white shadow focus:ring-white border-transparent bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700 filament-page-button-action">Close Modal</button>
        </x-slot>
    </x-filament::modal>
</div>

is it not possible to use a livewire component or am i doing something wrong

LeandroFerreira•17mo ago

please read #✅┊rules and share your code correctly..

ZakhaevOP•17mo ago

i changed the code format.

LeandroFerreira•17mo ago

try to add an id

<x-filament::modal id="myModal">

<x-filament::modal id="myModal">

and dispatch the event

<x-filament::button @click="$dispatch('open-modal', { id: 'myModal' })" type="button">Button</x-filament::button>

<x-filament::button @click="$dispatch('open-modal', { id: 'myModal' })" type="button">Button</x-filament::button>

ZakhaevOP•17mo ago

@Leandro Ferreira the livewire component wont show up in my form. i cant test if the modal works. Do you maybe know what the problem could be does anyone know what i should do im stuck with this problem

Patrick Boivin•17mo ago

Can you simplify your Livewire component and get it to render? Remove the modal code and show a simple message. I think this is your first step... Second, I think your modal should live outside of your form component. Outside of the entire form ideally.

Solution

LeandroFerreira•17mo ago

yes.. create a livewire component called CreateDealer

<!-- resources/views/livewire/create-dealer.blade.php -->
<div>
    <x-filament::modal id="createDealer">
        <x-slot name="heading">
            Create Dealer
        </x-slot>

        <div>
            Content...
        </div>

        <x-slot name="footer">
            <x-filament::button type="button" @click="$dispatch('close-modal', {id: 'createDealer'})">Close</x-filament::button>
        </x-slot>
    </x-filament::modal>

    <x-filament::button type="button" @click="$dispatch('open-modal', {id: 'createDealer'})">Open Modal</x-filament::button>
</div>

<!-- resources/views/livewire/create-dealer.blade.php -->
<div>
    <x-filament::modal id="createDealer">
        <x-slot name="heading">
            Create Dealer
        </x-slot>

        <div>
            Content...
        </div>

        <x-slot name="footer">
            <x-filament::button type="button" @click="$dispatch('close-modal', {id: 'createDealer'})">Close</x-filament::button>
        </x-slot>
    </x-filament::modal>

    <x-filament::button type="button" @click="$dispatch('open-modal', {id: 'createDealer'})">Open Modal</x-filament::button>
</div>

Use View to render the component

Grid::make(2)->schema([
    Forms\Components\View::make('livewire.create-dealer'),
])

Grid::make(2)->schema([
    Forms\Components\View::make('livewire.create-dealer'),
])

LeandroFerreira•17mo ago

@gestolen , if you don't need a livewire component, just use a custom view to render the modal.

<!-- resources/views/custom-view.blade.php -->
<div>
    <x-filament::modal id="createDealer">
    ...
</div>

<!-- resources/views/custom-view.blade.php -->
<div>
    <x-filament::modal id="createDealer">
    ...
</div>

Forms\Components\View::make('custom-view')

Forms\Components\View::make('custom-view')

You can also use $getRecord() inside the custom view or livewire component

botaviator1990•17mo ago

@Leandro Ferreira , I want to create a static Button which will ideally open up a Modal window conditionally. I couldn't find any suitable component in Livewire. So anyone can suggest a way ?

LeandroFerreira•17mo ago

lets chat in your question...

botaviator1990•17mo ago

Sure thing

ZakhaevOP•17mo ago

I tried this at the beginnning and after you told me i did it again and it just wont show up. Im gonna trry @Leandro Ferreira 's answer by using the view component in my form. @Leandro Ferreira creating the view component en including my livewire view seems to be working right. Hope i can get the form working. Thank you all

ZakhaevOP•17mo ago

@Leandro Ferreira Hi, i still have one little problem.

<div>
            Content...
            <x-filament::button type="button" @click="like" >Close</x-filament::button>
            <button wire:click="counter">{{ $counter }}</button>
        </div>

<div>
            Content...
            <x-filament::button type="button" @click="like" >Close</x-filament::button>
            <button wire:click="counter">{{ $counter }}</button>
        </div>

When i try to use a var in my view using livewire i cant get the value out of it. It gives me a undefined error.

Gaming

Programming

Custom form component. But i want it to show a model.