Level 2

Solved

Reordering Multifield Contains Image & Text fields

Forum|Forum|3 years ago
May 11, 2022
3 replies
2083 views

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

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

Best answer by An1-3

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/

MayurSatav

Community Advisor and Adobe Champion

Hi @sigarambotla_hemanthku ,

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

S

Sigarambotla_HemanthKuAuthor

Level 2

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

A

An1-3Accepted solution

Level 4

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/

D

deepakoc10

Adobe Employee

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

D

deepakoc10

Adobe Employee

Have we got any solution to this till now ?

The issue still persists for me.

Thanks

N

naveen_27_05

Level 2

Hi All,

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

Thanks.

S

Sigarambotla_HemanthKuAuthor

Level 2

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded