F
Filament•15mo ago
Kaan

Dynamic Wizard

I'm currently working on a project where I'm using the Wizard component in Filament. I have a table named category_steps and I want to dynamically generate wizard steps based on the number of records in this table. Essentially, for each record in category_steps, I want to present the user with a corresponding step in the wizard. Could anyone guide me on how to achieve this dynamic generation of wizard steps using Filament in Laravel? Any help or pointers would be greatly appreciated. Thank you!
18 Replies
xerud
xerud•15mo ago
Did you find a way?
Kaan
KaanOP•15mo ago
No But i have a theory. I will try https://hastebin.skyra.pw/axutisepex.php
Kaan
KaanOP•15mo ago
No description
Kaan
KaanOP•15mo ago
No description
Kaan
KaanOP•15mo ago
No description
toeknee
toeknee•15mo ago
The problem with the above, is because you are dynamically changing it without loading it on boat so there are no properties being set
Kaan
KaanOP•15mo ago
I'm trying to manage a dynamically repeating wizard, but right now I'm getting the error you see when I press the "next" button. Could you share more details with me? And thanks for your answer!
toeknee
toeknee•15mo ago
That's because the wizard isn't really a repeater, so it doesn't update the states. Let me have a quick think
Kaan
KaanOP•15mo ago
I am waiting and thank you.
toeknee
toeknee•15mo ago
Ok great so Wizard accepts a closure, so you can create the steps from a closure i.e. 
Wizard::make(
  function($record) {
    $schema = [];
    foreach($record->category_steps as $key => $step) {
      $schema[] = Wizard\Step::make($key)->schema([
                        TextInput::make('email')
                            ->label('Email')
                            ->email()
                            ->required($defaultRequirement)
                            ->columnSpan(12),
                    ]);
                        
    }
    
  return $schema;

})
Wizard::make(
  function($record) {
    $schema = [];
    foreach($record->category_steps as $key => $step) {
      $schema[] = Wizard\Step::make($key)->schema([
                        TextInput::make('email')
                            ->label('Email')
                            ->email()
                            ->required($defaultRequirement)
                            ->columnSpan(12),
                    ]);
                        
    }
    
  return $schema;

})
Kaan
KaanOP•15mo ago
Do I need to make an edit in the mount method? My code is like this now but it didn't work: 
    public function form(Form $form): Form
    {
        return $form->schema([
            Wizard::make(
                function ($record) {
                    $schema = [];
                    foreach ($record->category_steps as $key => $step) {
                        $schema[] = Wizard\Step::make($key)->schema([
                            TextInput::make('file_description')
                                ->label('File Description')
                        ]);

                    }

                    return $schema;
                }
            )
        ]);
    }
    public function form(Form $form): Form
    {
        return $form->schema([
            Wizard::make(
                function ($record) {
                    $schema = [];
                    foreach ($record->category_steps as $key => $step) {
                        $schema[] = Wizard\Step::make($key)->schema([
                            TextInput::make('file_description')
                                ->label('File Description')
                        ]);

                    }

                    return $schema;
                }
            )
        ]);
    }
toeknee
toeknee•15mo ago
So it's not a repeater so you can't really use it in create. But yes if you do: 
    public function form(Form $form): Form
    {
        return $form->schema([
            Wizard::make(
                function ($record) {
                    $schema = [];
                    foreach ($record->category_steps as $key => $step) {
                        $schema[] = Wizard\Step::make($key)->schema([
                            TextInput::make('file_description')
                                ->label('File Description')
                        ]);

                    }

                    return $schema;
                }
            )->visible(fn($context) => $context === 'edit')
        ]);
    }
    public function form(Form $form): Form
    {
        return $form->schema([
            Wizard::make(
                function ($record) {
                    $schema = [];
                    foreach ($record->category_steps as $key => $step) {
                        $schema[] = Wizard\Step::make($key)->schema([
                            TextInput::make('file_description')
                                ->label('File Description')
                        ]);

                    }

                    return $schema;
                }
            )->visible(fn($context) => $context === 'edit')
        ]);
    }
Kaan
KaanOP•15mo ago
    public function mount($record): void
    {
        $categoryApplication = CategoryApplication::findOrFail($record);
        $category = $categoryApplication->category;
        $this->originalCategorySteps = $category->categorySteps;
        $this->categorySteps = $this->originalCategorySteps->toArray();

        $this->form->fill();
    }



    public function form(Form $form): Form
    {
        return $form->schema([
            Wizard::make(
                function ($record) {
                    $schema = [];
                    foreach ($record->category_steps as $key => $step) {
                        $schema[] = Wizard\Step::make($key)->schema([
                            TextInput::make('file_description')
                                ->label('File Description')
                        ]);

                    }
                    return $schema;
                }
            )
        ]);
    }
    public function mount($record): void
    {
        $categoryApplication = CategoryApplication::findOrFail($record);
        $category = $categoryApplication->category;
        $this->originalCategorySteps = $category->categorySteps;
        $this->categorySteps = $this->originalCategorySteps->toArray();

        $this->form->fill();
    }



    public function form(Form $form): Form
    {
        return $form->schema([
            Wizard::make(
                function ($record) {
                    $schema = [];
                    foreach ($record->category_steps as $key => $step) {
                        $schema[] = Wizard\Step::make($key)->schema([
                            TextInput::make('file_description')
                                ->label('File Description')
                        ]);

                    }
                    return $schema;
                }
            )
        ]);
    }
that didn't work for me
Kaan
KaanOP•15mo ago
No description
toeknee
toeknee•15mo ago
Ok that's just the baseline, are you creaitng there?
Kaan
KaanOP•15mo ago
I am trying to create it in Custom Page. Models & Relations: CategoryApplication: This model represents an application for a category. It has a direct relationship with the Category model. Category: This model represents a category and has a one-to-many relationship named categorySteps with the CategoryStep model. Each Category can have multiple steps. CategoryStep: Represents individual steps associated with a category. These steps can be of different types, such as TYPE_UPLOAD or TYPE_REQUEST. CategoryApplicationStep: This model is intended to store the steps of a specific application. It's like an instance of CategoryStep but specific to an application. What I'm Trying to Achieve: I'm building a custom form page (CustomCreateCategoryApplicationSteps) where I want to display a series of steps (sourced from the categorySteps relation of a Category) as a wizard using Filament's Wizard component. Each step in the wizard should correspond to a CategoryStep, and I want to dynamically generate these steps based on the associated Category of the CategoryApplication. The Algorithm: In the mount method, I fetch the CategoryApplication using the provided $record ID. From this CategoryApplication, I retrieve the related Category. I then aim to access the categorySteps of this Category to populate the wizard steps dynamically.
xerud
xerud•15mo ago
But that aproach can't be used inside the Create method with use HasWizard
Kaan
KaanOP•15mo ago
I use custom page 
    public $categorySteps;

    public $originalCategorySteps;

    public function mount($record): void
    {
        $categoryApplication = CategoryApplication::findOrFail($record);
        $category = $categoryApplication->category;
        $this->categorySteps = $category->categorySteps;

        //dd($this->categorySteps);
        //$this->form->fill();
    }


    public function form(Form $form): Form
    {
        $wizardSteps = [];

        foreach ($this->categorySteps as $categoryStep) {
            $wizardSteps[] = Wizard\Step::make($categoryStep->step_title)
                ->schema([
                    TextInput::make('file_name')
                        ->id("category-step".$categoryStep->id)
                        ->label('Upload File')
                        ->required(),
                ]);
        }

        return $form
            ->schema([Wizard::make($wizardSteps)]);
    }
}
    public $categorySteps;

    public $originalCategorySteps;

    public function mount($record): void
    {
        $categoryApplication = CategoryApplication::findOrFail($record);
        $category = $categoryApplication->category;
        $this->categorySteps = $category->categorySteps;

        //dd($this->categorySteps);
        //$this->form->fill();
    }


    public function form(Form $form): Form
    {
        $wizardSteps = [];

        foreach ($this->categorySteps as $categoryStep) {
            $wizardSteps[] = Wizard\Step::make($categoryStep->step_title)
                ->schema([
                    TextInput::make('file_name')
                        ->id("category-step".$categoryStep->id)
                        ->label('Upload File')
                        ->required(),
                ]);
        }

        return $form
            ->schema([Wizard::make($wizardSteps)]);
    }
}
Updated I'm using the Filament admin panel for Laravel and I've encountered an issue with the Wizard component in the form. When I try to proceed to the next step in the wizard, I'm getting the error: "No property found for validation: [file_name]". Here's a brief overview of my setup: I have a CategoryApplication model that has a relationship with CategoryStep. In the CustomCreateCategoryApplicationSteps page, I'm trying to dynamically generate steps in the wizard based on the CategoryStep related to the CategoryApplication. Each step in the wizard should have a TextInput component where the user can input a file name. When I try to navigate to the next step in the wizard, I encounter the error. I suspect it might be related to how I'm naming the TextInput components or how the form state is being managed, but I'm not sure. Has anyone encountered this issue before or have any insights on how to resolve it? I tried to get around the problem by doing unique naming but failed.

Did you find this page helpful?