Filament•7mo ago

Header action on section to go back on a specific step on a Wizard Form

Hello, I was wondering if it was possible, in a Wizard Form, to have a button that would allow you to go back to a specific step? Let me explain: I have a 4-step form, and the last step is a "resume" where I'll display all the fields from each step in a specific section with placeholders. So I wanted to create a "Modify" action button in the header of each section, which would link to the form step containing the fields. Is there a way to do this? Thanks for help 🙂

Solution:

Thanks to both of you for your response and follow-up 😇 @PovilasKorop I know that the buttons in the header are clickable and that we have the previous/next buttons. But, for the header buttons, I know that not everyone is likely to understand that it's clickable. In my case, the request is to have an additional "Summary" step that summarizes the answers from the previous steps, with a "Edit" button that takes you back to the step where the fields are....

Jump to solution

7 Replies

Povilas K•7mo ago

@Alexandre isn't it how Wizard works by default? You can click Back/Next at the bottom, but then each header is also clickable. At least this is how it works in one of our example projects, and we didn't specify any additional properties for the Wizard, it seems

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

    $i = 1;
    foreach (Question::with('answers')->get()->toArray() as $question) {
        $steps[] = Wizard\Step::make('Question ' . $i)
            ->schema([
                Radio::make($question['id'])
                    ->label($question['name'])
                    ->options(
                        collect($question['answers'])
                            ->mapWithKeys(function ($answer) {
                                return [$answer['id'] => $answer['value']];
                            })->toArray()
                    )
                    ->required()
            ]);
        $i++;
    }

    return $form
        ->schema([
            Wizard::make($steps) // ...

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

    $i = 1;
    foreach (Question::with('answers')->get()->toArray() as $question) {
        $steps[] = Wizard\Step::make('Question ' . $i)
            ->schema([
                Radio::make($question['id'])
                    ->label($question['name'])
                    ->options(
                        collect($question['answers'])
                            ->mapWithKeys(function ($answer) {
                                return [$answer['id'] => $answer['value']];
                            })->toArray()
                    )
                    ->required()
            ]);
        $i++;
    }

    return $form
        ->schema([
            Wizard::make($steps) // ...

Ben•7mo ago

On my last page in a wizard i have a summary to verify before submitting. I used a placeholder with Html Content. In the Placeholder i'm doing something like this: <span x-on:click="step='name-of-the-wizard-step'">Back to the Step</span> and that works. But i'm not sure how to do emit this from an action. I found an old filament v2 example for a table view, maybe it works like this: https://v2.filamentphp.com/tricks/emit-event-from-table-actions

Filament

Emit Livewire event from Table Actions by Uzzair B - Tricks - Filament

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

Povilas K•7mo ago

I don't fully understand where your action is, but in Livewire 3, $this->emit() was replaced with $this->dispatch(), you can try it out.

Solution

Alexandre•7mo ago

Section::make('Bâtiment')
    ->description('Identification du bâtiment')
    ->icon('heroicon-m-building-office')
   ->schema([
        //Contains step responses in Placeholder format
       ])

Section::make('Bâtiment')
    ->description('Identification du bâtiment')
    ->icon('heroicon-m-building-office')
   ->schema([
        //Contains step responses in Placeholder format
       ])

I then added an Action in the header with a particular view where I pass the step ID:

Section::make('Bâtiment')
    ->description('Identification du bâtiment')
     ->icon('heroicon-m-building-office')
    ->schema([
        //Contains step responses in Placeholder format
    ])
    ->headerActions([
       Action::make('Modifier')->view('filament.user.actions.modify-step', ['step' => '01-batiment']),
      ])

Section::make('Bâtiment')
    ->description('Identification du bâtiment')
     ->icon('heroicon-m-building-office')
    ->schema([
        //Contains step responses in Placeholder format
    ])
    ->headerActions([
       Action::make('Modifier')->view('filament.user.actions.modify-step', ['step' => '01-batiment']),
      ])

Then I create a Filament button with Alpine's click method to trigger the step change:

<x-filament::button
    x-on:click="step = '{{$step}}'"
    icon="heroicon-m-pencil-square"
>
    Edit
</x-filament::button>

<x-filament::button
    x-on:click="step = '{{$step}}'"
    icon="heroicon-m-pencil-square"
>
    Edit
</x-filament::button>

Voilà, voilà, just like that, everything works. Thanks again 😃

Ben•7mo ago

Hey, thanks for your solution! 🙂 I didn't know you can use your own view for an Action like that, cool! Maybe that's a solution for a problem of mine... https://discord.com/channels/883083792112300104/1235970269483499520

Povilas K•7mo ago

Wow impressive! Can I put this Alpine "beauty" as a free tutorial snippet on my FilamentExamples page? 🙂

AlexandreOP•7mo ago

Yup of course you can 👍

Gaming

Programming

Header action on section to go back on a specific step on a Wizard Form