creating dialog of multifield field in touch ui

[NidhiKu]

<?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" xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Employee Properties"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
granite:class="tabtest"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs">
<employeeDetails

jcr:primaryType="nt:unstructured"
jcr:title="Employee Details"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<empDeparment
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Emplpyee-Department"
name="./empDepartment"/>
<employee
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldLabel="employee">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./employee">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<employeeName
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/textfield"
fieldLabel="Employee Name"
name="./employeeName"/>
<employeeId
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/textfield"
fieldLabel="Employee Id"
name="./employeeId"/>
<employeeFeedback
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/text"
fieldLabel="Feedback"
name="./employeeFeedback"/>

</items>
</column>
</items>
</field>
</employee>
</items>
</column>
</items>
</employeeDetails>
</content>
</jcr:root>

i am using aem6.5 version and i not sure what exactly i am doing the mistake but the dialog box is created but doesn't show any field in it not even the textfield. 

[arunpatidar]

Hi @NidhiKu 

Here is the example of multifield dialog

https://github.com/adobe/aem-core-wcm-components/blob/77dd95c70fbf0d4b2a03ea8bb53caca46703dcb1/conte... 

[PRATHYUSHA_VP]

Hi @NidhiKu ,

Looks like you're trying to convert granite UI dialog to coral UI AEM dialog. 

You need to tweak structure a bit and follow core components dialog structure as mentioned by @arunpatidar 

Attached is the dialog content.xml for your reference. Please compare and check the issues

[BrianKasingli · Accepted solution]

@NidhiKu , follow this tutorial and you will be soon on your way In the tutorial you'll learn how to setup multi-field, next you will be abler to iterate through each item and render HTML elements on the page.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Contact details"
    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">
            <contact
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                composite="{Boolean}true">
                <field
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container"
                    name="./contact">
                    <items jcr:primaryType="nt:unstructured">
                        <contactGroup
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/well">
                            <items jcr:primaryType="nt:unstructured">
                                <name
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    fieldLabel="Name"
                                    name="./contactName"/>
                                <email
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                    fieldLabel="Email"
                                    name="./contactEmail"/>
                            </items>
                        </contactGroup>
                    </items>
                </field>
            </contact>
        </items>
    </content>
</jcr:root>

https://medium.com/activate-aem/create-multifield-dialog-in-aem-f3e4a616f041