Hi Team please help me here
Issue :-
1.Not able to reorder images & text in multifield
2.if i reorder using Drag & Drop in multifield for same places image is getting reordered for some palces text is getting reordered
Thanks in advance
There are multiple blogs available which you can follow like and reorder using below icon
https://aemhints.com/2020/10/24/coral-multifield-aem65/
http://www.aemcq5tutorials.com/tutorials/create-touch-ui-nested-multifield-dialog-aem/
Please share multifield XML. Because for me it is working fine even after ordering fields.
or
Check the below blog for how to create multifield dialog.
https://medium.com/@mayursatav/create-multifield-dialog-in-aem-c3eed3f7323c
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Marketing Carousel"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[core.wcm.components.list.v2.editor,clientlib-marketing-multifield-image.authoring,clientlib-colorpicker]"
helpPath="en/cq/current/wcm/default_components.html#Text">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/tabs"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<cardsInfo
jcr:primaryType="nt:unstructured"
jcr:title="Cards Information"
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"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<cardBackgroundColor
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
class="colorfulDropdown"
fieldLabel="Card Background Color"
name="./cardBackgroundColor"
showDefaultColors="{Boolean}false"
showProperties="{Boolean}false"
showSwatches="{Boolean}true"
value="#ffad00">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="acs-commons/components/utilities/genericlist/datasource"
path="/etc/acs-commons/lists/customcolors"/>
</cardBackgroundColor>
<descriptionFontColor
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
class="colorfulDropdown"
fieldLabel="Card Description Font Color"
name="./cardDescriptionFontColor"
showDefaultColors="{Boolean}false"
showProperties="{Boolean}false"
showSwatches="{Boolean}true"
value="#000000">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="acs-commons/components/utilities/genericlist/datasource"
path="/etc/acs-commons/lists/customcolors"/>
</descriptionFontColor>
<titleFontColor
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
class="colorfulDropdown"
fieldLabel="Card Title Font Color"
name="./cardTitleFontColor"
showDefaultColors="{Boolean}false"
showProperties="{Boolean}false"
showSwatches="{Boolean}true"
value="#000000">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="acs-commons/components/utilities/genericlist/datasource"
path="/etc/acs-commons/lists/customcolors"/>
</titleFontColor>
<ctaFontColor
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
class="colorfulDropdown"
fieldLabel="CTA Text Font Color"
name="./cardCtaFontColor"
showDefaultColors="{Boolean}false"
showProperties="{Boolean}false"
showSwatches="{Boolean}true"
value="#000000">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="acs-commons/components/utilities/genericlist/datasource"
path="/etc/acs-commons/lists/customcolors"/>
</ctaFontColor>
<cards
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="Carousel Cards"
validation="multifield-validate">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./carouselItems">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<imagePath
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Recommended image upload resolution 770x576"
fieldLabel="Image Path"
fileNameParameter="./fileName"
fileReferenceParameter="./imagePath"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./imagePathTag"
required="{Boolean}true"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
<mobileimagePath
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldDescription="Use this field to upload perfect fit images for mobile dimensions. Recommended image upload resolution 325x200"
fieldLabel="Mobile Image Path"
fileNameParameter="./fileName"
fileReferenceParameter="./mobileimagePath"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./mobileimagePathTag"
required="{Boolean}false"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
<imageAlt
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Image Alternative Text"
name="./imageAlt"/>
<itemTitle
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldDescription="Recommendation for the character limit is 30 characters"
fieldLabel="Header Text"
name="./itemTitle"
required="true"
useFixedInlineToolbar="{Boolean}true">
<rtePlugins
jcr:primaryType="nt:unstructured"
sling:resourceSuperType="/apps/hwp-experience/components/content/richtext/cq:dialog/content/items/column/items/richtext/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,#styles]">
<popovers jcr:primaryType="nt:unstructured">
<styles
jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles"/>
</popovers>
</inline>
</cui>
</uiSettings>
</itemTitle>
<itemDescription
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldDescription="Recommendation for the character limit is 200 characters"
fieldLabel="Description"
name="./itemDescription"
required="true"
useFixedInlineToolbar="{Boolean}true"/>
<ctaText
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Recommendation for the character limit is 16 characters"
fieldLabel="CTA Text"
name="./ctaText"/>
<ctaUrl
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
fieldDescription="Enter CTA URL"
fieldLabel="CTA URL"
name="./ctaUrl"
rootPath="/content/hwp-experience"/>
<ctaTarget
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="CTA Target"
name="./ctaTarget">
<items jcr:primaryType="nt:unstructured">
<new
jcr:primaryType="nt:unstructured"
text="New Tab"
value="_blank"/>
<same
jcr:primaryType="nt:unstructured"
selected="{Boolean}true"
text="Same Tab"
value="_self"/>
</items>
</Target>
</items>
</column>
</items>
</field>
</cards>
</items>
</column>
</items>
</columns>
</items>
</cardsInfo>
</items>
</content>
</jcr:root>There are multiple blogs available which you can follow like and reorder using below icon
https://aemhints.com/2020/10/24/coral-multifield-aem65/
http://www.aemcq5tutorials.com/tutorials/create-touch-ui-nested-multifield-dialog-aem/
Could you please try having one image (file upload) field & one text field as multifield item ?
It looks like the reordering in the multifield is still not correctly working
only in the particular case where,
- we have at least one text field and an image file upload field together in a multifield.
Please try to test the reordering for the below dialog.xml:
<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Accordion Component"
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"
maxmized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<general
jcr:primaryType="nt:unstructured"
jcr:title="General"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<accordion
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
deleteHint="{Boolean}true"
fieldDescription="Click 'Add' to add Accordion"
fieldLabel="Accordion">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./accordion">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Title"
name="./title"/>
<icon
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}false"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Icon"
fileReferenceParameter="./iconImageReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./icon"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
</items>
</field>
</accordion>
</items>
</column>
</items>
</general>
</items>
</tabs>
</items>
</content>
</jcr:root>
Tested AEM version: 6.4.8
Any solution or suggestions would be appreciated .
Thanks
Have we got any solution to this till now ?
The issue still persists for me.
Thanks
Hi All,
I think this issue is happening with the latest SDK Updates earlier it's working as expected for re-ordering.
Thanks.
To me The issue got resolved
Due to custom clientlib's it's behaving like this can you please try removing custom clientlib's and try
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
OKSorry, our virus scanner detected that this file isn't safe to download.
OK
