AEM hierarchy for multifield components.

[Aem_form_developer]

Can someone please help me with how to create hierarchy when creating multifield/multitab component?

Unable to figure out when to create item node, when to create tab node then again items node and so on.

[arunpatidar]

Hi,

I have a. sample component with all type fields please check https://github.com/arunpatidar02/aem63app-repo/blob/master/packages/rte/aem-rte-plugins-sample-compo...

[ChitraMadan · Accepted solution]

Hi @Aem_form_developer,

Please find below an example:

<?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="Image Details"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/layouts/fixedcolumns"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">                  
                    <name
                        jcr:primaryType="nt:unstructured"                        
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Name"
                        name="./name"
                        required="{Boolean}true"/>
                    <description
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                        fieldLabel="Description"
                        name="./description"
                        useFixedInlineToolbar="{Boolean}true"/>
                    <image
                        jcr:primaryType="nt:unstructured"                       
                     sling:resourceType="granite/ui/components/foundation/form/fileupload"
                        allowUpload="{Boolean}false"
                        autoStart="{Boolean}false"
                        class="cq-droptarget"
                        fieldLabel="Logo Image"
                        fileNameParameter="./resImgName"
                        fileReferenceParameter="./fileReference"
                        mimeTypes="[image]"
                        multiple="{Boolean}false"
                        name="./restaurantImage"
                        title="Upload Image Asset"
                        uploadUrl="${suffix.path}"
                        useHTML5="{Boolean}true"/>
                    <additionalImages
                        jcr:primaryType="nt:unstructured"                                         sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        fieldLabel="Additional Images">
                        <field
                            jcr:primaryType="nt:unstructured"                                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./additionalImages">
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <images
                                            jcr:primaryType="nt:unstructured"                                           sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                            fieldLabel="Image"
                                            name="./images"
                                            rootPath="/content/dam/"/>
                                        <title
                                            jcr:primaryType="nt:unstructured"                                           sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldLabel="Title"
                                            name="./title"/>
                                    </items>
                                </column>
                            </items>
                        </field>
                    </additionalImages>
                </items>
            </column>
        </items>
    </content>
</jcr:root>