Description -
There should be a way of introducing parent child relationship in AEM component dialogs (like we can in multifield). If there are two instances of one component included in another, the ansence of such a functionality leads to a lot of duplicate code.
Usecase example is for an AEM + Angular code setup. There is a requirement to add a reusable link object/resource, that can be added to many different dialogs under different resource names "primaryCTA", "secondaryCTA", "link" nodes in Banner component, for example.
It is as easy as doing a
<sly data-sly-resource="${'primaryCTA' @ resourceType='my-project/components/cta-link'}" />
<sly data-sly-resource="${'secondaryCTA' @ resourceType='my-project/components/cta-link'}" />
in HTL. However, we need similar solution with Angular.
A dirty way of achieving this to have following in CTA dialog:
<primaryCTA jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<id jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Link id" name="./primaryCTA/id" />
<text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Link text" name="./primaryCTA/text" />
<href jcr:primaryType="nt:unstructured" fieldLabel="HREF Link URL" sling:resourceType="granite/ui/components/coral/foundation/form/pathfield" rootPath="/content/" name="./primaryCTA/href" />
</items>
</primaryCTA>
<secondaryCTA jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<id jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Link id" name="./secondaryCTA/id" />
<text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Link text" name="./secondaryCTA/text" />
<href jcr:primaryType="nt:unstructured" fieldLabel="HREF Link URL" sling:resourceType="granite/ui/components/coral/foundation/form/pathfield" rootPath="/content/" name="./secondaryCTA/href" />
</items>
</primaryCTA>
and include it in parent Banner component dialog:
<primaryCTA jcr:primaryType="nt:unstructured" jcr:title="Primary CTA" granite:class="field-group-border" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
<items jcr:primaryType="nt:unstructured">
<primaryCTA jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="my-project/components/cta-link/items/primaryCTA" />
</items>
</primaryCTA>
<secondaryCTA jcr:primaryType="nt:unstructured" jcr:title="Secondary CTA" granite:class="field-group-border" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
<items jcr:primaryType="nt:unstructured">
<secondaryCTA jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/include" path="my-project/components/cta-link/items/secondaryCTA" />
</items>
</secondaryCTA>
But this means duplication of code and not following DRY principles. Also we'd need a dialog for each different name.
We need to have a clean way of introducing a node parent on CTA so we can avoid the duplicate code within CTA dialog.
Why is this feature important to you -
Clean code and avoids duplicate code
How would you like the feature to work -
Through AEM component dialogs with JS libraries and frameworks like Angular and React
Current Behaviour -
The feature does not exist
