New in v6: How to build Custom Form Operation in Backpack v6

Hey devs, check out the amazing new feature in Backpack v6 - building custom forms with ease! In the past, creating a custom operation...

Karan Datwani

Published on 17 August 2023 in Tips and tricks

Share:

• 
• 

Hey devs, check out the amazing new feature in Backpack v6 - building custom forms with ease! In the past, creating a custom operation with a Backpack form required a bit of work, but not anymore! With the latest version, it's a piece of cake. Let me show you how:

Step 1: Generate the Operation Trait

First things first, you'll need to generate the operation trait for your custom form. Just run the following command:

php artisan backpack:crud-form-operation Comment

By running this command, you'll get a brand new trait called CommentOperation. This trait will handle your custom form logic and will work right away without any further configuration.

Step 2: Use Operation on your CRUD Now let's use this operation trait on our CrudController so you can see a dummy operation on UI

use \App\Http\Controllers\Admin\Operations\CommentOperation;

Now, let's make changes to it.

Step 3: Setting Up the Routes

Next up, we need to set up the routes for our custom form operation. This is easily done by adding the following code to your CommentOperation trait:

protected function setupCommentRoutes(string $segment, string $routeName, string $controller): void
{
    $this->formRoutes(
        operationName: 'comment',
        routesHaveIdSegment: true,
        segment: $segment,
        routeName: $routeName,
        controller: $controller
    );
}

Step 4: Adding Default Settings

Now, let's add some default settings and buttons for the operation. Inside the CommentOperation trait, you can use the setupCommentDefaults() method for this purpose. Here's an example:

protected function setupCommentDefaults(): void
{
    $this->formDefaults(
        operationName: 'comment',
        // buttonStack: 'line', // alternatives: top, bottom
        // buttonMeta: [
        //     'icon' => 'la la-home',
        //     'label' => 'Comment',
        //     'wrapper' => [
        //         'target' => '_blank',
        //     ],
        // ],
    );
}

Step 5: Adding Form Fields

Now, let's move on to adding fields to the form. We'll make it easy for ourselves by letting the operation define the fields. Inside the setupCommentDefaults() method, add the fields like this:

public function setupCommentDefaults(): void
{
    // ...

    $this->crud->operation('comment', function () {
        $this->crud->field('message')->type('textarea');
    });
}

Step 6: Handling Form Submissions

Last but not least, let's handle the form submissions and perform the desired operation. In the CommentOperation trait, we have the postCommentForm() method that handles the POST request. Customize it with your specific logic, like this:

public function postCommentForm(int $id)
{
    $this->crud->hasAccessOrFail('comment');

    return $this->formAction($id, function ($inputs, $entry) {
        // Your logic goes here...
        // dd('got to ' . __METHOD__, $inputs, $entry);

        // Show a success message
        \Alert::success('Something was done!')->flash();
    });
}

That's it! You've successfully created a working operation with a Backpack form.

For more information and in-depth examples, be sure to check out the official documentation. It's full of helpful tips and tricks to take your custom form building to the next level.

Now go ahead, create awesome custom forms, and make your Laravel projects even more powerful! Happy coding! 🎉