Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How I can include a client library based on component, AEM 6.5 ?

Avatar

Level 3

Hi,

 

Actually I need to be develop sharing component future and it will have some Javascript code so I am thinking, if this component will be added on the page then only this code will be added on the existing or new Client lib.

 

I think it is possible, if yes please suggest any example or blog?

if any better suggestions for this kindly suggest.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Abhishekty ,

 

These are blogs which talks about approaches you can follow for clientlibs : 

https://aem4beginner.blogspot.com/clientlibs-in-aem63-part2
https://www.blueacornici.com/blog/best-approaches-clientlibs-aem-part-3/



Also, the thread might interest you :
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/best-practices-to-manage-c...



For component specific clientlib, you need to create a cq:ClientLibrary Folder with categories for each component and include that particular category in your sightly. However the major drawback is that the clientlib is loaded for all the components independently present on the page, which means that if you are using same component multiple times on the page , the relevant clientlib will be loaded multiple times.
(More JS/CSS -> More data transfer -> More page load time).

 

However, you can refer the links shared and choose the best approach based on your requirement as it is subjective to use case.


Please feel free to reach out in case of further queries, many thanks.

 

Regards,

Milind

View solution in original post

0 Replies

Avatar

Community Advisor

Hi @Abhishekty 

 

You can create a component specific clientLib and include the clientLib in your component. That way this component specific clientLib will be loaded only if the component is added to the page.

Let me know if this works for your usecase.

 

Thanks

Avatar

Correct answer by
Community Advisor

Hi @Abhishekty ,

 

These are blogs which talks about approaches you can follow for clientlibs : 

https://aem4beginner.blogspot.com/clientlibs-in-aem63-part2
https://www.blueacornici.com/blog/best-approaches-clientlibs-aem-part-3/



Also, the thread might interest you :
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/best-practices-to-manage-c...



For component specific clientlib, you need to create a cq:ClientLibrary Folder with categories for each component and include that particular category in your sightly. However the major drawback is that the clientlib is loaded for all the components independently present on the page, which means that if you are using same component multiple times on the page , the relevant clientlib will be loaded multiple times.
(More JS/CSS -> More data transfer -> More page load time).

 

However, you can refer the links shared and choose the best approach based on your requirement as it is subjective to use case.


Please feel free to reach out in case of further queries, many thanks.

 

Regards,

Milind

Avatar

Level 10

Hi @Abhishekty ,
You can create a client library folder and provide a specific category name. Include the component specific css and JS code in that client library. Now you can include that client library in your component html file. For example, for custom-component, there will be a file custom-component.html, include these lines as per your need,

 

You can include both css and js using the below syntax:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories=['Category-name']}"/>
 
You can load JS and CSS separately wherever needed
<div data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" />
        <!-- Loading only CSS -->
        <sly data-sly-call="${clientlib.css @ categories='category-name'}"/
         <!-- Loading only JS -->
         <sly data-sly-call="${clientlib.js @ categories='category-name'}"/>