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

How to add multifields under selected dropdowns

Avatar

Level 6

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>
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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>

 

View solution in original post

2 Replies

Avatar

Community Advisor

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.

 

Avatar

Correct answer by
Community Advisor

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>