Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
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