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

How to add multifields under selected dropdowns

Avatar

Level 7

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>