Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Is there a way to to add reusable parts of dialog under different nodes for different use cases

Avatar

Level 2

Here's my problem I want to reuse my dialog for images using foundation include.

 

My use cases are in one instance I need my node structures to be the following: 

 

component1/cta/images

component2/mobile/images

 

It may be an oversight on my part but I can't seem to find a way that I can include my images dialog under the differing node structure cta or mobile. Is this possible and if so what would I use?

1 Accepted Solution

Avatar

Correct answer by
Level 2

A colleague found the answer to this using the new namespace property on include. We had to upgrade our acs commons to use the new include param.

Here's a link to the documentation and an example usage https://adobe-consulting-services.github.io/acs-aem-commons/features/granite/parameterized-namespace....
example:

<typographyOptions
  jcr:primaryType="nt:unstructured"
  sling:resourceType="acs-commons/granite/ui/components/include"
  path="airmiles/components/component-elements/typographyOptionsV3"
  namespace="small"/>
<typographyOptions
  jcr:primaryType="nt:unstructured"
  sling:resourceType="acs-commons/granite/ui/components/include"
  path="airmiles/components/component-elements/typographyOptionsV3"
  namespace="medium"/>

This will yield our reusable TypographyOptions dialog with an appended small and medium in front of the namespace.
ex: small/fontSize & medium/fontSize


View solution in original post

12 Replies

Avatar

Level 8

Hi @SebNamek ,

Hope i understood your requirement, you can create reusable dialog fields at one location & refer same fields from component A, component B etc. using foundation include.

 

Create reusable field at common location (ex: /apps/project-name/widgets/image-field/.content.xml) & add image field in .content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Configure Image"
fieldLabel="Image"
fileNameParameter="./fileName"
fileReferenceParameter="./image"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
</items>
</column>
</items>
</jcr:root>

 

In Component A reuse the image field using foundation include:

<items jcr:primaryType="nt:unstructured">
<imageFieldInclude
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/project-name/widgets/image-field/items/column"/>
</items>

 

In Component B reuse the image field using foundation include:

<items jcr:primaryType="nt:unstructured">
<imageFieldInclude
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/project-name/widgets/image-field/items/column"/>
</items>

 

Hope this helps! 

Avatar

Level 2

Hi @Manjunath_K,

 

Thanks for reaching out. I'm aware of foundation include but what I don't understand is how I can add to the name field.

In the example you provided both components will yield a content structure like this:

component/image/fileName

 

My use case is that I need to have the content structure something like this.

 

Component A

component/background/image/fileName

 

Component B

component/article/image/fileName

 

To further illustrate this the only way I know as of now to achieve the desired result above would be to make two separate dialogs and include them via foundation include. These two dialogs would be identical except for the name property the differing names would be:

Component A
name='/background/image'

Component B
name='/article/image' 

Avatar

Level 8

@SebNamek 

you mean adding different names to image fields under component A & component B using foundation include. if yes, as per my knowledge that option is not feasible to have dynamic property names. foundation include accept only two properties as mentioned in below doc.

 

https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/granite-ui...

 

Avatar

Level 2

Thanks @Manjunath_K,

That's also how I understood it. It seems like a pretty huge missed opportunity. It really limits the reusability of components in my application 

Avatar

Level 8

@SebNamek  You’re welcome

I am not sure about your use case why you need to have different field names under component A & B. Ideally foundation include helps in reusability but in some cases like reusing same dialog field more than once in same component dialog will result in conflict in field names.

Avatar

Community Advisor

Can you try with Sling Resource Merger(sling:resourceSuperType)? There you can override any properties you want. 

e.g. 

 

<image
    jcr:primaryType="nt:unstructured"
    name="./another/name"
    sling:resourceSuperType="/apps/myapp/component/component1/cq:dialogs/cta/image"/>

 



Arun Patidar

Avatar

Level 2

This is great I didn't know this was possible. If I understand this properly would I need to do this for every property on the image dialog that needs to change?

If that's the case I'm not sure this would help because we have 15-20 properties on our image dialog. I will definitely keep this in mind for the future though.

Avatar

Community Advisor
Yes, Still you need to create property which you want to override, other properties will gets inherited


Arun Patidar

Avatar

Correct answer by
Level 2

A colleague found the answer to this using the new namespace property on include. We had to upgrade our acs commons to use the new include param.

Here's a link to the documentation and an example usage https://adobe-consulting-services.github.io/acs-aem-commons/features/granite/parameterized-namespace....
example:

<typographyOptions
  jcr:primaryType="nt:unstructured"
  sling:resourceType="acs-commons/granite/ui/components/include"
  path="airmiles/components/component-elements/typographyOptionsV3"
  namespace="small"/>
<typographyOptions
  jcr:primaryType="nt:unstructured"
  sling:resourceType="acs-commons/granite/ui/components/include"
  path="airmiles/components/component-elements/typographyOptionsV3"
  namespace="medium"/>

This will yield our reusable TypographyOptions dialog with an appended small and medium in front of the namespace.
ex: small/fontSize & medium/fontSize


Avatar

Employee
Glad to see my contribution is being used Enjoy. I was not aware of the sling merger when I created this. Maybe would be cool if the merger can support namespacing.

Avatar

Level 1

Hey, how do you get the properties in your main dialog? 

 

Thanks for your answer.