Adding Custom Client Library for AEM Author Editor Touch UI

You can use Clientlibs to extend the default implementation and add new functionality while reusing the default functions, objects, and methods. When customizing, you can create your own clientlib under / apps.

Specifically, when you want to add CSS or JavaScript to your AEM Author Editor, Touch UI Dialogs, you would want to create a new client library. Within your clientlib, it must have the required dependencies and categories.

If you want to learn how to create client libraries for the authoring environment that only target specific components checkout this article here.

The custom clientlib for AEM authoring must follow these rules:

1. depend on the authoring clientlib cq.authoring.editor.sites.page
2. be part of the appropriate cq.authoring.editor.sites.page.hook category


Example

An example of a custom client library created for AEM authoring would live in this path (below), and must have the .context.xml configured like so.
/apps/sourcedcode/clientlibs/clientlib-authoring

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]"/>

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