Skip to content

02_Admin_UI_Assets.md

Latest commit

 

History

History
96 lines (73 loc) · 2.78 KB

02_Admin_UI_Assets.md

File metadata and controls

96 lines (73 loc) · 2.78 KB
Raw

Loading Assets in the Admin UI

If you need to load custom JS or CSS into the admin or editmode UI, you have two options.

Option 1: Via OpenDXP Bundle Interface (recommended)

Add OpenDxpBundleAdminClassicInterface to your bundle class. Use BundleAdminClassicTrait to implement the four required methods:

use OpenDxp\Extension\Bundle\AbstractOpenDxpBundle;
use OpenDxp\Extension\Bundle\OpenDxpBundleAdminClassicInterface;
use OpenDxp\Extension\Bundle\Traits\BundleAdminClassicTrait;

class MyBundle extends AbstractOpenDxpBundle implements OpenDxpBundleAdminClassicInterface
{
    use BundleAdminClassicTrait;

    public function getJsPaths(): array
    {
        return ['/bundles/mybundle/js/admin.js'];
    }

    public function getCssPaths(): array
    {
        return ['/bundles/mybundle/css/admin.css'];
    }
}

With Webpack Encore

Use EncoreHelper to resolve built file paths from entrypoints.json:

use OpenDxp\Helper\EncoreHelper;

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

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

Option 2: Via Event Listener

Subscribe to events from BundleManagerEvents:

<?php

namespace App\EventListener;

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

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

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

    public function onCssPaths(PathsEvent $event): void
    {
        $event->addPaths(['/bundles/app/css/admin.css']);
    }
}

Assets registered via either method are loaded last on OpenDXP startup, in registration order.

See Also