I've wrote a plugin and I need to add a JavaScript file to all Bacend pages. I tried many methods, but none of them worked.

What does the plugin do that you need to add a javascript file to every single backend page?

Or do you just need a javascript file added to your plugins backend pages?

I want to extend the backend UI with some new features.

You can try $this->addCss and $this->addJs method in you own plugin controller.

For example:

public function __construct() {
    parent::__construct();
    $this->addCss("/plugins/yourname/plugname/assets/css/custom.css", "1.0.0");
    $this->addJs("/plugins/yourname/plugname/assets/js/custom.js", "1.0.0");
}

My plugin hasn't got own pages. I would like to add custom files to every backend page.

Try to create a new backend theme.

I couldn't replace the whole backend theme yet, but I created the custom sidebar. Unfortunately the original problem isn't solved completely. Thank you for your help!

You can subscribe to backend.page.beforeDisplay event in your plugin's boot method.

Example:

use App;
use Event;
...
public function boot()
{
    // Check if we are currently in backend module.
    if (!App::runningInBackend()) {
        return;
    }

    // Listen for `backend.page.beforeDisplay` event and inject js to current controller instance.
    Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) {
        $controller->addJs('/path/to/your/javascript/file.js');
    });
}

This will add file.js to every backend page.

Thank you very much!

I used this to inject some JS for one of my plugins. The plugin had no pages but was an extension of the Users plugin, so to target just the Users backend pages I used this inside the event listener:

if (get_class($controller) === 'RainLab\User\Controllers\Users') {
     $controller->addJs('/plugins/my/plugin/assets/javascript/exportbutton.js');
}

Hi, How do you add some data-attributes to the script tag.

I need to integrate an external plugin script that needs to be declared like that

<script src="https://website.com/script.js" data-api-key="123456789"></script>

I know the $this->addJs method doesn't support data-attributes parameters. If you want to use it, put the script into the index.htm file of your plugins's controller. In the front-end put this code into the default layout of theme.

R. said:

You can subscribe to backend.page.beforeDisplay event in your plugin's boot method.

Example:

use App;
use Event;
...
public function boot()
{
   // Check if we are currently in backend module.
   if (!App::runningInBackend()) {
       return;
   }

   // Listen for `backend.page.beforeDisplay` event and inject js to current controller instance.
   Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) {
       $controller->addJs('/path/to/your/javascript/file.js');
   });
}

This will add file.js to every backend page.

Thank you @R.

Thank you for share this code!

I've been struggling with injecting a js file into my plugin's backend settings page. This works, but is there a simpler method? This should really be trivial but has taken forever to work out: In my Plugin.php....

public function boot()
{
    // Check if we are currently in backend module.
    if (!App::runningInBackend()) {
        return;
    }

    // Listen for `backend.page.beforeDisplay` event and inject js to current controller instance.
    Event::listen('backend.page.beforeDisplay', function($controller, $action, $params) {
        if ($controller instanceof \System\Controllers\Settings && is_array($params) && implode('.', $params) === 'myname.myplugin.settings') {
            $controller->addJs('/plugins/myname/myplugin/assets/js/myscript.js');
        }    
    });
}

Last updated 5 years ago