Adding Custom JavaScript and CSS Tutorial

When customizing the admin application, it is often desirable to add JavaScript files to the application.

Set up a resource location for JS files

First, we must hook up a new resource location for our JS files. We can do this by adding the following to applicationContext-admin.xml:

<bean id="jsLocations" class="org.springframework.beans.factory.config.ListFactoryBean">
    <property name="sourceList">
        <list>
            <value>/js/</value>
        </list>
    </property>
</bean>
<bean class="org.broadleafcommerce.common.extensibility.context.merge.LateStageMergeBeanPostProcessor">
    <property name="collectionRef" value="jsLocations" />
    <property name="targetRef" value="blJsLocations" />
</bean>

Or by adding a @Merge entry to your configuration class:

@Merge("blJsLocations")
public List<String> customJsLocations() {
    return Collections.singletonList("classpath:/js/");
}

This location will serve files that live in admin/src/main/webapp/js, so that's where you would want to place your files. Of course, you are certainly able to configure a different location if you prefer.

Add JS files to the out of box bundles

After that, we want to attach our JS files to the appropriate out of box bundle in the admin application. This will allow us to not have to override footer.html, which will help prevent future effort when upgrading Broadleaf.

We can attach our files with the following XML, also in applicationContext-admin.xml:

<bean id="blCustomAdminJsFileList" class="org.springframework.beans.factory.config.ListFactoryBean" >
    <property name="sourceList">
        <list>
            <value>admin/custom-product.js</value>
        </list>
    </property>
</bean>
<bean class="org.broadleafcommerce.common.extensibility.context.merge.LateStageMergeBeanPostProcessor">
    <property name="collectionRef" value="blCustomAdminJsFileList" />
    <property name="targetRef" value="blJsFileList" />
</bean>

Or by adding the following @Merge entry to your configuration class:

@Merge("blJsFileList")
public List<String> adminPrivateDemoStyleJsFileList() {
    return Collections.singletonList("admin/custom-product.js");
}

This snippet will load a file at admin/src/main/webapp/js/admin/custom-product.js after all of the Broadleaf admin JavaScript, but before any field initialization happens.

Set up a resource location and file list reference for CSS files

Similar to overridding JavaScript, there are times where you may need to tweak the out-of-box CSS. Following the same pattern for how the custom JavaScript was configured, a CSS resource location and file list is needed.

Resource Location

This configuration would also be added to applicationContext-admin.xml:

<bean id="customAdminCssLocations" class="org.springframework.beans.factory.config.ListFactoryBean">
    <property name="sourceList">
        <list>
            <value>/css/</value>
        </list>
    </property>
</bean>
<bean class="org.broadleafcommerce.common.extensibility.context.merge.LateStageMergeBeanPostProcessor">
    <property name="collectionRef" value="customAdminCssLocations" />
    <property name="targetRef" value="blCssLocations" />
</bean>

Or by adding a @Merge entry to your configuration class:

@Merge("blCssLocations")
public List<String> customCssLocations() {
    return Collections.singletonList("classpath:/css/");
}

Adding to the File List

Then you need to add a reference to the specific CSS files you want included. These files would be in the resource location defined above. These changes would be included in applicationContext-admin.xml:

<bean id="customAdminCssFileList" class="org.springframework.beans.factory.config.ListFactoryBean" >
    <property name="sourceList">
        <list>
            <value>admin/custom-style.css</value>
        </list>
    </property>
</bean>
<bean class="org.broadleafcommerce.common.extensibility.context.merge.LateStageMergeBeanPostProcessor">
    <property name="collectionRef" value="customAdminCssFileList" />
    <property name="targetRef" value="blCssFileList" />
</bean>

Or, for Java configuration, by adding the following @Merge entry to your configuration class:

@Merge("blCssFileList")
public List<String> customAdminCssFileList() {
    return Collections.singletonList("admin/custom-style.css");
}