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
BedrockMission!

Learn More

View all

Sign in to view all badges

Clientlib query

Avatar

Avatar
Applaud 25
Level 2
Shaheena_Sheikh
Level 2

Likes

2 likes

Total Posts

96 posts

Correct Reply

1 solution
Top badges earned
Applaud 25
Applaud 5
Affirm 1
Validate 10
Validate 1
View profile

Avatar
Applaud 25
Level 2
Shaheena_Sheikh
Level 2

Likes

2 likes

Total Posts

96 posts

Correct Reply

1 solution
Top badges earned
Applaud 25
Applaud 5
Affirm 1
Validate 10
Validate 1
View profile
Shaheena_Sheikh
Level 2

25-01-2021

If I add a clientlib files under my component package, will that get automatically picked or do I need to call it in my html/js files?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
dgordon86
Employee

25-01-2021

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-devel...

Answers (2)

Answers (2)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

611 likes

Total Posts

589 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

611 likes

Total Posts

589 posts

Correct Reply

230 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

25-01-2021

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>

 

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

471 likes

Total Posts

1,039 posts

Correct Reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

471 likes

Total Posts

1,039 posts

Correct Reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

26-01-2021

Unless you mention the libraries which needs to be picked up explicitly ( as explained by @BrianKasingli  and @dgordon86 ) , 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