sling:resourceSupertype not working with include

[Mariano2]

Hello everyone,

I have a tab that is included in the dialog via granite/ui/components/coral/foundation/include, in this tab I have placed a richtext component and I created a node in which are placed rtePlugins and uiSettings that I include in the richtext via sling:resourceSupertype. 

Unfortunately, when I open the dialog, in the richtext there are not showed the custom rtePlugins and uiSettings that I defined in my node, but the default ones are showed. 

I ran 3 tests:
Dialog tab handled with sling:resourceType=granite/ui/components/coral/foundation/include
A) Richtext with rtePlugins and uiSettings explicit --> working
B) Richtext with rtePlugins and uiSettings included via resourceSuperType --> not working
Dialog tab explicit in the dialog
C) Richtext with rtePlugins and uiSettings made explicit --> working
D) Richtext with rtePlugins and uiSettings included via resourceSuperType --> working

Debugging the js /libs/clientlibs/granite/richtext.js we notice that at line 39223 in case B, the config variable is not resolved, below are the screens for cases A, C, D, and for case B

Test case B
Test case A,C,D

Does anyone have any idea how to fix this? Seems that the config object does not resolve sling:resourceSuperType within a  granite/ui/components/coral/foundation/include.

I need to use this approach (or similar) in order to have:
- Better reading of tabs
- Limiting the code of richtext configurations (in our dialog we have many occurences of richtext).

[arunpatidar]

Hi,

Please check if this helps

https://blogs.perficient.com/2017/03/03/how-to-architect-a-rte-solution-for-aem-touch-ui-dialog/ 

[Mariano2]

Hello Arun,

Thanks for your help, I checked the article you linked, but unfortunately I didn't find it very helpful. 
My problem is that the sling:resourceSupertype seems to not be working when I use it in a tab included in the dialog via granite/ui/components/coral/foundation/include, so I can't define a unique node with rtePlugins and uiSettings, I have to define them directly in every rte I'm declaring in the dialog.
Is it a known issue with AEM? Any suggestion on alternative ways I can choose?

Thanks in advance,
Mariano.

[arunpatidar]

Could you please share a sample package with me, I can try and find something.

[MarianoRumolo]

Hello,

You can see a sample content here. Please let me know if you can access the link.

I created a page with 2 components:

• one is called "TEST COMPONENT WITH INCLUDE", in which I inserted a tab with a richtext via include, in this case, as you can see, the custom rte plugins are not visible
• the other component is called "TEST COMPONENT WITHOUT INCLUDE", in this component the same tab is declared directly in the component and the custom rte plugins are visible

Best regards,

Mariano

[arunpatidar]

Hi,

I have tried this and it doesn't work with include but sling resource merger it does.

[MarianoRumolo]

Hello,

Thanks for helping me, could you explain more how did you do this? Did you include the tab in the dialog via sling:resourceSuperType?

[darrinjohnson]

A few years later, here's an answer for you:

`sling:resourceSuperType` does work for this usecase, but you have to reference a node that doesn't already have a sling:resourceType.

I kept trying over and over to re-use RTE, rtePlugins, uiSettings, etc... the only way I could get this to work was by referencing nodes that didn't have sling:resourceType.

The RTE nodes have resourceTypes already, so you can't resourceSuperType that.
The rtePlugins and uiSettings nodes don't have resourceTypes, so you can resourceSuperType those.

But what if you want to re-use the RTE and it's configurations??? Just reference one of the `<items jcr:primaryType="nt:unstructured">` nodes and it will work just fine.

My assumption here is that using sling:resourceSuperType to reference a node that already has a sling:resourceType, causes certain functionality associated with that sling:resourceType to interfere with the Dialog's ability to properly re-use the sling resources.

So, define some settings @ /apps/myproject/components/rte/settings/rtePlugin, /apps/myproject/components/rte/settings/uiSettings (it might work best if settings is a .content.xml node that contains rtePlugin and uiSettings).

Then create your richText definition @ /apps/myproject/components/rte/cq:dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="RTE"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items jcr:primaryType="nt:unstructured">
            <text-settings
                jcr:primaryType="nt:unstructured"
                jcr:title="Text"
                sling:resourceType="granite/ui/components/coral/foundation/container"
                margin="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <columns
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <text
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                        textIsRich="{Boolean}true"
                                        fieldDescription="Enter rich text."
                                        useFixedInlineToolbar="{Boolean}true"
                                        fieldLabel="Contact Details"
                                        name="./text">
                                        <rtePlugins
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceSuperType="myproject/components/rte/settings/rtePlugins"/>
                                        <uiSettings
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceSuperType="myproject/components/rte/settings/uiSettings"/>
                                    </text>
                                </items>
                            </column>
                        </items>
                    </columns>
                </items>
            </text-settings>
        </items>
    </content>
</jcr:root>

 

Then you can re-use this RTE dialog field in other components:
@ /apps/myproject/components/text/cq:dialog

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Text Component"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items jcr:primaryType="nt:unstructured">
            <text-settings
                jcr:primaryType="nt:unstructured"
                jcr:title="Text"
                sling:resourceType="granite/ui/components/coral/foundation/container"
                margin="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <columns
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items
                            jcr:primaryType="nt:unstructured"
                            sling:resourceSuperType="myproject/components/rte/cq:dialog/content/items/text-settings/items/columns/items/column/items">
                                </items>
                            </column>
                        </items>
                    </columns>
                </items>
            </text-settings>
        </items>
    </content>
</jcr:root>

I'm now able to re-use the exact same RTE definition anywhere by calling this from any component dialog:

<items
    jcr:primaryType="nt:unstructured"
    sling:resourceSuperType="myproject/components/rte/cq:dialog/content/items/text-settings/items/columns/items/column/items">