ACS Commons Nested multiple child multifield issue in...

[smkswamy]

Having issue while creating nested multi field using acs commons in 6.3. The multi field structure is

Main Parent multifield has two child multifield. 

1. Child multifield 
2. Child multifield 

Below is the sample xml structure for multi field. I am getting Dialog rendering issue with below structure.one of the child multifield is getting displayed multiple times.

<?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="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <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">
            <parent
                jcr:primaryType="nt:unstructured"
                jcr:title="Parent"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <fieldset
                                jcr:primaryType="nt:unstructured"
                                jcr:title="Parent"
                                sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                <layout
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <pages
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/form/multifield"
                                                class="full-width"
                                                fieldDescription="Click '+' to add a new Parent"
                                                fieldLabel="Parent">
                                                <field
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                    acs-commons-nested=""
                                                    name="./parent">
                                                    <layout
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                                        method="absolute"/>
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <column
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/container">
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <sampleText
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                    fieldDescription="Enter sampleText"
                                                                    fieldLabel="sampleText"
                                                                    name="./sampleText"/>
                                                                <child1
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/multifield"
                                                                    class="full-width"
                                                                    fieldDescription="Click '+' to add a new child item"
                                                                    fieldLabel="Child1 List">
                                                                    <field
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                                        acs-commons-nested=""
                                                                        name="./child1">
                                                                        <layout
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                                                            method="absolute"/>
                                                                        <items jcr:primaryType="nt:unstructured">
                                                                            <column
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/foundation/container">
                                                                                <items jcr:primaryType="nt:unstructured">
                                                                                    <item
                                                                                        jcr:primaryType="nt:unstructured"
                                                                                        sling:resourceType="granite/ui/components/foundation/form/numberfield"
                                                                                        fieldDescription="Enter the item"
                                                                                        fieldLabel="item"
                                                                                        name="./item"/>
                                                                                </items>
                                                                            </column>
                                                                        </items>
                                                                    </field>
                                                                </child1>
                                                                <child2
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/multifield"
                                                                    class="full-width"
                                                                    fieldDescription="Click '+' to add a new child2 item"
                                                                    fieldLabel="child2 List">
                                                                    <field
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                                        acs-commons-nested=""
                                                                        name="./child2">
                                                                        <layout
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                                                            method="absolute"/>
                                                                        <items jcr:primaryType="nt:unstructured">
                                                                            <column
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/foundation/container">
                                                                                <items jcr:primaryType="nt:unstructured">
                                                                                    <key
                                                                                        jcr:primaryType="nt:unstructured"
                                                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                                        fieldDescription="Enter the key"
                                                                                        fieldLabel="Key"
                                                                                        name="./key"/>
                                                                                    <name
                                                                                        jcr:primaryType="nt:unstructured"
                                                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                                        fieldDescription="Enter the name"
                                                                                        fieldLabel="Name"
                                                                                        name="./name"/>
                                                                                </items>
                                                                            </column>
                                                                        </items>
                                                                    </field>
                                                                </child2>
                                                            </items>
                                                        </column>
                                                    </items>
                                                </field>
                                            </pages>
                                        </items>
                                    </column>
                                </items>
                            </fieldset>
                        </items>
                    </column>
                </items>
            </parent>
        </items>
    </content>
</jcr:root>

[Anudeep_Garnepudi]

@smkswamy 

Use granite/ui/components/coral/foundation/form/multifield instead of granite/ui/components/foundation/form/multifields. Below is updated 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="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <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">
            <parent
                jcr:primaryType="nt:unstructured"
                jcr:title="Parent"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <fieldset
                                jcr:primaryType="nt:unstructured"
                                jcr:title="Parent"
                                sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                <layout
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <pages
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                class="full-width"
                                                composite="{Boolean}true"
                                                fieldDescription="Click '+' to add a new Parent"
                                                fieldLabel="Parent">
                                                <field
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                    acs-commons-nested=""
                                                    name="./parent">
                                                    <layout
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <column
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/container">
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <sampleText
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                    fieldDescription="Enter sampleText"
                                                                    fieldLabel="sampleText"
                                                                    name="./sampleText"/>
                                                                <child1
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                                    class="full-width"
                                                                    composite="{Boolean}true"
                                                                    fieldDescription="Click '+' to add a new child item"
                                                                    fieldLabel="Child1 List">
                                                                    <field
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                                        acs-commons-nested=""
                                                                        name="./child1">
                                                                        <layout
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                                                            method="absolute"/>
                                                                        <items jcr:primaryType="nt:unstructured">
                                                                            <column
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/foundation/container">
                                                                                <items jcr:primaryType="nt:unstructured">
                                                                                    <item
                                                                                        jcr:primaryType="nt:unstructured"
                                                                                        sling:resourceType="granite/ui/components/foundation/form/numberfield"
                                                                                        fieldDescription="Enter the item"
                                                                                        fieldLabel="item"
                                                                                        name="./item"/>
                                                                                </items>
                                                                            </column>
                                                                        </items>
                                                                    </field>
                                                                </child1>
                                                                <child2
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                                    class="full-width"
                                                                    composite="{Boolean}true"
                                                                    fieldDescription="Click '+' to add a new child2 item"
                                                                    fieldLabel="child2 List">
                                                                    <field
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                                        acs-commons-nested=""
                                                                        name="./child2">
                                                                        <layout
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                                                            method="absolute"/>
                                                                        <items jcr:primaryType="nt:unstructured">
                                                                            <column
                                                                                jcr:primaryType="nt:unstructured"
                                                                                sling:resourceType="granite/ui/components/foundation/container">
                                                                                <items jcr:primaryType="nt:unstructured">
                                                                                    <key
                                                                                        jcr:primaryType="nt:unstructured"
                                                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                                        fieldDescription="Enter the key"
                                                                                        fieldLabel="Key"
                                                                                        name="./key"/>
                                                                                    <name
                                                                                        jcr:primaryType="nt:unstructured"
                                                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                                        fieldDescription="Enter the name"
                                                                                        fieldLabel="Name"
                                                                                        name="./name"/>
                                                                                </items>
                                                                            </column>
                                                                        </items>
                                                                    </field>
                                                                </child2>
                                                            </items>
                                                        </column>
                                                    </items>
                                                </field>
                                            </pages>
                                        </items>
                                    </column>
                                </items>
                            </fieldset>
                        </items>
                    </column>
                </items>
            </parent>
        </items>
    </content>
</jcr:root>

[smkswamy]

Thank you for providing solution Anudeep_Garnepudi. When I tried your approach, I am unable to save the values. Dialog is not closing. Any idea how to fix this issue.

[Anudeep_Garnepudi]

Try to drop a new component and check once

[praveenjain]

If you are looking for Multifield with two child multifields in touch UI dialog.

You can copy dialog code mentioned in below link

https://aemhub.blogspot.com/2020/12/multifield-with-2-child-multifileds-in.html