data-sly-call is not being called or invoked in HTL. | Community
Skip to main content
J
jakdevmode
Level 2
May 5, 2022
Solved

data-sly-call is not being called or invoked in HTL.

  • May 5, 2022
  • 4 replies
  • 4135 views

Hi there, 
I'm relatively new to AEM and I need some assistance. 

The following data-sly-call is not being called, invoked or rendered and I don't know WHY? It seems to be working in other components but doest not work on others.

<sly data-sly-call="${clientlib.ctagroup @ ctaGroupModel=ctaGroup}"></sly>

 
In project.html file, at the top of my page, I am using:

<sly data-sly-use.clientlib="/apps/myproject/components/sightly-templates/ctagrouplegal/ctagrouplegal.html" ></sly>
<sly data-sly-use.ctaGroup="com.aem.myproejct.core.components.models.CTAGroup"></sly>

 then in the middle of my project.html page, i am using:

<div class="cta-container">
    <sly data-sly-call="${clientlib.ctagroup @ ctaGroupModel=ctaGroup}"></sly>
</div>

In my dialog .content.xml file, I am using:

<callctalinks
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/include"
        path="/apps/myproject/components/base/_ctagroup/content/items/ctaLinks"/>

What am i missing or doing wrong? As i said, it seems to be working fine on other components.
Your help is greatly appreciated.

Thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anish-Sinha

Hi @jakdevmode ,

The object of clientlib you are creating could be the issue-

Please refer the below code sample - 

<head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

<!--/* for css+js */-->
<meta data-sly-call="${clientLib.all @ categories='your.clientlib'}" data-sly-unwrap></meta>

<!--/* only js */-->
<meta data-sly-call="${clientLib.js @ categories='your.clientlib'}" data-sly-unwrap></meta>

<!--/* only css */-->
<meta data-sly-call="${clientLib.css @ categories='your.clientlib'}" data-sly-unwrap></meta>

</head>

For each component, you will have to create the clientlib object as it is created in 1st line. If you just include in top of your page (only in page component), the other components will not inherit the object. If you are writing the data-sly-call attribute in you component html, you have to re-create the clientlib object in the same way it is created in above sample code.

4 replies

Anish-Sinha
Adobe Employee
Anish-SinhaAdobe EmployeeAccepted solution
Adobe Employee
May 6, 2022

Hi @jakdevmode ,

The object of clientlib you are creating could be the issue-

Please refer the below code sample - 

<head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

<!--/* for css+js */-->
<meta data-sly-call="${clientLib.all @ categories='your.clientlib'}" data-sly-unwrap></meta>

<!--/* only js */-->
<meta data-sly-call="${clientLib.js @ categories='your.clientlib'}" data-sly-unwrap></meta>

<!--/* only css */-->
<meta data-sly-call="${clientLib.css @ categories='your.clientlib'}" data-sly-unwrap></meta>

</head>

For each component, you will have to create the clientlib object as it is created in 1st line. If you just include in top of your page (only in page component), the other components will not inherit the object. If you are writing the data-sly-call attribute in you component html, you have to re-create the clientlib object in the same way it is created in above sample code.

    J
    jakdevmodeAuthor
    Level 2
    May 6, 2022

    Hi @anish-sinha 

    Thanks for your reply. I saw a similar post before and I tried it but still no luck. Any other suggestions?
    The thing is, it works fine when I use it on other components, but not working on the page i wanna use.
    Thanks again.

      JeevanRaj
      Community Advisor
      JeevanRajCommunity Advisor
      Community Advisor
      May 6, 2022

      Hi @jakdevmode 

       

      Your component doesn't have the scope to the variable "clientlib". Try adding the below line of code above the data-sly-use.

      <sly data-sly-use.clientlib="/apps/myproject/components/sightly-templates/ctagrouplegal/ctagrouplegal.html" ></sly>

       

      Thanks 

        J
        jakdevmodeAuthor
        Level 2
        May 6, 2022

        Hi @jeevanraj 
        Thanks for the reply. I actually tried that too but didn't work. Do you have any other suggestions?
        Thanks.

          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          May 6, 2022

          Hi,

          you are missing the template part of code.

           

          Please check https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html?lang=en#template-call to know more about data-sly-template and data-sly-call

          Arun Patidar
            J
            jakdevmodeAuthor
            Level 2
            May 6, 2022

            Hi @arunpatidar 

            thanks for the reply. I did try it as well, but still no luck. As I mentioned above, it works fine on other components, but not on the page i wanna use. Please advise. Thanks again.

              J
              jakdevmodeAuthor
              Level 2
              May 9, 2022

              @anish-sinha @arunpatidar @jeevanraj 
              I was able to figure out why it was not working. It's because of my dialog structure.
              When I nest the ctaLinks inside the multifield, inside the nav, it's not working.

              When I use it OUTSIDE the multifield, it's working.

              Since this is multifield, I need this ctaLinks to be nested inside multifield, so I could create multiple ctas for each card. I hope you understand what I am trying to achieve.

               

              Could you please let me know what am I missing or doing wrong?

              Thank you so much for everyone's help.

                arunpatidar
                Community Advisor
                arunpatidarCommunity Advisor
                Community Advisor
                May 10, 2022

                HI,

                You can use the below code to get multifield items in a list

                https://github.com/arunpatidar02/aem63app-repo/blob/master/demo/test.txt
                Arun Patidar
                  J
                  jakdevmodeAuthor
                  Level 2
                  May 11, 2022

                  @arunpatidar 

                  thank you for your response. I appreciate that. I will give it a try.

                    Terms & ConditionsAccessibility statement

                    Loading footer...