What are AEM ExtraClientlibs?

When dealing with cq:ClientLibraryFolder (node type), you may have come across a property called extraClientlibs. What are extraClientlibs and how does it work?

As you may recall, when you want to add custom functionality or styling to the Touch Dialogues (in edit author mode, editor.html), we must include cq.authoring.editor.sites.page as a dependency and cq.authoring.editor.sites.page.hook as a category to our client library’s configuration. The configuration would look something like this:

1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    dependencies="[cq.authoring.editor.sites.page]"
    categories="[cq.authoring.editor.sites.page.hook]"/>

Diagram of how the ccq.authoring.editor.sites will be triggered.

This configuration above will evoke the client library every time the Touch UI dialogue is triggered, for all components. Illustrated above, from the author (editor.html), clicking on any component throughout the entire AEM platform, will invoke the client library.

Benefits of using cq.authoring.editor.sites.page:

  1. Client libraries created like this will be invoked for all components (when the Touch UI is open)

But however, what happens if you only want your custom functionality or styling to be only called by ONE component? Well, we use the extraClientlibs property from the component’s Touch UI dialogue.

Diagram of how the extraClientlibs will be triggered.

Illustrated above, you will notice that adding String[] extraClientlibs to the cq:dialog (root node) of the component, the client library will only be invoked, only targeting the Touch UI dialogue that is associated to a specific component.

Benefits of using extraClientlibs:

  1. Touch UI will only invoke the targeted client library that is configured.
  2. Client libraries can be created to be specifically used for a particular component.

Looking for Help? Or need a mentor?

If you need help to super drive your AEM career road map, you can hire me for a one-hour session on codementor.io; We can work together on a price works just for you. https://www.codementor.io/@briankasingli. I'd be happy to help you along your way to becoming a high-quality AEM full-stack engineer.

Was this post helpful?

Hello, I am an enthusiastic Adobe Community Advisor and a seasoned Lead AEM Developer. I am currently serving as an AEM Technical Lead at MNPDigital.ca, bringing over a decade of extensive web engineering experience and more than eight years of practical AEM experience to the table. My goal is to give back to the AEM Full Stack Development community by sharing my wealth of knowledge with others. You can connect with me on LinkedIn.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top