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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

9 Replies

Avatar

Correct answer by
Level 10

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.

Avatar

Level 2

Hi @anish-s 

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.

Avatar

Level 6

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 

Avatar

Level 2

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

Avatar

Community Advisor

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

Avatar

Level 2

Hi @Arun_Patidar 

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.

Avatar

Level 2

@anish-s @Arun_Patidar @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.

Screen Shot 2022-05-09 at 3.54.48 PM.png

 

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

Thank you so much for everyone's help.

Avatar

Community Advisor

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

Avatar

Level 2

@Arun_Patidar 

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