This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

gergo85
gergo85

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.

Taylor Digital
Taylor Digital

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?

gergo85
gergo85

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

jasonwong
jasonwong

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");
}
gergo85
gergo85

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

jasonwong
jasonwong

Try to create a new backend theme.

gergo85
gergo85

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!

R.
R.

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.

gergo85
gergo85

Thank you very much!

octubreprofavor
octubreprofavor

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');
}
Troiscent
Troiscent

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>
gergo85
gergo85

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.

miroslav.shubin
miroslav.shubin

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.

gergo85
gergo85

Thank you for share this code!

laszlo.zenware.io
laszlo.zenware.io

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

1-15 of 15

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.