Adobe Experience Manager Sites & More

AlexCa17 · 10/21/24

Hi, I'm creating a dialog with a rich text and a select field. The issue is that it doesn't save properly. The select doesn't appear, and when it does, it doesn't save and gets erased every time I reopen the console to edit again.

My dialog:

<multi granite:class=""
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield">
<field jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container"
   name="./Products">
<items jcr:primaryType="nt:unstructured">
<listType jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldLabel="Tipo de elemento de lista"
name="./listType">
<items jcr:primaryType="nt:unstructured">
<select
jcr:primaryType="nt:unstructured"
text="Selecciona un tema"
value="" />
<text
jcr:primaryType="nt:unstructured"
text="Tipo texto"
value="text-type" />
<link
jcr:primaryType="nt:unstructured"
text="Tipo link"
value="link-type" />
</items>
</listType>
<field jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
externalStyleSheets="[/apps/unicaja/clientlibs/clientlib-author/css/rteStyles.css]"
maxlength="50" name="./StaticList" required="true"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins
jcr:primaryType="nt:unstructured">
<format jcr:primaryType="nt:unstructured"
features="bold,italic,underline" />
<paraformat
jcr:primaryType="nt:unstructured" features="*" />
<subsuperscript
jcr:primaryType="nt:unstructured" features="*" />
<justify jcr:primaryType="nt:unstructured"
features="*" />
<links jcr:primaryType="nt:unstructured"
features="modifylink,unlink" />
<lists jcr:primaryType="nt:unstructured"
features="[ordered,unordered]" />
<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" />
</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="*" />
<styles jcr:primaryType="nt:unstructured"
features="*">
<styles jcr:primaryType="cq:WidgetCollection">
<greenXL jcr:primaryType="nt:unstructured"
cssName="h2 primary-color" text="XL Verde" />
<greenL jcr:primaryType="nt:unstructured"
cssName="h3 primary-color" text="L Verde" />
<blackL jcr:primaryType="nt:unstructured"
cssName="h3 primary-text-color" text="L Negro" />
<blackLBold jcr:primaryType="nt:unstructured"
cssName="h3 bold-text primary-text-color" text="L Negro Negrita"/>
<greenM jcr:primaryType="nt:unstructured"
cssName="h4 primary-color" text="M Verde" />
<blackM jcr:primaryType="nt:unstructured"
cssName="h4 primary-text-color" text="M Negro" />
<greenS jcr:primaryType="nt:unstructured"
cssName="h5 primary-color" text="S Verde"
wrapperClass="h5 primary-color" />
<blackS jcr:primaryType="nt:unstructured"
cssName="h5 primary-text-color" text="S Negro"
wrapperClass="h5 primary-text-color" />
<blackSBold jcr:primaryType="nt:unstructured"
cssName="h5 bold-text primary-text-color" text="S Negro Negrita" wrapperClass="h5 bold-text primary-text-color"/>
<blackXS jcr:primaryType="nt:unstructured"
cssName="h6 primary-text-color" text="XS Negro" />
</styles>
</styles>
</rtePlugins>
<uiSettings
jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#justify,#styles,subsuperscript#subscript,subsuperscript#superscript,lists#unordered,lists#ordered,links#modifylink,links#unlink,#paraformat]">
<popovers jcr:primaryType="nt:unstructured">
<styles jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles" />
<justify jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
ref="justify" />
<lists jcr:primaryType="nt:unstructured"
items="[ordered,unordered]" ref="lists" />
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat" />
</popovers>
</inline>
<dialogFullScreen
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#styles,subsuperscript#subscript,subsuperscript#superscript,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
<popovers jcr:primaryType="nt:unstructured">
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat" />
<styles jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles" />
</popovers>
</dialogFullScreen>
<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,-]" />
</cui>
</uiSettings>
</field>
</items>
</field>
</multi>

konstantyn_diachenko · 10/21/24

Hi @AlexCa17,

You missed composite=true property for multifield and your select uses Coral 2 component, but multifield - Coral 3.

Please, fix your multifield as below:

<multi granite:class=""
       jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
       composite="true">
    <field jcr:primaryType="nt:unstructured"
           sling:resourceType="granite/ui/components/coral/foundation/container"
           name="./Products">
        <items jcr:primaryType="nt:unstructured">
            <listType jcr:primaryType="nt:unstructured"
                      sling:resourceType="granite/ui/components/coral/foundation/form/select"
                      fieldLabel="Tipo de elemento de lista"
                      name="listType">
                <items jcr:primaryType="nt:unstructured">
                    <select
                            jcr:primaryType="nt:unstructured"
                            text="Selecciona un tema"
                            value=""/>
                    <text
                            jcr:primaryType="nt:unstructured"
                            text="Tipo texto"
                            value="text-type"/>
                    <link
                            jcr:primaryType="nt:unstructured"
                            text="Tipo link"
                            value="link-type"/>
                </items>
            </listType>
            <StaticList jcr:primaryType="nt:unstructured"
                   sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                   externalStyleSheets="[/apps/unicaja/clientlibs/clientlib-author/css/rteStyles.css]"
                   maxlength="50" name="StaticList" required="true"
                   useFixedInlineToolbar="{Boolean}true">
                <rtePlugins
                        jcr:primaryType="nt:unstructured">
                    <format jcr:primaryType="nt:unstructured"
                            features="bold,italic,underline"/>
                    <paraformat
                            jcr:primaryType="nt:unstructured" features="*"/>
                    <subsuperscript
                            jcr:primaryType="nt:unstructured" features="*"/>
                    <justify jcr:primaryType="nt:unstructured"
                             features="*"/>
                    <links jcr:primaryType="nt:unstructured"
                           features="modifylink,unlink"/>
                    <lists jcr:primaryType="nt:unstructured"
                           features="[ordered,unordered]"/>
                    <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"/>
                        </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="*"/>
                    <styles jcr:primaryType="nt:unstructured"
                            features="*">
                        <styles jcr:primaryType="cq:WidgetCollection">
                            <greenXL jcr:primaryType="nt:unstructured"
                                     cssName="h2 primary-color" text="XL Verde"/>
                            <greenL jcr:primaryType="nt:unstructured"
                                    cssName="h3 primary-color" text="L Verde"/>
                            <blackL jcr:primaryType="nt:unstructured"
                                    cssName="h3 primary-text-color" text="L Negro"/>
                            <blackLBold jcr:primaryType="nt:unstructured"
                                        cssName="h3 bold-text primary-text-color" text="L Negro Negrita"/>
                            <greenM jcr:primaryType="nt:unstructured"
                                    cssName="h4 primary-color" text="M Verde"/>
                            <blackM jcr:primaryType="nt:unstructured"
                                    cssName="h4 primary-text-color" text="M Negro"/>
                            <greenS jcr:primaryType="nt:unstructured"
                                    cssName="h5 primary-color" text="S Verde"
                                    wrapperClass="h5 primary-color"/>
                            <blackS jcr:primaryType="nt:unstructured"
                                    cssName="h5 primary-text-color" text="S Negro"
                                    wrapperClass="h5 primary-text-color"/>
                            <blackSBold jcr:primaryType="nt:unstructured"
                                        cssName="h5 bold-text primary-text-color" text="S Negro Negrita"
                                        wrapperClass="h5 bold-text primary-text-color"/>
                            <blackXS jcr:primaryType="nt:unstructured"
                                     cssName="h6 primary-text-color" text="XS Negro"/>
                        </styles>
                    </styles>
                </rtePlugins>
                <uiSettings
                        jcr:primaryType="nt:unstructured">
                    <cui jcr:primaryType="nt:unstructured">
                        <inline jcr:primaryType="nt:unstructured"
                                toolbar="[format#bold,format#italic,format#underline,#justify,#styles,subsuperscript#subscript,subsuperscript#superscript,lists#unordered,lists#ordered,links#modifylink,links#unlink,#paraformat]">
                            <popovers jcr:primaryType="nt:unstructured">
                                <styles jcr:primaryType="nt:unstructured"
                                        items="styles:getStyles:styles-pulldown"
                                        ref="styles"/>
                                <justify jcr:primaryType="nt:unstructured"
                                         items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                         ref="justify"/>
                                <lists jcr:primaryType="nt:unstructured"
                                       items="[ordered,unordered]" ref="lists"/>
                                <paraformat
                                        jcr:primaryType="nt:unstructured"
                                        items="paraformat:getFormats:paraformat-pulldown"
                                        ref="paraformat"/>
                            </popovers>
                        </inline>
                        <dialogFullScreen
                                jcr:primaryType="nt:unstructured"
                                toolbar="[format#bold,format#italic,format#underline,#styles,subsuperscript#subscript,subsuperscript#superscript,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
                            <popovers jcr:primaryType="nt:unstructured">
                                <paraformat
                                        jcr:primaryType="nt:unstructured"
                                        items="paraformat:getFormats:paraformat-pulldown"
                                        ref="paraformat"/>
                                <styles jcr:primaryType="nt:unstructured"
                                        items="styles:getStyles:styles-pulldown"
                                        ref="styles"/>
                            </popovers>
                        </dialogFullScreen>
                        <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,-]"/>
                    </cui>
                </uiSettings>
            </StaticList>
        </items>
    </field>
</multi>

Example of multifield configuration from the official doc: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

AlexCa17 · 10/22/24

Hello, is there any way to add two fields to my multifield? I need the select to include the ListItems field while keeping the other field as it was. Regards.

konstantyn_diachenko · 10/22/24

Hi @AlexCa17, in the example above you can see that multifield provides an opportunity to configure 2 fields (select, rte) per multi-field item.

Adobe Experience Manager Sites & More

Multifield with richtext & select

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe