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]"/> |
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:
- 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.
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:
- Touch UI will only invoke the targeted client library that is configured.
- Client libraries can be created to be specifically used for a particular component.
Example of usage of extraClientlibs in line:7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" jcr:title="Component's Granite UI" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[my.custom.clientlib]"> <content granite:class="cmp-teaser__editor cmp-image__editor" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs"> <items jcr:primaryType="nt:unstructured"> <layout jcr:primaryType="nt:unstructured" jcr:title="Layout" sling:resourceType="granite/ui/components/coral/foundation/container" margin="{Boolean}true" sling:orderBefore="actions"> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" fieldLabel="Layout" name="./layout"> ... |
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?
