Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to add multifields under selected dropdowns

Avatar

Level 4

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
Level 5

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

Level 5

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
Level 5

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>