How to add multiple CTA on different tabs in cq dialog of a component?

[surenk]

I have a CTA component. I need to show 2 separate instances of CTA in a component. The component dialog has 2 tabs - Primary CTA and Secondary CTA. The blue is showing 2 instance but both are referring to the same content. What am I doing wrong?

cq_dialog.xml

<primarycta
   jcr:primaryType="nt:unstructured"
   jcr:title="Primary CTA"
   sling:resourceType="granite/ui/components/coral/foundation/container"
   margin="{Boolean}true"
   name="./primarycta">
   <items jcr:primaryType="nt:unstructured">
     <columns
       jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
       margin="{Boolean}true">
       <items jcr:primaryType="nt:unstructured">
          <include
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/include"
        path="/apps/eb/components/content/cta/cq:dialog/content/items/tabs/items/properties/items/columns/items/column">
           </include>
        </items>
      </columns>
    </items>
 </primarycta>
 <secondarycta
    jcr:primaryType="nt:unstructured"
    jcr:title="Seondary CTA"
    sling:resourceType="granite/ui/components/coral/foundation/container"
    margin="{Boolean}true"
    name="./secondarycta">
    --- same as above -------
</secondarycta>

component.html

    <section
        data-sly-use.model="com.web.models.component.TextImageColumn"
        class="cmp-tc"
        data-sly-use.text="eb/components/content/text/text.html"
        data-sly-use.image="eb/components/content/image/image.html"
        data-sly-use.textModel="com.adobe.cq.wcm.core.components.models.Text"
        data-sly-use.primarycta="eb/components/content/cta/cta.html"
        data-sly-use.primaryctaModel="com.web.models.component.Cta"
        data-sly-use.secondarycta="eb/components/content/cta/cta.html"
        data-sly-use.secondaryctaModel="com.web.models.component.Cta"
        id="${model.componentId}">
   ...
   ...
   <sly data-sly-call="${primarycta.renderCta}" />
   ...
   <div class="cmp-ti2c-content__second-cta">
      <sly data-sly-call="${secondarycta.renderCta}" />
   </div>

Both CTAs show the same Title:

Titles for 2 cta's are stored in the same node, below:

[Lavanya_Pejjayi]

Hi surenk,

Could you please check the  below code  from "component.html". 

 a) It is missing the model class name.  You should call same like Primary button.   ${model.secondarycta.renderCta}

<div class="cmp-ti2c-content__second-cta">
      <sly data-sly-call="${secondarycta.renderCta}"/>
   </div>

I hope this helps.

Thanks.

[surenk]

Good observation @Lavanya_Pejjayi but that did not resolve the issue. I was trying a few options and may have added the code. I updated the component html in original question.

[Umesh_Thakur]

I am not able to understand why is the use case of data-sly-use.primaryCta="..../cta.html"  I have heard that we can only use either java or javascript with the USE api.

so have a look on that part.

[surenk]

We can use as below to refer to the template of the component we are referring to. 

For example:

cta.html 

<template data-sly-template.renderCta="${ @ style, ... }">
    <div class="cmp-cta ${model.ctaAt}"
    ...

Another-Component.html

<section
  data-sly-use.model="com.eb.web.models.component.TextColumn"
  data-sly-use.text="eb/components/content/text/text.html"
  data-sly-use.cta="eb/components/content/cta/cta.html"
  ..

  <sly data-sly-call="${cta.renderCta}" />
  ...
</section>

[Ritesh_Mittal]

Hi @surenk ,

I am assuming your Sling Model object is 'primaryctaModel' and 'secondaryctaModel', where you have put getters for the objects, whereas you are trying to get object value using primarycta and secondarycta. Have you tried putting debugger in the Sling Model and see if the values are being populated fine. since you are storing both CTA title as comma separated, so again assuming the separation logic is there in Sling Model.

[surenk]

Thanks for the suggestions. 

Re: this https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/touch-ui-dialog-include-pa... when we use "include" , we cannot control the name of the component. So this was causing both primary and secondary cta's to refer to the same object. 

I was "including" the "cta" component inside the cq_dialog of another component (in my case)

<primaryCta
    jcr:primaryType="nt:unstructured"
    jcr:title="CTA"
    sling:resourceType="granite/ui/components/coral/foundation/container"
    ...>
    <items jcr:primaryType="nt:unstructured">
       <columns
       ...
           <include
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/include"
                path="/apps/eb/components/content/cta/cq:dialog/content/items/tabs/items/properties/items/columns/items/column">
           </include>
       </items>
</primaryCta>

and the actual "Cta" component's cq_dialog has :

<column ...
  <items ..
     <field .. name="./cta">
        <title... />
        <link... />
     </field>

The other alternative is to add the elements of the CTA (title, link, style etc) instead of using include and then use unique names to refer to them.

So far my work around 

<primaryCta
    jcr:primaryType="nt:unstructured"
    jcr:title="CTA"
    sling:resourceType="granite/ui/components/coral/foundation/container"
    ...>
    <items .. >
       <columns ... >
       ...
         <field 
             jcr:primaryType="nt:unstructured"
             sling:resourceType="granite/ui/components/coral/foundation/container"
             name="./primaryCta">
                <items .. >
                   <btnType ..>
                   <btnIcon ..>
                   <title ..>
         ...        
</primaryCta>

Few examples:

• Multiple CTA - https://github.com/nikeshshindhe/jenkins_setup_aem/blob/8385f699affde0602058447585f5db397010baab/ui....
• Include example - https://github.com/aem-design/aemdesign-aem-core/blob/46683858d29ded95d1e7aea5ce9cc9358b9d6943/aemde...

There may be other alternatives.

[arunpatidar]

Hi,
To have different name property vlaue when you want to reuse part of dialog, you can either use namespace if you are ACS Common or simply inhert the existing dialog part and override the name property

please check https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-there-a-way-to-to-add-r... for more details

[jakdevmode]

@surenk hi, were you able to find a solution? I'm having an exact issue and tried all other suggested solutions but still no luck. I would really appreciate it if you could share what approach you took to resolve your issue. Thank you very much in advance!