Reordering Multifield Contains Image & Text fields

[Sigkumar]

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 

 

[MayurSatav]

Hi @Sigkumar ,

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

[Sigkumar]

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

[Anoop_Garg · Accepted solution]

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/ 

[Deepak88]

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

[Deepak88]

Have we got any solution to this till now ? 

The issue still persists for me.

Thanks

[naveen_27_05]

Hi All,

I think this issue is happening with the latest SDK Updates earlier it's working as expected for re-ordering.

Thanks.

[Sigkumar]

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