Granite UI component in static template

kevingtan · ‎02-06-2023

Hi All,

Initially I like to include a rich text editor in a container within a component, but it fails to show up. So I just include a regular auto-generated text component, which is located at "mysite/components/content/text". This seems to be for all projects using maven archetype and I take for granted that it works.

Here is the component 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"

jcrrimaryType="nt:unstructured"

jcr:title="Nav Config"

sling:resourceType="cq/gui/components/authoring/dialog"

extraClientlibs="[core.wcm.components.navigation.v1.editor]"

>

<content

granite:class="cmp-navigation__editor"

jcrrimaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<tabs

jcrrimaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/tabs"

maximized="{Boolean}true">

<textheading

jcrrimaryType="nt:unstructured"

id="nav-heading-text"

title="Heading & Text"

jcr:title="Heading & Text"

sling:resourceType="granite/ui/components/coral/foundation/container">

<heading

jcrrimaryType="nt:unstructured"

fieldLabel="Heading"

name="./heading"

sling:resourceType="granite/ui/components/foundation/form/textfield"/>

<text

jcrrimaryType="nt:unstructured"

fieldLabel="Body"

name="./text" sling:resourceType="mysite/components/content/text">

</text>

</items>

</textheading>

</items>

</tabs>

<items>

</content>

</jcr:root>

Looking at the bold text xml, the "Heading" and its field show up on the component, but not the "Body".

If I change the sling:resourceType to "mysite/components/content/separator", I can see the separator, and only this one works, others such as image, title, etc. don't.

The mysite/component/content/text/.content.xml is:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

jcrrimaryType="cq:Component"

jcr:title="Text"

sling:resourceSuperType="core/wcm/components/text/v2/text"

componentGroup="Mysite.Content"/>

Can someone please help?

thanks!

-kt

kevingtan · ‎02-06-2023

Hi All,

Initially I like to include a rich text editor in a container within a component, but it fails to show up. So I just include a regular auto-generated text component, which is located at "mysite/components/content/text". This seems to be for all projects using maven archetype and I take for granted that it works.

Here is the component 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"

jcrrimaryType="nt:unstructured"

jcr:title="Nav Config"

sling:resourceType="cq/gui/components/authoring/dialog"

extraClientlibs="[core.wcm.components.navigation.v1.editor]"

>

<content

granite:class="cmp-navigation__editor"

jcrrimaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/container">

<tabs

jcrrimaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/tabs"

maximized="{Boolean}true">

<textheading

jcrrimaryType="nt:unstructured"

id="nav-heading-text"

title="Heading & Text"

jcr:title="Heading & Text"

sling:resourceType="granite/ui/components/coral/foundation/container">

<heading

jcrrimaryType="nt:unstructured"

fieldLabel="Heading"

name="./heading"

sling:resourceType="granite/ui/components/foundation/form/textfield"/>

<text

jcrrimaryType="nt:unstructured"

fieldLabel="Body"

name="./text" sling:resourceType="mysite/components/content/text">

</text>

</items>

</textheading>

</items>

</tabs>

<items>

</content>

</jcr:root>

Looking at the bold text xml, the "Heading" and its field show up on the component, but not the "Body".

If I change the sling:resourceType to "mysite/components/content/separator", I can see the separator, and only this one works, others such as image, title, etc. don't.

The mysite/component/content/text/.content.xml is:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

jcrrimaryType="cq:Component"

jcr:title="Text"

sling:resourceSuperType="core/wcm/components/text/v2/text"

componentGroup="Mysite.Content"/>

Can someone please help?

thanks!

-kt

EstebanBustamante · ‎02-06-2023

I think you are confused with the file names.

The /component/path/.content.xml is meant to be the component definition, you cannot add dialog code in there.

The /component/path/_cq_dialog/.content.xml is meant to be the dialog's definition.

That being said, I think you could potentially use the RTE in the dialog instead of trying to embed the text component, simply use in the dialog definition something like this:

 <richTextEditor
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    name="./text">

Esteban Bustamante

kevingtan · ‎02-06-2023

I may explain it in an unclear way. The component xml is actually in _cq_dialog/.content.xml, something like this:

mysite/components/navigation/_cq_dialog/.content.xml

<xml...>

<jcr:root..>

<item>

<richTextEditor
    jcrrimaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    name="./text">

</item>

</content>

</jcr:root>

The RTE doesn't show up.

kevingtan · ‎02-06-2023

<items jcr:primaryType="nt:unstructured">
    <heading
        jcr:primaryType="nt:unstructured"
        fieldLabel="Heading"
        name="./heading"                      
        sling:resourceType="granite/ui/components/foundation/form/textfield"/>
    <text 
        jcr:primaryType="nt:unstructured" 
        sling:resourceType="cq/gui/components/authoring/dialog/richtext" 
        name="./text" 
        useFixedInlineToolbar="{Boolean}true"
        >
    	    <rtePlugins jcr:primaryType="nt:unstructured">
        	<format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    	    </rtePlugins>
    	    <uiSettings jcr:primaryType="nt:unstructured">
                <cui jcr:primaryType="nt:unstructured">
            	    <inline jcr:primaryType="nt:unstructured"
                	toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]">
            	    </inline>
            	    <icons jcr:primaryType="nt:unstructured">
                        <bold jcr:primaryType="nt:unstructured"
                    	    command="format#bold"
                    	    icon="textItalic"/>
            	    </icons>
        	</cui>
    	    </uiSettings>
    </text>
    <descp
            jcr:primaryType="nt:unstructured"
            fieldLabel="Description"
            name="./description"                        
            sling:resourceType="granite/ui/components/foundation/form/textfield"/>
</items>

I am attaching a screenshot here, showing the two text fields but not the RTE.

EstebanBustamante · ‎05-06-2023

This configuration is working for me, can you compare it with yours?

<?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"
          xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Text"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        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"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        granite:class="cq-RichText-FixedColumn-column"
                                        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"
                                                name="./text"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <format
                                                        jcr:primaryType="nt:unstructured"
                                                        features="bold,italic"/>
                                                    <justify
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-"/>
                                                    <links
                                                        jcr:primaryType="nt:unstructured"
                                                        features="modifylink,unlink"/>
                                                    <lists
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <misctools jcr:primaryType="nt:unstructured">
                                                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                            <chars jcr:primaryType="nt:unstructured">
                                                                <default_copyright
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;copy;"
                                                                    name="copyright"/>
                                                                <default_euro
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;euro;"
                                                                    name="euro"/>
                                                                <default_registered
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;reg;"
                                                                    name="registered"/>
                                                                <default_trademark
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;trade;"
                                                                    name="trademark"/>
                                                            </chars>
                                                        </specialCharsConfig>
                                                    </misctools>
                                                    <paraformat
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*">
                                                        <formats jcr:primaryType="nt:unstructured">
                                                            <default_p
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Paragraph"
                                                                tag="p"/>
                                                            <default_h1
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 1"
                                                                tag="h1"/>
                                                            <default_h2
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 2"
                                                                tag="h2"/>
                                                            <default_h3
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 3"
                                                                tag="h3"/>
                                                            <default_h4
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 4"
                                                                tag="h4"/>
                                                            <default_h5
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 5"
                                                                tag="h5"/>
                                                            <default_h6
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 6"
                                                                tag="h6"/>
                                                            <default_blockquote
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Quote"
                                                                tag="blockquote"/>
                                                            <default_pre
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Preformatted"
                                                                tag="pre"/>
                                                        </formats>
                                                    </paraformat>
                                                    <table
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-">
                                                        <hiddenHeaderConfig
                                                            jcr:primaryType="nt:unstructured"
                                                            hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden"
                                                            hiddenHeaderEditingCSS="cq-RichText-hiddenHeader--editing"/>
                                                    </table>
                                                    <tracklinks
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                </rtePlugins>
                                                <uiSettings jcr:primaryType="nt:unstructured">
                                                    <cui jcr:primaryType="nt:unstructured">
                                                        <inline
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                    ref="justify"/>
                                                                <lists
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                    ref="lists"/>
                                                                <paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
                                                            </popovers>
                                                        </inline>
                                                        <tableEditOptions
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
                                                        </tableEditOptions>
                                                    </cui>
                                                </uiSettings>
                                            </text>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                    <cq:styles
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"/>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Esteban Bustamante

kevingtan · ‎06-06-2023

Hi @EstebanBustamante ,

Thanks for your code. I just copied and pasted it onto the _cq_dialog/.content.xml, and it doesn't work for me. Don't know if there should be any clientlib associated with it?

see attached

-kt

EstebanBustamante · ‎06-06-2023

Interesting, I just copy/pasted my code, and worked fine. Which version of AEM are you using? I see in your dialog another tab (which is not part of my code), Can you try to delete the whole thing from your _cq_dialog/.content.xml and copy my content? Then delete manually the component (or at least the dialog) from the AEM instance and re-install, I suspect your filter.xml may be merging oddly the_cq_dialog/.content.xml file.

Esteban Bustamante

kevingtan · ‎06-06-2023

The other tab actually is "cq:styles" from your code. My AEM is 6.5.11.0. I don't even remember what archetype is using, probably 22. I fine-tuned the archetype a lot of times until I got that one for various reasons.

kevingtan · ‎06-06-2023

This is the OOTB component /libs/cq/gui/components/authoring/dialog/richtext, as referred as sling:resourceType="cq/gui/components/authoring/dialog/richtext" in the dialog.

kevingtan · ‎06-06-2023

You may see all the nodes are created accordingly.

EstebanBustamante · ‎06-06-2023

Try something of these:

- Use the text component from the Core components in your pages

- Drop your component into other templates/sites (wknd site may work due it has enabled the clientlibs)

- Inspect the dialog to check there is no custom code hiding the RTE field

- Check if you have any policy which could be messing with your component.

These can give you some insights if the issue is related to your template, site, clientlibs, or any other custom code, it seems the code i shared works just fine (i just double checked in wknd site), so it may be something specific to you

Esteban Bustamante

kevingtan · ‎06-06-2023

I will try that. I figure it can be the css issue, but I don't know how I can configure the css.

I started a new instance, and dropped a text component on a parsys. The OOTB Text component can display on both inline and popup modes.

But the OOTB Text component can only display the inline mode in another project, which has the issue of RTE.

Seems the textarea cannot show up due to the CSS, but am not sure yet.

-kt

kevingtan · ‎08-06-2023

Hi @EstebanBustamante ,

It looks like my instance fails to load the correct CSS properties for the component, the regular OOTB Text component suffers the same issue. If you don't mind, you can take a look at https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/text-component-can-t-be-lo....

Thanks a lot for your help!