How do i make my button actions work on my form - basics like save and add another, view frontend etc

So the docs has some information on making actions, but I am struggling to make them work. The code provided does display the buttons, but they fail to recognize the functions listed in my resource. How do i set this up properly for filament v3?

 Group::make()
                     ->schema([
                         Section::make()
                                ->columns(3)
                                ->schema([
                                    Actions::make([
                                        Action::make('viewFrontend')
                                              ->color('info')
                                              ->label('View Frontend')
                                              ->action('viewFrontend')
                                              ->openUrlInNewTab(),

                                        Action::make('saveAndCreateAnother')
                                              ->label('Save & Create Another')
                                              ->action('saveAndCreateAnother')
                                              ->color('info'),

                                        Action::make('saveAndClose')
                                              ->label('Save & Close')
                                              ->action('saveAndClose')
                                              ->color('primary'),

                                        Action::make('cancel')
                                              ->label('Cancel')
                                              ->action('cancel')
                                              ->color('danger')
                                        ,
                                    ]),
                                ]),
                         Section::make()
                                ->schema([
                                    Select::make('status')
                                          ->preload()
                                          ->options(function () {
                                              return Hobby::STATUS_RADIO;
                                          }),

                                    SelectTree::make('tag_id')
                                              ->searchable()
//                                              ->preload()
//                                              ->multiple()
                                              ->label('Category')
                                              ->relationship('categories',
                                                  'tag', 'parent_id')
                                              ->enableBranchNode()
                                              ->independent(true),
//MORE CODE//

 public function viewFrontend()
    {
        $this->redirect(route('hobby', $this));
    }

    public function saveAndCreateAnother()
    {
        $this->create();
        $this->redirect(static::getUrl('create'));
    }

    public function saveAndClose()
    {
        $this->save();
        $this->redirect(static::getUrl('index'));
    }

As is, i end up with error: Unable to call component method. Public method [viewFrontend] not found on component

If i remove Actions::make([

I get error: Filament\Forms\ComponentContainer::Filament\Forms\Concerns{closure}(): Argument #1 ($component) must be of type Filament\Forms\Components\Component, Filament\Forms\Components\Actions\Action given

I have the following used: use Filament\Forms\Components\Actions; use Filament\Forms\Components\Actions\Action;

I'd like these buttons toward the top of the form, either in the grouping defined or before the form even renders.

As well as the bottom, so i don't have to scroll up or down for long forms. I guess i need a cancel method as well unless that is already predefined with filament?

Thanks in advance

LaryAI

2 years ago

Level 58

It seems like you're encountering a couple of issues with your Filament setup. Let's address them step by step to ensure your actions work correctly.

Issue 1: Method Not Found Error

The error "Unable to call component method. Public method [viewFrontend] not found on component" suggests that the method viewFrontend is not accessible where it's expected. This usually happens when the method is not in the correct class or not public.

Issue 2: Component Type Error

The error about ComponentContainer::Filament\Forms\Concerns{closure}() indicates a misuse of the Actions component. It seems like you're trying to use Actions where only form components are expected.

Solution Steps

Step 1: Ensure Methods are in the Correct Class

Make sure that the methods viewFrontend, saveAndCreateAnother, and saveAndClose are defined in the correct Livewire component that renders the form. These methods should be public.

Step 2: Correct Use of Actions

Actions should be used within the context of a form or a table, and they should be correctly placed within the schema array. Here's how you can structure it:

use Filament\Forms\Components\Actions;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Group;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\SelectTree;

Group::make()
    ->schema([
        Section::make()
            ->columns(3)
            ->schema([
                Actions::make()
                    ->schema([
                        Action::make('viewFrontend')
                            ->color('info')
                            ->label('View Frontend')
                            ->action('viewFrontend')
                            ->openUrlInNewTab(),

                        Action::make('saveAndCreateAnother')
                            ->label('Save & Create Another')
                            ->action('saveAndCreateAnother')
                            ->color('info'),

                        Action::make('saveAndClose')
                            ->label('Save & Close')
                            ->action('saveAndClose')
                            ->color('primary'),

                        Action::make('cancel')
                            ->label('Cancel')
                            ->action('cancel')
                            ->color('danger'),
                    ]),
            ]),
        // Other sections and components
    ]);

Step 3: Define the Cancel Method

If you want a cancel action, you need to define what it does. Typically, it might redirect the user to a previous page or clear the form:

public function cancel()
{
    return redirect()->route('desired.route');
}

Step 4: Placement of Actions

To place actions at both the top and the bottom of the form, you will need to include the Actions component in both places within your form schema.

Final Note

Ensure that all methods used in actions are defined in the Livewire component that handles the form. Also, check that you are using the correct namespaces and that the component structure adheres to what Filament expects. If you continue to experience issues, reviewing the Filament documentation or seeking support from the Filament community may provide additional insights.

Please or to participate in this conversation.