Clientlib is not adding for Component specific structure | Community
Skip to main content
T
Tessa_learner1
Level 4
January 20, 2022
Solved

Clientlib is not adding for Component specific structure

  • January 20, 2022
  • 1 reply
  • 773 views

Hi,

I have created locator component for my project. I need to add some .css & .js styles to the locator component. So I have created Clientlib-locator(cq:ClientLibraryFolder) under /apps/myproject/clientlibs but the styles I have put in clientlib-locator is not adding into my webpage. Can someone address this and tell me what went wrong ??

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by milind_bachani

Hi @tessa_learner1 ,

Once clientlib is created you need to invoke in sightly in component.html using :

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

<!--/* for css+js */-->
<sly data-sly-call="${clientLib.all @ categories='your.clientlib'}" data-sly-unwrap />

<!--/* only js */-->
<sly data-sly-call="${clientLib.js @ categories='your.clientlib'}" data-sly-unwrap />

<!--/* only css */-->
<sly data-sly-call="${clientLib.css @ categories='your.clientlib'}" data-sly-unwrap />

</sly>


you can also refer the tutorial:
http://www.aemcq5tutorials.com/tutorials/create-client-libraries-in-aem/

This shows how the folder structure should be and how are you supposed to call the clientlib in component's html markup. Also, if it does not show up on publisher you might have missed allowProxy=true property for clientlib.

Let us know if that does not fix your issue. 

Thanks

1 reply

milind_bachani
Adobe Employee
milind_bachaniAdobe EmployeeAccepted solution
Adobe Employee
January 20, 2022

Hi @tessa_learner1 ,

Once clientlib is created you need to invoke in sightly in component.html using :

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

<!--/* for css+js */-->
<sly data-sly-call="${clientLib.all @ categories='your.clientlib'}" data-sly-unwrap />

<!--/* only js */-->
<sly data-sly-call="${clientLib.js @ categories='your.clientlib'}" data-sly-unwrap />

<!--/* only css */-->
<sly data-sly-call="${clientLib.css @ categories='your.clientlib'}" data-sly-unwrap />

</sly>


you can also refer the tutorial:
http://www.aemcq5tutorials.com/tutorials/create-client-libraries-in-aem/

This shows how the folder structure should be and how are you supposed to call the clientlib in component's html markup. Also, if it does not show up on publisher you might have missed allowProxy=true property for clientlib.

Let us know if that does not fix your issue. 

Thanks

    T
    Tessa_learner1Author
    Level 4
    January 21, 2022

    Thanks @milind_bachani  It worked

      Terms & ConditionsAccessibility statement

      Loading footer...