Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to restrict secondary cta without authoring Primary cta using sightly

Avatar

Level 3

I have a requirement in component that has Primary and Secondary (both are optional, cannot do secondary without primary)

I had written some logic using sightly

<sly data-sly-test="${featureContent.primaryCta.text}">
<sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
data-sly-call="${temp.ctaTemplate @ cta = featureContent.primaryCta}"/>
</sly>
<!-- secondary CTA -->
<sly data-sly-test="${featureContent.secondaryCta.text}">
<sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
data-sly-call="${temp.ctaTemplate @ cta = featureContent.secondaryCta}"/>
</sly>

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Anilkumar9 

You can add an additional condition to check if the primary CTA is present before rendering the secondary CTA. 

<sly data-sly-test="${featureContent.primaryCta.text}">
  <sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
    data-sly-call="${temp.ctaTemplate @ cta = featureContent.primaryCta}"/>
  <!-- secondary CTA -->
  <sly data-sly-test="${featureContent.secondaryCta.text && featureContent.primaryCta.text}">
    <sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
      data-sly-call="${temp.ctaTemplate @ cta = featureContent.secondaryCta}"/>
  </sly>
</sly>

This will only render the secondary CTA if both the primary and secondary CTAs have text properties.



View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @Anilkumar9 

You can add an additional condition to check if the primary CTA is present before rendering the secondary CTA. 

<sly data-sly-test="${featureContent.primaryCta.text}">
  <sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
    data-sly-call="${temp.ctaTemplate @ cta = featureContent.primaryCta}"/>
  <!-- secondary CTA -->
  <sly data-sly-test="${featureContent.secondaryCta.text && featureContent.primaryCta.text}">
    <sly data-sly-use.temp="${'/apps/gehealthcare/components/atoms/cta/cta.html'}"
      data-sly-call="${temp.ctaTemplate @ cta = featureContent.secondaryCta}"/>
  </sly>
</sly>

This will only render the secondary CTA if both the primary and secondary CTAs have text properties.



Avatar

Community Advisor

Hi @Anilkumar9 
You need restrict this during authoring and in sightly also add an additional condition for secondary CTA

 

<!-- secondary CTA -->
<sly data-sly-test="${featureContent.secondaryCta.text &&featureContent.primaryCta.text}">



Arun Patidar