In multifield show hide is not working as expected | Community
Skip to main content
Level 6
January 19, 2022
Solved

In multifield show hide is not working as expected

  • January 19, 2022
  • 2 replies
  • 786 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by chavad

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-multivalued.js

Also, check the similar implementation here -

https://github.com/divyashree11/demo-aem/tree/master/ui.apps/src/main/content/jcr_root/apps/demo/components/multifield

2 replies

Anish-Sinha
Adobe Employee
Adobe Employee
January 19, 2022
chavad
chavadAccepted solution
Level 2
January 24, 2022