How to add multifields under selected dropdowns

[Sanjana12]

Below is my code. I need to add multifields of manualpage and dynamic page under manual and dynamic respectively in the dropdown. Please help

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Test"
          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">
            <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/tabs"
                    maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Properties"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                    margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <listtitle
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                    fieldDescription="enter title"
                                                    fieldLabel="List Title"
                                                    name="./listtitle"/>
                                            <linkdetails

                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                    name="./linkdetails"
                                                    fieldLabel="Details">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <manual
                                                            jcr:primaryType="nt:unstructured"
                                                            name="manual"
                                                            text="manual"/>
                                                    <dynamic
                                                            jcr:primaryType="nt:unstructured"
                                                            name="dynamic"
                                                            text="dynamic"/>

                                                </items>
                                            </linkdetails>

                                            <manualpage
                                                    granite:class="hide list-option-listfrom-showhide-target foundation-layout-util-vmargin"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <granite:data
                                                jcr:primaryType="nt:unstructured"
                                                showhidetargetvalue="manual"/>
                                        <items jcr:primaryType="nt:unstructured">

                                        <well
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/well">
                                        <items jcr:primaryType="nt:unstructured">
                                                                <pagetitle
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                        emptyText="page title"
                                                                        fieldDescription="enter pagetitle"
                                                                        name="./pagetitle"
                                                                        required="{Boolean}true"
                                                                        validation="test-validate"/>
                                                                <pagelink
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                                        emptyText="page url"
                                                                        fieldDescription="enter pageurl"
                                                                        name="./pagelink"
                                                                        required="{Boolean}true"
                                                                        rootPath="/content"
                                                                        validation="test-validate"/>
                                                            </items>
                                        </well>
                                        </items>

                                            </manualpage>
                                            <dynamicpage
                                                    granite:class="hide list-option-listfrom-showhide-target foundation-layout-util-vmargin"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                                <granite:data
                                                        jcr:primaryType="nt:unstructured"
                                                        showhidetargetvalue="dynamic"/>
                                                <items jcr:primaryType="nt:unstructured">

                                                    <well
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/well">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <parentPage
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="cq/gui/components/coral/common/form/pagefield"
                                                                    fieldDescription="Leave empty to use current page"
                                                                    fieldLabel="Parent Page"
                                                                    name="./parentPage"
                                                                    rootPath="/content"/>
                                                            <childDepth
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                                                    fieldDescription="Controls how deep the child items can be added to the list"
                                                                    fieldLabel="Child Depth"
                                                                    max="100"
                                                                    min="1"
                                                                    name="./childDepth"
                                                                    step="1"
                                                                    value="1"/>




                                                        </items>
                                                    </well>
                                                </items>
                                            </dynamicpage>


                                        </items>
                                    </column>
                                </items>
                            </column>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

[ksh_ingole7]

Hi @Sanjana12 

I believe you want to show hide Manual and Dynamic sections based on the selection of dropdown. 

To do so, you can follow the below document :

https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral...

Thanks.

[Ganthimathi_R · Accepted solution]

Hi @Sanjana12 

Add the class cq-dialog-dropdown-showhide to the dropdown/select element like below,

<linkdetails

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/select"

granite:class="cq-dialog-dropdown-showhide"

name="./linkdetails"

fieldLabel="Details">

<granite:data

jcr:primaryType="nt:unstructured"

cq-dialog-dropdown-showhide-target=".list-option-listfrom-showhide-target"/>

<items jcr:primaryType="nt:unstructured">

<manual

jcr:primaryType="nt:unstructured"

value="manual"

text="manual"/>

<dynamic

jcr:primaryType="nt:unstructured"

value="dynamic"

text="dynamic"/>

</items>

</linkdetails>