Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How do I add extra CSS or JS to a CRUD page in Laravel Backpack
    Laravel Backpack custom CSS custom JavaScript CRUD pages add CSS add JavaScript Laravel Backpack customization


How do I add extra CSS or JS to a CRUD page in Laravel Backpack


To add extra CSS or JavaScript to a specific CRUD page in Laravel Backpack, you can follow these steps:

1. Create a custom CSS/JS file: Create a new CSS or JavaScript file in your project's `resources/assets/css` or `resources/assets/js` directory, respectively. For example, you could create a file named `custom-crud.css` or `custom-crud.js`.

2. Include the custom file in the CRUD view: In your CRUD controller, override the `setup()` method and use the `addCss()` or `addJs()` methods to include your custom CSS or JavaScript file.

php
public function setup()
{
    $this->crud->addCss('css/custom-crud.css');
    $this->crud->addJs('js/custom-crud.js');

    // Other CRUD setup code
}

Alternatively, you can add the custom CSS/JS files in the `config/backpack/base.php` file under the `scripts` and `styles` sections:

php
// config/backpack/base.php
'scripts' => [
    'packages/backpack/base/js/admin.js',
    'js/custom-crud.js',
],
'styles' => [
    'packages/backpack/base/css/admin.css',
    'css/custom-crud.css',
],

This will include the custom CSS and JavaScript files on all CRUD pages.

3. Customize the CSS/JS: In your custom CSS or JavaScript file, you can target specific CRUD operations or sections using the `bp-section` attribute provided by Backpack. For example:

css
/* custom-crud.css */
[bp-section="crud-operation-create"] {
    /* Add custom styles for the create operation */
}

[bp-section="crud-operation-update"] {
    /* Add custom styles for the update operation */
}

javascript
// custom-crud.js
document.querySelectorAll('[bp-section="crud-operation-create"]').forEach((element) => {
    // Add custom JavaScript for the create operation
});

document.querySelectorAll('[bp-section="crud-operation-update"]').forEach((element) => {
    // Add custom JavaScript for the update operation
});

By following these steps, you can easily add custom CSS and JavaScript to specific CRUD pages in your Laravel Backpack application.

Citations:
[1] https://backpackforlaravel.com/docs/6.x/crud-how-to
[2] https://backpackforlaravel.com/docs/6.x/crud-operations
[3] https://github.com/Laravel-Backpack/CRUD/issues/290
[4] https://backpackforlaravel.com/articles/tips-and-tricks/once-in-a-while-re-publish-backpack-s-css-and-js-assets
[5] https://stackoverflow.com/questions/54177436/how-to-add-custom-javascript-in-laravel-backpack