including client lib inside the template | Community
Skip to main content
mudaliar847906
mudaliar847906
Level 2
Sep 21, 2021 8:33 AM UTC
Solved

including client lib inside the template

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

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Sanjay_Bangar
Sanjay_BangarAccepted solution
New Participant
Sep 23, 2021 9:10 AM UTC

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

 

View reply

8 replies

Sanjay_Bangar
Sanjay_BangarAccepted solution
New Participant
Sep 23, 2021 9:10 AM UTC

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

 

Translate
    kautuk_sahni
    kautuk_sahni
    Employee
    Sep 23, 2021 12:48 PM UTC

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

    Translate
    Kautuk Sahni
    Anny0505
    Anny0505
    New Participant
    Sep 21, 2021 6:05 PM UTC

    @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

    Translate
      Vijayalakshmi_S
      Vijayalakshmi_S
      Level 10
      Sep 21, 2021 1:04 PM UTC

      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)

      Translate
        Suraj_Kamdi
        Suraj_Kamdi
        New Participant
        Sep 21, 2021 11:13 AM UTC

        @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>

         

        Translate
          Fanindra_Surat
          Fanindra_Surat
          New Participant
          Sep 21, 2021 9:15 AM UTC

          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
           
          Translate
            Rohit-Negi
            Rohit-Negi
            Level 3
            Sep 21, 2021 8:53 AM UTC

            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!

            Translate
              Kishore_Kumar_
              Kishore_Kumar_
              Level 9
              Sep 21, 2021 8:50 AM UTC

              Put inside the template and check please.

               

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

              Translate
                Terms & ConditionsAccessibility statement

                Loading footer...