I am trying to use show hide in multifield but the visuals are not working as expected
I have 2 dropdown
Background Color
1.) White is selected --------------- font color --->black, green, grey should appear
2.) Black is selected ---------------- font color -----> white,grey should appear
<?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="Configuration"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="https://www.adobe.com/go/aem6_2_docs_component_en#List">
<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">
<tab1
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<displayBy
granite:class="cq-dialog-dropdown-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Select how you want the content to be visualized"
fieldLabel="Display format"
name="./displayBy">
<items jcr:primaryType="nt:unstructured">
<white
jcr:primaryType="nt:unstructured"
text="White"
value="white"/>
<black
jcr:primaryType="nt:unstructured"
text="Black"
value="black"/>
</items>
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-dropdown-showhide-target=".limit-showhide-target"/>
</displayBy>
<white-container
granite:class="hide limit-showhide-target"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<displayBy
granite:class="cq-dialog-dropdown-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Select how you want the content to be visualized"
fieldLabel="Display format"
name="./displayBy">
<items jcr:primaryType="nt:unstructured">
<white
jcr:primaryType="nt:unstructured"
text="Green"
value="green"/>
<black
jcr:primaryType="nt:unstructured"
text="Grey"
value="Grey"/>
</items>
</displayBy>
</items>
</columns>
</items>
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue="white"/>
</white-container>
<black-container
granite:class="hide limit-showhide-target"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<displayBy
granite:class="cq-dialog-dropdown-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldDescription="Select how you want the content to be visualized"
fieldLabel="Display format"
name="./displayBy">
<items jcr:primaryType="nt:unstructured">
<white
jcr:primaryType="nt:unstructured"
text="Blue"
value="blue"/>
<black
jcr:primaryType="nt:unstructured"
text="Grey"
value="Grey"/>
</items>
</displayBy>
</items>
</columns>
</items>
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue="black"/>
</black-container>
</items>
</columns>
</items>
</tab1>
</items>
</content>
</jcr:root>
Now if I move this dropdown in Multifield what is happening is :
1.) If in multifield item0 -> I chose white and green combination
2.) In multifield item1 -> I chose black and white combination and click done
Once I try to reauthor the diallog in multifield item0 I can see the white dropdown chosen but instead of green it showing me white (along with white,grey as dropdown). It should show me green(along with black, green, grey dropdown).
I cant fix this issue what can be done? This will be used as resourceSuperType
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @Ronnie09 ,
To use the show-hide dropdown in multifield you need to use the js mentioned in below post - https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield-multivalue...
Also, check the similar implementation here -
Hi @Ronnie09 ,
There are lot of implementation for show hide feature in multifield. Below are some URL's for reference:
https://aem4beginner.blogspot.com/touch-ui-hideshow-fields-inside-coral-3
Hi @Ronnie09 ,
To use the show-hide dropdown in multifield you need to use the js mentioned in below post - https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield-multivalue...
Also, check the similar implementation here -
Views
Likes
Replies