Loading Assets in the Admin UI

If you need to load assets (JS, CSS) in the Admin or Editmode UI, you have 2 options, depending on if you do that from a Pimcore Bundle or from somewhere else.

Pimcore Bundles

Just add the PimcoreBundleAdminClassicInterface to your bundle class. The interface prescribes the following methods:

• getJsPaths
• getCssPaths
• getEditmodeJsPaths
• getEditmodeCssPaths

In order to implement all four methods prescribed by the interface you can use the BundleAdminClassicTrait.

Encore

As Pimcore uses Encore to build its assets, it also provides an EncoreHelper-Class to include built files in your bundle.

You can use EncoreHelper::getBuildPathsFromEntryPoints to get all paths from the assets and load them with the methods mentioned above.

This command accepts the path to entrypoints.json file ending as string and returns an array with paths to the built files.

The following example illustrates this for loading the built webencore-files:

use Pimcore\Extension\Bundle\AbstractPimcoreBundle;
use Pimcore\Extension\Bundle\PimcoreBundleAdminClassicInterface;
use Pimcore\Extension\Bundle\Traits\BundleAdminClassicTrait;
use Pimcore\Extension\Bundle\Traits\PackageVersionTrait;
use Pimcore\Helper\EncoreHelper;

class EncoreBundle extends AbstractPimcoreBundle implements PimcoreBundleAdminClassicInterface
{
    use BundleAdminClassicTrait;
    use PackageVersionTrait;

    public function getCssPaths(): array
    {
        return EncoreHelper::getBuildPathsFromEntrypoints($this->getPath() . '/public/build/encorebundle/entrypoints.json', 'css');
    }

    public function getJsPaths(): array
    {
        return EncoreHelper::getBuildPathsFromEntrypoints($this->getPath() . '/public/build/encorebundle/entrypoints.json');
    }

    public function getPath(): string
    {
        return \dirname(__DIR__);
    }

    // ...
}

Event Based

You can add additional paths to load by handling the events defined on BundleManagerEvents. For example, to load the JS file when loading the admin UI, implement an event listener like the following (please see Events for details on how to implement and register event listeners):

<?php

namespace App\EventListener;

use Pimcore\Event\BundleManager\PathsEvent;
use Pimcore\Event\BundleManagerEvents;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class AdminAssetsListener implements EventSubscriberInterface
{
    public static function getSubscribedEvents(): array
    {
        return [
            BundleManagerEvents::JS_PATHS => 'onJsPaths'
        ];
    }

    public function onJsPaths(PathsEvent $event): void
    {
        $event->setPaths(array_merge($event->getPaths(), [
            '/bundles/app/js/admin.js'
        ]));
    }
}