Filament•13mo ago

Using a Livewire form inside a Filament Resource (simple)

Hello everyone, I have an issue while trying to use a custom Livewire component inside a modal for a resource (I'm using the --simple version with ManageMyResource). I have attached the images related to the code of the Livewire component and the Filament resource. I would prefer not to use a full-page Livewire component but just be able to render the custom form inside the modal. Can anyone help me with this problem? Thank you very much

12 Replies

LeandroFerreira•13mo ago

I didn't understand why you are trying to render a custom form if you have a form

SirAlyonOP•13mo ago

I need to handle a custom drag and drop in the form, that's why I need to use JavaScript, and I was thinking of doing it through Livewire or Alpine (if necessary). Here is the reason why I am trying to import a form from the Livewire component.

LeandroFerreira•13mo ago

use the Create/Edit Page instead of resource... they are livewire components ahh ok, you are using --simple

SirAlyonOP•13mo ago

Actually i generated the resource with the --simple option, im wondering if i can render the livewire component in the modal, and how 🙂 Here my Manage code

<?php

namespace App\Filament\Resources\OpenFundsPatternResource\Pages;

use App\Filament\Resources\OpenFundsPatternResource;
use Filament\Actions;
use Filament\Resources\Pages\ManageRecords;

class ManageOpenFundsPatterns extends ManageRecords
{
    protected static string $resource = OpenFundsPatternResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }
}

<?php

namespace App\Filament\Resources\OpenFundsPatternResource\Pages;

use App\Filament\Resources\OpenFundsPatternResource;
use Filament\Actions;
use Filament\Resources\Pages\ManageRecords;

class ManageOpenFundsPatterns extends ManageRecords
{
    protected static string $resource = OpenFundsPatternResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }
}

LeandroFerreira•13mo ago

I think you can use ->modalContent an pass a view... you can render the livewire component in the view

SirAlyonOP•13mo ago

You mean inside the form method of the Resource or in the Manage(MyResource) file?

LeandroFerreira•13mo ago

CreateAction::make()->modalContent(view('custom-view')) render the livewire component in the custom view

SirAlyonOP•13mo ago

I'm sorry but i'm not able to get this working, im still a newbie and trying to learn... I didn't understand where you are using this CreateAction. Using it like this in

<?php

namespace App\Filament\Resources\OpenFundsPatternResource\Pages;

use App\Filament\Resources\OpenFundsPatternResource;
use Filament\Actions;
use Filament\Resources\Pages\ManageRecords;

class ManageOpenFundsPatterns extends ManageRecords
{
    protected static string $resource = OpenFundsPatternResource::class;

    protected function getHeaderActions(): array
    {
        return [
            //Actions\CreateAction::make()
            Actions\CreateAction::make()->modalContent(view('livewire.create-open-funds-d')),
        ];
    }
}

<?php

namespace App\Filament\Resources\OpenFundsPatternResource\Pages;

use App\Filament\Resources\OpenFundsPatternResource;
use Filament\Actions;
use Filament\Resources\Pages\ManageRecords;

class ManageOpenFundsPatterns extends ManageRecords
{
    protected static string $resource = OpenFundsPatternResource::class;

    protected function getHeaderActions(): array
    {
        return [
            //Actions\CreateAction::make()
            Actions\CreateAction::make()->modalContent(view('livewire.create-open-funds-d')),
        ];
    }
}

Seems like it point correctly to the view but i'm getting this error after (screen attached)

LeandroFerreira•13mo ago

hum honestly I'm not sure about this approach...

SirAlyonOP•13mo ago

I just need to execute a custom javascript code on this form. I tought with a custom livewire components it was the best approch but seems like i'm not able to successfully display the view.. Which approach is the best if i need to customize a form with a custom JS?

LeandroFerreira•13mo ago

what js would you like to use?

SirAlyonOP•13mo ago

I didn't wrote it yet, i think it will be the next step. Anyway i'm gonna import a list of headers from an csv file, i'll show the user 2 input for each header, where the first is the actual header name and the second one (empty) the header name the user is gonna set. The user will have the ability to drag and drop this group (i mean, both) of inputs to choose the order he needs. Anyway im not warried about this functionality, i was just trying to display the view from livewire 😦

Gaming

Programming

Using a Livewire form inside a Filament Resource (simple)