How to restrict secondary cta without authoring Primary cta using sightly

[Anilkumar9]

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>

[Raja_Reddy · Accepted solution]

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.

[Anilkumar9]

@Raja_Reddy It's working! Thank you

[arunpatidar]

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}">