Filament•2mo ago

How do I render a livewire modal in my createResource????

I'm having a problem rendering my create button on my form, how do I solve it? My first experience with livewire and filament my code below: Resource:

class ExampleResource extends Resource
{

    public static function form(Form $form): Form
    {
        //  form

                Modal::make('modal'),
                
            ])->columns(1);
    }

class ExampleResource extends Resource
{

    public static function form(Form $form): Form
    {
        //  form

                Modal::make('modal'),
                
            ])->columns(1);
    }

CreateExample.php:

    public function getFormActions(): array
    {
       return [
            ...parent::getFormActions(),
            Action::make('...')
                ->color('gray')
                ->label('...')
                ->action(function () {
                    $this->dispatch('open-modal', id: 'addexample');
                })
            ];
    }

    public function getFormActions(): array
    {
       return [
            ...parent::getFormActions(),
            Action::make('...')
                ->color('gray')
                ->label('...')
                ->action(function () {
                    $this->dispatch('open-modal', id: 'addexample');
                })
            ];
    }

<x-filament::modal id="addexample width="max-w-5xl">
    
        <div class="w-2/3 rounded-lg">
            <form wire:submit="save">
                {{ $this->form }}
            </form>
        </div>
    </div>
</x-filament::modal>

<x-filament::modal id="addexample width="max-w-5xl">
    
        <div class="w-2/3 rounded-lg">
            <form wire:submit="save">
                {{ $this->form }}
            </form>
        </div>
    </div>
</x-filament::modal>

rendering modalexample:

<div>
    @livewire('addexample')
</div>

<div>
    @livewire('addexample')
</div>

4 Replies

LeandroFerreira•2mo ago

https://filamentphp.com/docs/3.x/panels/resources/getting-started#simple-modal-resources

Getting started - Panel Builder - Filament

BrunoOP•2mo ago

Sorry, but I can't understand livewire with filament. I don't understand how this works with my modal(livewire component).

403gtfo•2mo ago

Sorry, I may be off base, but are you just trying to create a record via a modal? If so, why not make your life easy by just using a normal header action?

//At the top of the file
use App\Models\ExampleResource
use Filament\Tables\Actions\Action;

// inside your resources $table
->headerActions([
  Action::make('create_example')
    ->hidden(false) // add logic here to limit access
    ->form([
      TextInput::make('name')
        ->required()
        ->rules(['string', 'max:255'])
        ->unique(ignoreRecord: true)
    ])
    ->after(
      function ($data) {
        // Do stuff here to check and save your Example
        ExampleResource::create([
          'name' => $data['name'],
        ]);
      }
    )
])

//At the top of the file
use App\Models\ExampleResource
use Filament\Tables\Actions\Action;

// inside your resources $table
->headerActions([
  Action::make('create_example')
    ->hidden(false) // add logic here to limit access
    ->form([
      TextInput::make('name')
        ->required()
        ->rules(['string', 'max:255'])
        ->unique(ignoreRecord: true)
    ])
    ->after(
      function ($data) {
        // Do stuff here to check and save your Example
        ExampleResource::create([
          'name' => $data['name'],
        ]);
      }
    )
])

And if you want to do something funky in relation to another record you could just add it as a row action

//At the top of the file
use App\Models\ExampleResource
use Filament\Tables\Actions\Action;

// inside your resources $table
->actions([
  Action::make('create_example')
    ->hidden(false) // add logic here to limit access
    ->form([
      TextInput::make('name')
        ->required()
        ->rules(['string', 'max:255'])
        ->unique(ignoreRecord: true)
    ])
    ->after(
      function ($data, $record) {
        // Do stuff here to check and save your Example
        // $record is the record you click the action link on
        ExampleResource::create([
          'name' => $data['name'],
          'related_id => $record->id
        ]);
         // Good idea to send a notification here as normal action dont do it automagically.
      }
    )
])

//At the top of the file
use App\Models\ExampleResource
use Filament\Tables\Actions\Action;

// inside your resources $table
->actions([
  Action::make('create_example')
    ->hidden(false) // add logic here to limit access
    ->form([
      TextInput::make('name')
        ->required()
        ->rules(['string', 'max:255'])
        ->unique(ignoreRecord: true)
    ])
    ->after(
      function ($data, $record) {
        // Do stuff here to check and save your Example
        // $record is the record you click the action link on
        ExampleResource::create([
          'name' => $data['name'],
          'related_id => $record->id
        ]);
         // Good idea to send a notification here as normal action dont do it automagically.
      }
    )
])

BrunoOP•2mo ago

My livewire component (modal) uses a filament repeater (manually inserted) and also a camera for reading QrCode, which is why I opted for a modal. 😦

Gaming

Programming

How do I render a livewire modal in my createResource????