Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
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