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:
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:
<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!
Hi Rima..Your blog is very helpful.
ReplyDeleteI want my clientLibrary to be loaded solely for the dialog. I applied extraClientlib but still it's not working. any suggestions please.
The property is called 'extraClientlibs' and it's case sensitive.
ReplyDeleteUsing includeclientlib property as well we can get the clientlibs loaded solely for a single component dialog. Which one is better extraclientlibs or includeclientlib. Is there a difference
ReplyDelete