Filament•15mo ago

Save form before running action

Is it possible to validate and save a form before an action it run? I want to ensure all the data is correct and stored but running a publish action.

Solution:

For anyone finding this here is the solution that worked for me I removed the save buttons from the Create and Edit pages and added a submitAction to my wizard to handle saving the form. ```php...

Jump to solution

12 Replies

krekas•15mo ago

Call the validate method from livewire

Ric Le PoidevinOP•15mo ago

Sorry, not sure how to do that. New to livewire and filament. Looking at some other messages they show using an action method. I’d need to save and validate before showing the modal, or cancel if that fails.

Forms\Components\TextInput::make('Apply URL')
      ->prefixIcon('heroicon-o-globe-alt')
      ->label('URL')
      ->rules(['url']),

      Actions::make([
          Forms\Components\Actions\Action::make('Publish')
              ->action(
                 function($livewire) {
                     $livewire->validate();
                     // also save....????
                 }
              )
              ->closeModalByClickingAway(false)
              ->slideOver()
              ->icon('heroicon-o-check-badge')
              ->form([
                  BraintreePayment::make('payment')
                      ->viewData([
                         ...
                      ])
              ])
              ->modalSubmitAction(false)
              ->modalCancelActionLabel('Close'),
      ]),

Forms\Components\TextInput::make('Apply URL')
      ->prefixIcon('heroicon-o-globe-alt')
      ->label('URL')
      ->rules(['url']),

      Actions::make([
          Forms\Components\Actions\Action::make('Publish')
              ->action(
                 function($livewire) {
                     $livewire->validate();
                     // also save....????
                 }
              )
              ->closeModalByClickingAway(false)
              ->slideOver()
              ->icon('heroicon-o-check-badge')
              ->form([
                  BraintreePayment::make('payment')
                      ->viewData([
                         ...
                      ])
              ])
              ->modalSubmitAction(false)
              ->modalCancelActionLabel('Close'),
      ]),

krekas•15mo ago

I think should work what you showed here

Ric Le PoidevinOP•15mo ago

the modal is opening without validation firing. and because i have not saved the model yet (it’s create form) there is no $id for the record that the modal needs. vacancyId: '{{ $getRecord()->id }}', - it’s null. If I remove the form the action closure runs

Patrick Boivin•15mo ago

Yeah, that's because the modal runs the action() when you click Submit

Ric Le PoidevinOP•15mo ago

Is there any way to get it to work? I can run my action from the table view, but would love it in the last step of my wizard - validate, save, then open modal with the publish form

Patrick Boivin•15mo ago

I'm not sure but I think this might require a custom action class. I think the validate + save (on the main form) needs to happen when your custom Action is being mounted.

Ric Le PoidevinOP•15mo ago

Okay.... been playing a bit more, I could put my BraintreePayment field on the last step of the wizard by itself then validation would have already happened like normal. But I need to save the form as the custom field needs the ID

<div
            x-ignore
            ax-load
            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('test-component') }}"
            x-data="testComponent({
                state: {
                    amount: '79.00',
                    clientToken: '{{ $clientToken }}',
                    isLoaded: false,
                    paymentAttempt: false,
                    isError: false,
                    errorMessage: '',
                    vacancyId: '{{ $getRecord()->id }}',
                    user: {
                        givenName: 'John',
                        surname: 'Doe',
                        phoneNumber: '8101234567',
                        phoneNumber: '[email protected]',
                        streetAddress: '555 Smith St.',
                        extendedAddress: '#5',
                        locality: 'Oakland',
                        region: 'CA',
                        postalCode: '12345',
                        countryCodeAlpha2: 'US'
                    }
                }
            })"
        >

<div
            x-ignore
            ax-load
            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('test-component') }}"
            x-data="testComponent({
                state: {
                    amount: '79.00',
                    clientToken: '{{ $clientToken }}',
                    isLoaded: false,
                    paymentAttempt: false,
                    isError: false,
                    errorMessage: '',
                    vacancyId: '{{ $getRecord()->id }}',
                    user: {
                        givenName: 'John',
                        surname: 'Doe',
                        phoneNumber: '8101234567',
                        phoneNumber: '[email protected]',
                        streetAddress: '555 Smith St.',
                        extendedAddress: '#5',
                        locality: 'Oakland',
                        region: 'CA',
                        postalCode: '12345',
                        countryCodeAlpha2: 'US'
                    }
                }
            })"
        >

Patrick Boivin•15mo ago

Just a thought - can you instead disable the Publish action, until the user has saved the form?

Ric Le PoidevinOP•15mo ago

I can try that. Then it’ll appear once they save. Sounds like it should work thank you

Solution

Ric Le Poidevin•15mo ago

For anyone finding this here is the solution that worked for me I removed the save buttons from the Create and Edit pages and added a submitAction to my wizard to handle saving the form.

Forms\Components\Wizard::make([...])
  ->submitAction(\Filament\Actions\Action::make('create')
  ->label('Save')
  ->submit('create'))->columnSpanFull(),

Forms\Components\Wizard::make([...])
  ->submitAction(\Filament\Actions\Action::make('create')
  ->label('Save')
  ->submit('create'))->columnSpanFull(),

When saved the user is redirected to the Edit page for the resource. I then added a header action as below.

protected function getHeaderActions(): array
{
    return [
        Actions\DeleteAction::make(),
        $this->getSaveFormAction()
            ->submit(null)
            ->action('save'),
        \Filament\Actions\Action::make('Publish')
            ->closeModalByClickingAway(false)
            ->slideOver()
            ->icon('heroicon-o-check-badge')
            ->form([
                BraintreePayment::make('payment')
                    ->viewData([
                        ...
                    ])
            ])
            ->disabled(function (Vacancy|null $record) {
                return $record?->is_published;
            })
            ->modalSubmitAction(false)
            ->modalCancelActionLabel('Close'),
    ];
}

protected function getHeaderActions(): array
{
    return [
        Actions\DeleteAction::make(),
        $this->getSaveFormAction()
            ->submit(null)
            ->action('save'),
        \Filament\Actions\Action::make('Publish')
            ->closeModalByClickingAway(false)
            ->slideOver()
            ->icon('heroicon-o-check-badge')
            ->form([
                BraintreePayment::make('payment')
                    ->viewData([
                        ...
                    ])
            ])
            ->disabled(function (Vacancy|null $record) {
                return $record?->is_published;
            })
            ->modalSubmitAction(false)
            ->modalCancelActionLabel('Close'),
    ];
}

Patrick Boivin•15mo ago

Nice!

Gaming

Programming

Save form before running action