Multifield with richtext & select

Forum|Forum|1 year ago
October 21, 2024
1 reply
548 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

konstantyn_diachenko

Community Advisor

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/granite/ui/components/coral/foundation/form/multifield/index.html#pathfield-and-rte-rich-text-editor

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

AlexCa17Author

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

Community Advisor

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

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded