Multifield with richtext & select | Community
Skip to main content
New Participant
October 21, 2024

Multifield with richtext & select

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

1 reply

konstantyn_diachenko
New Participant
October 21, 2024

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 DiachenkoCheck out AEM VLT Intellij plugin
AlexCa17Author
New Participant
October 22, 2024

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
New Participant
October 22, 2024

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 DiachenkoCheck out AEM VLT Intellij plugin