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

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Touch UI - reusing dialog field but with a different property name for each component

Avatar

Level 1

I am re-using RTE dialog across multiple components using granite/ui/components/foundation/include. But I want the node property name to be different for each component where I am reusing this RTE. I dont want to derive the property name from the base component where I have this RTE dialog defined initially.

Along with the path and sling resource type, I also tried giving the name property as well in the component node where we are including this re-usable rte dialog but still the data is getting stored under the property name which we was defined for the initial RTE tab. Is it possible to fix it ?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@nalla0109 I know exactly that you mean. You want to change the property name (name attribute) for specific Granite UI form element during include. Sorry, but the Granite UI does not allow you to dynamically change the name attribute when it's included. With that limitation in mind, you can do something like this:

 

<introDescription
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    fieldLabel="Intro Description"
    required="{Boolean}true"
    useFixedInlineTaoolbar="{Boolean}true"
    name="./introDescription">
    <rtePlugins
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/include"
        path="/apps/my-site/components/dialog/content/common/fields/cq:dialog/commonFields/items/componentSimpleRTE/rtePlugins"/>
    <uiSettings
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/include"
        path="/apps/my-site/components/dialog/content/common/fields/cq:dialog/commonFields/items/componentSimpleRTE/uiSettings"/>
</introDescription>

The example above showcases the re-use of the common rtePlugins and uiSettings configuration, leaving the declaration of the Granite UI component's initial settings adjustable to the current dialogue settings; the initial settings can change the name attribute.

 

4 Replies

Avatar

Community Advisor

Hi,

Use Sling Resource Merger to achieve this or reuse RTE plugins like below :

 

<text
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                                fieldDescription="Title, default value is page title"
                                                                fieldLabel="Title"
                                                                name="./title"
                                                                useFixedInlineToolbar="{Boolean}true">
                                                                <rtePlugins
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceSuperType="/apps/my-project/components/structure/dailog-includes/fragments-dlg/rteConf1/rtePlugins"/>
                                                                <uiSettings
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceSuperType="/apps/my-project/components/structure/dailog-includes/fragments-dlg/rteConf1/uiSettings"/>
                                                            </text>

 

 

Avatar

Correct answer by
Community Advisor

@nalla0109 I know exactly that you mean. You want to change the property name (name attribute) for specific Granite UI form element during include. Sorry, but the Granite UI does not allow you to dynamically change the name attribute when it's included. With that limitation in mind, you can do something like this:

 

<introDescription
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    fieldLabel="Intro Description"
    required="{Boolean}true"
    useFixedInlineTaoolbar="{Boolean}true"
    name="./introDescription">
    <rtePlugins
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/include"
        path="/apps/my-site/components/dialog/content/common/fields/cq:dialog/commonFields/items/componentSimpleRTE/rtePlugins"/>
    <uiSettings
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/include"
        path="/apps/my-site/components/dialog/content/common/fields/cq:dialog/commonFields/items/componentSimpleRTE/uiSettings"/>
</introDescription>

The example above showcases the re-use of the common rtePlugins and uiSettings configuration, leaving the declaration of the Granite UI component's initial settings adjustable to the current dialogue settings; the initial settings can change the name attribute.

 

Avatar

Level 1

Thanks @BrianKasingli for the update. I have tried this way but for some reason, UI settings and RTE plugins doesn't get picked up. However when I refer the RTE plugins and UI settings using sling:resourceSuperType then it works.

<Bodytext
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                fieldLabel="Body Text"
                                                name="./bodytext"
                                                removeSingleParagraphContainer="{Boolean}true"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/include"
                                                    path="/apps/testapp/components/base/rtePlugins"/>
                                                <uiSettings
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/include"
                                                    path="/apps/testapp/components/base/uiSettings"/>
                                            </Bodytext>

This didn't work

 

 

<Bodytext
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                fieldLabel="Body Text"
                                                name="./bodytext"
                                                removeSingleParagraphContainer="{Boolean}true"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceSuperType="/apps/testapp/components/base/rtePlugins"/>
                                                <uiSettings
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceSuperType="/apps/testapp/components/base/uiSettings"/>
</Bodytext>

 

This worked 

Avatar

Level 1

This is the correct answer, exactly what I was looking for.