Tuesday, 13 June 2017

extraClientlibs in AEM

To define styling and behavior of our AEM components, we create client libraries that defines our custom CSS and JS. In order to create clientlibs that load only in the Authoring mode, the general practice is to create a client library and load that only in the Author mode:

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design}" 
data-sly-call="${clientlib.js @categories='custom.authorjs'}" /> </sly>

Further, if we want our client library loaded for all dialogs, we can set the category property to 'cq.authoring.dialog'. This would let the client library load for all dialogs.

This created performance issues sometimes when my client library is too big and I try loading it in all dialogs even when it is not needed. Sometimes, I would just want to have my client library only for a specific component's dialog.

To have my client library loaded solely for my component dialog, I need to the set the property 'extraClientLibs' of my dialog to the category name of the client library.

Here is an example:

Hope this helps!

No comments:

Post a Comment