Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Multifield dialog to add form fields

Avatar

Level 2

Hi Team, 

I want to create a multifield dialog, the requirement is - I want to create a form using multifield. I need to create a multifield dialog which has a form label and text field.

I want to add multiple form fields , so I need to create a multifield dialog to achieve this.

 

Can I get help in creating it? 

  • Thanks in advance.
1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Use below content.xml for your requirement and update the field Labels

 

<?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="User Menu"
    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">
            <tabs
                jcr:primaryType="nt:unstructured"
                jcr:title="General"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <usersubmenu
                        jcr:primaryType="nt:unstructured"
                        jcr:title="User Submenu"
                        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">
                            <tab
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <details
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/form/multifield"
                                        class="full-width"
                                        fieldDescription="Click 'Add field' to add a new form label and text field"
                                        fieldLabel="Enter your label">
                                        <field
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                            acs-commons-nested=""
                                            name="./myUserSubmenu">
                                            <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">
                                                        <title
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                            fieldDescription="Enter User Submenu title"
                                                            fieldLabel="Form label"
                                                            name="./formLabel"/>
                                                        <link
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                            fieldDescription="Enter User Submenu Link"
                                                            fieldLabel="Text Field"
                                                            name="./textField"/>                                                        
                                                    </items>
                                                </column>
                                            </items>
                                        </field>
                                    </details>
                                </items>
                            </tab>
                        </items>
                    </usersubmenu>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

 

View solution in original post

2 Replies

Avatar

Correct answer by
Employee Advisor

Use below content.xml for your requirement and update the field Labels

 

<?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="User Menu"
    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">
            <tabs
                jcr:primaryType="nt:unstructured"
                jcr:title="General"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <usersubmenu
                        jcr:primaryType="nt:unstructured"
                        jcr:title="User Submenu"
                        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">
                            <tab
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <details
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/form/multifield"
                                        class="full-width"
                                        fieldDescription="Click 'Add field' to add a new form label and text field"
                                        fieldLabel="Enter your label">
                                        <field
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                            acs-commons-nested=""
                                            name="./myUserSubmenu">
                                            <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">
                                                        <title
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                            fieldDescription="Enter User Submenu title"
                                                            fieldLabel="Form label"
                                                            name="./formLabel"/>
                                                        <link
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                            fieldDescription="Enter User Submenu Link"
                                                            fieldLabel="Text Field"
                                                            name="./textField"/>                                                        
                                                    </items>
                                                </column>
                                            </items>
                                        </field>
                                    </details>
                                </items>
                            </tab>
                        </items>
                    </usersubmenu>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

 

Avatar

Community Advisor

Hi @Arindam15 ,

          follow this blog for your use case

https://aemhints.com/2020/10/24/coral-multifield-aem65/

and to access the multifield  item write a sling model.

call this sling model into your sightly.

Kr,

Sanjay