ClientLibs does not load when create a new page

[babak_abd]

Hi All,

I am trying to load a clientlibs JS when I am creating a new page but it does not work.

What I did:

• Create a person component under /apps/mysample/components/structure/person
• Create a clientlib and dialog for this newly created component
• For clientlib, add new property categories="[person.dialog]"
• For dialog, add new property extraClientlibs ="[person.dialog]"
• Under clientlibs, create js.txt and myscript.js notes
• Modify js.txt and add myscript.js
• Modify myscript.js and add an alert msg in it.

You can check my Example here: Dropbox - MySample.zip

Now when i create a new page, i do not see the alert msg. but after i create it and when i want to modify properties, this alert will fire.

This can be solved if:

• Change category property of clientlib to person.createpagewizard
• Change extraClientlibs property of dialog to person.createpagewizard
• Modify /libs/wcm/core/content/sites/createpagewizard/jcr:content/head/clientlibs and add person.createpagewizard to  categories property

But as we know we should not modify nodes under /libs. So what should I do?

[ankur_rajput]

You can overlay the node in /apps.

[ArpitVarshney]

Hi,

The extraClientLibs added in cq_dialog will be loaded if the component is present on the page.It will not be loaded on the page creation if component is not on the page.

Please read the documentation: AEM Components for the Touch-Optimized UI which says:

"To have your client library loaded solely for your component dialog (i.e. it will not be loaded for another component) you need to set the property extraClientLibs of your dialog to the category name of the client library you have just created. This is advisable if your client library is quite big and/or your field is specific to that dialog and will not be needed in other dialogs."

[ArpitVarshney]

Hi babak​,

The clientlib will be loaded in the page when you edit the dialog first time incase of extraClientlib property.

If you want to load the clientlib in the component rendering. Better to load ClientLib in Component HTL file like below:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"

  data-sly-call="${clientlib.all @ categories='person.dialog'}"/>