Is there a way to to add reusable parts of dialog under different nodes for different use cases | Community
Skip to main content
S
SebNamek
Level 2
November 11, 2020
Solved

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

  • November 11, 2020
  • 3 replies
  • 8191 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SebNamek

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-include/index.html.
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


3 replies

Manjunath_K
Manjunath_K
Level 7
November 11, 2020

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! 

    Manjunath_K
    Manjunath_K
    Level 7
    November 11, 2020

    @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/api/jcr_root/libs/granite/ui/components/coral/foundation/include/index.html

     

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    November 12, 2020

    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
      S
      SebNamekAuthor
      Level 2
      November 17, 2020

      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.

      S
      SebNamekAuthorAccepted solution
      Level 2
      December 3, 2020

      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-include/index.html.
      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


        S
        Adobe Employee
        Sc0rpic0mAdobe Employee
        Adobe Employee
        December 17, 2020
        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.
          Terms & ConditionsAccessibility statement

          Loading footer...