Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

Avatar

Level 2

28-02-2022

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

1 Comment