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

SOLVED

Calling Clientlib inside html

JakeCham
Level 4
Level 4

I have a clientlib in two different places.Rather calling template/clientlib.html two times is that fine to call it once.

 

Solution 1

<sly data-sly-use.clientlib="/libs/granite/sightly/template/clientlib.html">

      <sly data-sly-call=${clientlib.js @ categories='aaa'}/>

</sly>

<sly data-sly-use.clientlib="/libs/granite/sightly/template/clientlib.html">

      <sly data-sly-call=${clientlib.js @ categories='bbb'}/>

</sly>

 

Solution 2

<sly data-sly-use.clientlib="/libs/granite/sightly/template/clientlib.html">

      <sly data-sly-call=${clientlib.js @ categories='aaa'}/>

       <sly data-sly-call=${clientlib.js @ categories='bbb'}/>

</sly>

 

What is the difference between solution 1 and solution 2.If error occurred in clientlib which category is 'aaa' then clientlib which category is 'bbb' is loading fine ?   

1 Accepted Solution
asutosh_jena
Correct answer by
Community Advisor
Community Advisor

Hi @JakeCham 

If you want to load 2 different clientlibs at 2 different place (i.e. in 2 different files) then you will need to call the clientlib.html template multiple times.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

But if you want to load 2 different clientlibs in a single file, then you do not need to call the clientlib.html template multiple times. A single time instantiation is enough for this.

<html data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <head>
        <!-- HTML meta-data -->
        <sly data-sly-call="${clientlib.css @ categories='myCategory'}"/>
    </head>
    <body>
        <!-- page content -->
        <sly data-sly-call="${clientlib.js @ categories='myCategory'}"/>
    </body>
</html>

If there is an error in one of the clientlib, still the other clientlib will load as it's not dependent on each other.

 

Here is the adobe document for reference:

https://experienceleague.adobe.com/docs/experience-manager-htl/using/getting-started/getting-started...

 

Hope this helps!

Thanks!

View solution in original post

1 Reply
asutosh_jena
Correct answer by
Community Advisor
Community Advisor

Hi @JakeCham 

If you want to load 2 different clientlibs at 2 different place (i.e. in 2 different files) then you will need to call the clientlib.html template multiple times.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

But if you want to load 2 different clientlibs in a single file, then you do not need to call the clientlib.html template multiple times. A single time instantiation is enough for this.

<html data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <head>
        <!-- HTML meta-data -->
        <sly data-sly-call="${clientlib.css @ categories='myCategory'}"/>
    </head>
    <body>
        <!-- page content -->
        <sly data-sly-call="${clientlib.js @ categories='myCategory'}"/>
    </body>
</html>

If there is an error in one of the clientlib, still the other clientlib will load as it's not dependent on each other.

 

Here is the adobe document for reference:

https://experienceleague.adobe.com/docs/experience-manager-htl/using/getting-started/getting-started...

 

Hope this helps!

Thanks!

View solution in original post