AEM dialog using sling:resourceType include on the same component dialog twice

Question

The requirement is, in a new component dialog, I need to have to tabs contains two generic CTA config , e.g:

currently , my new component dialog setting as below:

<tab3
          jcr:description="Primary CTA items"
          jcr:primaryType="nt:unstructured"
          jcr:title="Primary CTA"
          granite:class="tab-wrapper"
          sling:resourceType="granite/ui/components/coral/foundation/container">
        <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">
              <column
                  jcr:primaryType="nt:unstructured"
                  sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                  <cta
                      jcr:primaryType="nt:unstructured"
                      sling:resourceType="granite/ui/components/coral/foundation/include"
                      path="myproject/folder/components/commons/cta/content/items/columns/items/column"/>
                </items>
              </column>
            </items>
          </columns>
        </items>
      </tab3>
      <tab4
          jcr:description="Secondary CTA items"
          jcr:primaryType="nt:unstructured"
          jcr:title="Secondary CTA"
          granite:class="tab-wrapper"
          sling:resourceType="granite/ui/components/coral/foundation/container">
        <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">
              <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                  <cta2
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/include"
                    name="./cta2/"
                    path="myproject/folder/components/commons/cta/content/items/columns/items/column"/>
                </items>
              </column>
            </items>
          </columns>
        </items>
      </tab4>

as you can see, I am using sling:resourceType="granite/ui/components/coral/foundation/container"

pointing to the generic cta dialog config path="myproject/folder/components/commons/cta/content/items/columns/items/column"

The issue is, after I built it, in the crx/de , I can only see one node object:

and my generic cta dialog config looks like this:

So as you can see, if I include the CTA diagloc using sling resource include, it always give me the object name CTA, and it is duplicated, so tab 3 and tab 4 dialog config in new component is overriding each other's value.

I am wondering has anyone experienced this issue before? What is the best solution? Some coding sample would be helpful Thank

Answer 1

rename the variables before submit and save the data under separate tab nodes:

// add .tab-class and tab-name in dialog so they are available as html atribute on dialog render

$(document).on("click", ".cq-dialog-submit", function (e) {
  var $tabs = $(".tab-class");

  $tabs.each(function (i) {
    var _this = $(this);
    var tabName = _this.data("tabe-name");

    _this.find("input").each(function () {
      $input = $(this);
      var existingName = $input.attr("name");
      var newName = tabName + '/' + existingName;
      $input.attr("name", newName);
    });
  });
});

also on dialog load call < componentNode >.json and populate the data from json into fields correctly, existing data would not be populated correctly anymore because of name mismatch