Filament•3mo ago

Reuse wizard on frontend

Hi I have a wizard on the create resource, but I want to make it available on the front end, is there an easy way to reuse the form on the front end? and not have to rebuild all fields from scratch? Thanks

8 Replies

Wrax•3mo ago

extract the form from the resource to a method on a class (Model will do) and call it from both your filament resource and your front-end livewire component class

Cushty•3mo ago

Thanks for the reply, I have done this for the resource and it works great, do I need to make a separate wizard form in the model as well and call this from the create resource and front-end livewire component so the wizard has a form to? Thanks

Wrax•3mo ago

You shouldn't need to make a duplicate wizard. Just call the same form method in your livewire component class. https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form

Adding a form to a Livewire component - Form Builder - Filament

Cushty•3mo ago

Hi, I am having issues with the wizard and a livewire component, I have read the docs and tried a few things but the wizard is not working correctly. The docs say to use a form but in order for my wizard to show correctly on the panel and pull the steps from the model I have to use or skippable breaks and the form layout is half instead of full.

 protected function getSteps(): array
    {
        return Application::formWizard();

    }

 protected function getSteps(): array
    {
        return Application::formWizard();

    }

but on the component you need to use a form. i tried :

 public function form(Form $form): Form
    {
        return $form->schema([
            Wizard::make(Application::formWizard())
        ]);

    }


    public function hasSkippableSteps(): bool
    {
        return true;
    }

 public function form(Form $form): Form
    {
        return $form->schema([
            Wizard::make(Application::formWizard())
        ]);

    }


    public function hasSkippableSteps(): bool
    {
        return true;
    }

but using this breaks the use skippable function and also makes the layout on the panel a half column. What can I do to get the wizard pulling in the steps from modal but I can use it in panel and component? Thanks

toeknee•3mo ago

Add the steps into the resource as a public function: public static function formSteps(): array { return [Step::make('step1')->schema([])]; } Then use this in your ->steps(MyResource::formSteps()) at the end of the day, schema is just an array so it doesn't matter where you define it really

Wrax•3mo ago

As it turns out I've just implemented a wizard on a frontend livewire component in my own app. Might be little different than what you're trying to do but essentially I am rendering a filament table on my front-end livewire component and then have a column act as button to open the wizard steps in a modal. Hope this helps

ListLitters.php
<?php

namespace App\Livewire\Litters;

use ...

class ListLitters extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public LitterApplicant $applicant;

    public function create(): Action
    {
        return Action::make('create')
            ->requiresConfirmation()
            ->action(fn () => $this->applicant->create());
    }
public function table(Table $table): Table
    {
        return $table
            ->query(Litter::query())
            ->columns([
            // Other columns...
              TextColumn::make('button')
                ->state('Apply')
                ->action(                        Tables\Actions\CreateAction::make('makeLitterApplication')
                        ->model(LitterApplicant::class)
                        ->steps(LitterApplicant::getFormSteps())
                        ->requiresConfirmation()
                        ->modalHeading('Make Application')
                        ->modalDescription('Fill the form to submit')
                        ->modalIcon('heroicon-m-pencil-square')
                        ->modalWidth(MaxWidth::FiveExtraLarge)
                        ->modalIconColor('success')
                        ->successNotification(
                            Notification::make()
                                ->title('Application Received')
                                ->body('body text')
                                ->persistent()
                                ->success()
...          
public function render(): View
    {
        return view('livewire.litters.list-litters');
    }

ListLitters.php
<?php

namespace App\Livewire\Litters;

use ...

class ListLitters extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public LitterApplicant $applicant;

    public function create(): Action
    {
        return Action::make('create')
            ->requiresConfirmation()
            ->action(fn () => $this->applicant->create());
    }
public function table(Table $table): Table
    {
        return $table
            ->query(Litter::query())
            ->columns([
            // Other columns...
              TextColumn::make('button')
                ->state('Apply')
                ->action(                        Tables\Actions\CreateAction::make('makeLitterApplication')
                        ->model(LitterApplicant::class)
                        ->steps(LitterApplicant::getFormSteps())
                        ->requiresConfirmation()
                        ->modalHeading('Make Application')
                        ->modalDescription('Fill the form to submit')
                        ->modalIcon('heroicon-m-pencil-square')
                        ->modalWidth(MaxWidth::FiveExtraLarge)
                        ->modalIconColor('success')
                        ->successNotification(
                            Notification::make()
                                ->title('Application Received')
                                ->body('body text')
                                ->persistent()
                                ->success()
...          
public function render(): View
    {
        return view('livewire.litters.list-litters');
    }

toeknee•3mo ago

That’s fine… so what’s the problem?

Wrax•3mo ago

I'm not OP but hopfully my snippet can help @Cushty in the right direction.

Gaming

Programming

Reuse wizard on frontend