Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Granite UI component in static template

Avatar

Level 7

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"

    jcr:primaryType="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"

        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">

                    <textheading

                    jcr:primaryType="nt:unstructured"

                    id="nav-heading-text"

                    title="Heading &amp; Text"

                    jcr:title="Heading &amp; Text"

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

                    <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"

                            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"

    jcr:primaryType="cq:Component"

    jcr:title="Text"

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

    componentGroup="Mysite.Content"/>

 

Can someone please help?

thanks!

-kt

12 Replies

Avatar

Community Advisor

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

Avatar

Level 7

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

      <content ...>

           <item>

               

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

          </item>

      </content>

</jcr:root>

 

The RTE doesn't show up.

Avatar

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

 

Avatar

Community Advisor

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

Esteban666_0-1685979737734.png

 

 

<?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

Avatar

Level 7

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

Screen Shot 2023-06-06 at 10.57.43 AM.png

 

-kt

Avatar

Community Advisor

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

Avatar

Level 7

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. 

Avatar

Level 7

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.

 

Screen Shot 2023-06-06 at 11.24.38 AM.png

Avatar

Community Advisor

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

Avatar

Level 7

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.

 

Screen Shot 2023-06-06 at 2.17.03 PM.png

 

Screen Shot 2023-06-06 at 2.15.53 PM.png

 

 

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

 

Screen Shot 2023-06-06 at 2.24.47 PM.png

 

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

 

-kt

Avatar

Level 7

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!