Dealing with custom assets in the backend


#1

Hi all,

Let’s assume I have some custom foo.js and I would like foo.js to be available everywhere in the Preside backend. Where would I put or link that file?

Thanks for any ideas, Fabian


#2

There are two parts to this:

  1. Defining your asset in your application or extension’s Sticker bundle
  2. Getting the asset included in the admin layout

1. Defining in Sticker

Ensure that your asset lives under the /assets/ folder of your application or extension - Preside registers any StickerBundles in these directly automatically by convention. Then, within your /assets/StickerBundle.cfc file, register your asset:

component {

    public void function configure( bundle ) {
        // ...
        bundle.addAsset( id="myCustomAdminCss", path="/css/admin/custom/myCustomAdmin.min.css" );
        // ...
    }
}

Tip:, you can use wildcards in the path of the asset like /css/admin/custom/myCustomAdmin.*.min.css so that you can use a tool like Grunt or Gulp and add a cachebuster to the filename when the content changes in the unminified source. The ID in Sticker will remain the same.

See full Sticker docs: http://sticker.readthedocs.io/en/latest/

2. Add css to the layout

To include a sticker asset in a request, you can use:

event.include( "myCustomAdminCss" );

A suitable place to do this to include in all admin requests would be the core Coldbox interceptor preLayoutRender (see https://coldbox.ortusbooks.com/content/full/interceptors/layout-view_events.html). In your registered interceptor, you could do:

component extends="coldbox.system.Interceptor" {

    public void function configure() {}

    public void function preLayoutRender( event, interceptData ) {
        if ( ( interceptData.layout ?: "" ) == "admin" ) {
            event.include( "myCustomAdminCss" );
        }
    }
}

Don’t forget to register your interceptor in /config/Config.cfc:

// ...
interceptors.append( { 
    class="app.interceptors.MyAdminLayoutInterceptor", properties={} 
});
// ...