Clientlib query | Community
Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Daniel_Gordon
Daniel_GordonAccepted solution
Employee
Jan 25, 2021 8:06 PM UTC

In addition to what @briankasingli  mentioned you can also embed the component specific library inside a global/base clientlibrary for example if you have a Header specific library:

 

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" allowProxy="{Boolean}true" categories="mysite.header"/>

  

And then you have a Base library that embeds individual component libraries:

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" allowProxy="{Boolean}true" categories="[wknd.base]" embed="[core.wcm.components.accordion.v1,core.wcm.components.tabs.v1,core.wcm.components.carousel.v1,mysite.header, mysite.grid, mysite.footer]"/>

This can minimize the number of HTTP requests and not have to update the HTL for each new component library.

 

This tutorial also has some good instructions on client library organization for a sites implementation: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/client-side-libraries.html?lang=en#organization

View reply

5 replies

VeenaVikraman
VeenaVikraman
New Participant
Jan 26, 2021 5:02 PM UTC

Unless you mention the libraries which needs to be picked up explicitly ( as explained by @briankasingli  and @daniel_gordon ) , AEM will not be able to identify which file it needs to pick for your component. You have to define the clientLibs categories and include that to either head or foot 

Translate
    Daniel_Gordon
    Daniel_GordonAccepted solution
    Employee
    Jan 25, 2021 8:06 PM UTC

    In addition to what @briankasingli  mentioned you can also embed the component specific library inside a global/base clientlibrary for example if you have a Header specific library:

     

    <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" allowProxy="{Boolean}true" categories="mysite.header"/>

      

    And then you have a Base library that embeds individual component libraries:

    <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" allowProxy="{Boolean}true" categories="[wknd.base]" embed="[core.wcm.components.accordion.v1,core.wcm.components.tabs.v1,core.wcm.components.carousel.v1,mysite.header, mysite.grid, mysite.footer]"/>

    This can minimize the number of HTTP requests and not have to update the HTL for each new component library.

     

    This tutorial also has some good instructions on client library organization for a sites implementation: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/client-side-libraries.html?lang=en#organization

    Translate
      BrianKasingli
      BrianKasingli
      New Participant
      Jan 25, 2021 4:08 PM UTC

      You will need to ensure that the client library is a valid client library, allowProxy is true, and the client library and exists under /apps/my-site/*. For example /apps/my-site/components/structure/header/clientlib.

      To reach the CSS and JS, you will need to call http://localhost:4502/etc.clientlibs/my-site/components/structure/header/clientlib.js

      For example, a valid client library .XML would look something like this:

       

      <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" allowProxy="{Boolean}true" categories="mysite.header"/>

       

      To use your client library using sightly, you can use the snippets below:

      <head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"> <!--for css+js --> <meta data-sly-call="${clientLib.all @ categories='mysite.header'}" data-sly-unwrap></meta> <!-- only js --> <meta data-sly-call="${clientLib.js @ categories='mysite.header'}" data-sly-unwrap></meta> <!-- only css --> <meta data-sly-call="${clientLib.css @ categories='mysite.header'}" data-sly-unwrap> </meta> </head>

       

      Translate
        Shaheena_SheikhAuthor
        Level 6
        Jan 26, 2021 6:04 AM UTC
        so if i have a valid clientlib inside my component folder, that wont get called automatically and i have to include it to call it.
        Translate
        Terms & ConditionsAccessibility statement

        Loading footer...