How to add custom sections to CRUD tables and forms

In a recent project, I needed to customize my List and Create operations, to basically add content before or after the existing views....

In a recent project, I needed to customize my List and Create operations, to basically add content before or after the existing views.

Turns out, in Backpack it's super-easy to do that, using Widgets. Widgets (aka cards, aka charts, aka graphs) provide a simple way to insert blade files into admin panel pages. You can use them to insert cards, charts, notices or custom content into pages. You can find the available widgets here.

Each Backpack operation has a few places where you can "push" your own content, using Widgets. For example, here's where you can push widgets in the List, Create and Update Operations:

• before_content:

• after_content

Let's place our custom view:

In my project, I just needed to include a stock chart in the List operation. So I had to choose between the above two sections where I can push the widget. I created a blade file that I wanted to show up and added it inside setupListOperation() function.

public function setupListOperation()
{    
    Widget::add()
            ->to('after_content')//section
            ->type('view')//widget type
            ->view('stock');//view path
}

Output:

I hope you find it simple and learned something new. Let us know what you think in the comments below.

Tip:

If you want to add Script & CSS to your page, you can use 'script' & 'style' widget:

Widget::add()->type('script')->stack('after_scripts')-content('https://code.jquery.com/ui/1.12.0/jquery-ui.min.js');
Widget::add()->type('style')->stack('after_styles')-content('https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css');