including client lib inside the template

[mudaliar847906]

Hi Team,

I have component in that html file have codelike below.

In that i need to add client library to make some css change i did by adding data sly but  css is not reflrcting below is screen shot

Any one how how to specify the client lib inside template tage let me know.

Regards

Manikantha R

[Kishore_Kumar_]

Put inside the template and check please.

Also generally create a clientlibs at a component level and then embed in your page/base clientlibs.

[Rohit-Negi]

Hi @mudaliar847906 

you have used data-sly-use.clientlib and in  data-sly-call you are using clientLib(L as capital) , can you check if that have any issue.

If not then can you put both these under template tag as:

<template data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-call="${clientLib.css @ categories='test.clientlibs'}" >

Thanks!

[Fanindra_Surat]

Hi @mudaliar847906 -

The variable names in data-sly-use and data-sly-call need to be of same case. They are case sensitive.

Either change the first line to data-sly-use.clientLib OR update the second line to clientlib.css

Thanks,

Fani

[Suraj_Kamdi]

@mudaliar847906 

Use this code

<template data-sly-template.demo="${@ someVariable}" >
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories=test1}"></sly>
    <sly data-sly-call="${clientlib.js @ categories=test2}"></sly>
</sly>
</template>

[Vijayalakshmi_S]

Hi @mudaliar847906,

We can avoid an additional <sly> and make use of the existing <template> tag itself for block statements data-sly-use and data-sly-call next to data-sly-template

<template data-sly-template.tempOne="${ @ page}" data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='clientlibCategoryName'}">
    <h4>Content from separate Template file, origin page : ${page.path}</h4>
</template>

This will work and cross check once from clientlibs end as well (availability of css.txt file with inclusion of desired CSS files)

[Aruna_surukunta_]

@mudaliar847906 ,

I believe you have component which is tagged to your template. Please create clientlibs folder as shown below. add your  css, js, css.txt, js.txt and create props dependencies,categories etc.

cq:ClientLibraryFolder] > sling:Folder
  - dependencies (string) multiple
  - categories (string) multiple
  - embed (string) multiple
  - channels (string) multiple

and add categories as shown in below to your page component.

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"><sly data-sly-call="${clientlib.all @ categories='we-retail.dependencies'}"></sly><sly data-sly-call="${clientlib.css @ categories='we-retail.base'}"></sly></sly>

Try to create a page sing your template and open the page in-cognito window and see your css/js applied to your template.

Thanks,

Aruna

[Sanjay_Bangar · Accepted solution]

Hi @mudaliar847906 ,

         Please check the syntax for calling the css.one more thing if you want to call css or js components specific your component then you can directly call in your HTL. Like below

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

Altenate way to call your clientlibs you need to embed your clientlibs to base clientlibs.

Kr,

Sanjay

[kautuk_sahni]

@Sanjay_Bangar Goos to have greate AEM SME in our Community. Keep the great work going.