How I can include a client library based on component, AEM 6.5 ? | Community
Skip to main content
Abhishekty
Abhishekty
Level 4
February 25, 2022
Solved

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

  • February 25, 2022
  • 5 replies
  • 6164 views

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.

 

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 @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-clientlibs-in-aem-adobe-cq/m-p/166949



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

5 replies

JeevanRaj
Community Advisor
JeevanRajCommunity Advisor
Community Advisor
February 25, 2022

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

    milind_bachani
    Adobe Employee
    milind_bachaniAdobe EmployeeAccepted solution
    Adobe Employee
    February 25, 2022

    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-clientlibs-in-aem-adobe-cq/m-p/166949



    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

      Anish-Sinha
      Adobe Employee
      Anish-SinhaAdobe Employee
      Adobe Employee
      February 28, 2022

      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'}"/>
       
       
        Abhishekty
        AbhishektyAuthor
        Level 4
        February 28, 2022

        Thanks @anish-sinha 

          A
          Adobe Employee
          AnikaAgAdobe Employee
          Adobe Employee
          July 27, 2022

          In this context, i have a similar scenario where we are using core component and style system. Now with style system my css file size will increase. Now is there a way to optimize the load of required CSS only in case of specific core components getting used in that page?

           

           

          VuongNguyen
          VuongNguyen
          Level 2
          July 24, 2024

          You have two approaches:

          1. Apply JavaScript to all components for use in cq:dialog purposes. For details, refer to: https://www.flagtick.com/snippet/aem/show-hide-dialog-fields-with-a-checkbox-in-aem/

          2. Apply JavaScript to specific components. For more information, refer to the relevant documentation here.https://www.flagtick.com/snippet/aem/include-client-libraries-in-aem-component/
            https://www.flagtick.com/snippet/aem/add-clientlibs-in-aem-component/

          Hopefully, these references will be useful for you.

          Terms & ConditionsAccessibility statement

          Loading footer...