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

[nalla0109]

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 ?

[arunpatidar]

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>

[BrianKasingli · Accepted solution]

@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.

[nalla0109]

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 

[leek86608325]

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

[yhemmeFT]

Hey ! I was trying to do the same thing but I can't get it to work, how did you declare the 

/apps/testapp/components/base/uiSettings

?

You make like a normal component with a .content.xml and a cq:dialog with a jcr:root and inside the rtePlugin ? 

If you can show me the files that would be great 

Thks !

[hemanth_ns]

Below is the structure. i have configured 'edit' node as a cq:component. Rest everything is either a folder or an unstructured node. I am referencing in node as 'myproject/components/shared/rte/v1/edit/fullconfig/rtePlugins' using resourcesupertype. Hope this helps.