Adobe Experience Manager Sites & More

jakdevmode · 5/5/22

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

Anish-Sinha · 5/5/22

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.

View solution in original post

Anish-Sinha · 5/5/22

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.

jakdevmode · 5/6/22

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 · 5/5/22

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

jakdevmode · 5/6/22

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

arunpatidar · 5/6/22

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=... to know more about data-sly-template and data-sly-call

Arun Patidar

jakdevmode · 5/6/22

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.

jakdevmode · 5/9/22

@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 · 5/10/22

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

jakdevmode · 5/11/22

@arunpatidar

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

Adobe Experience Manager Sites & More

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

Arun Patidar

Arun Patidar

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe