Expand my Community achievements bar.

Ability in AEM dialog to add a property that will create a child node with that name, for example for a fieldset

Avatar

snehR
Level 2

2/28/22

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

2 Comments
Reply