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

In multifield show hide is not working as expected

Avatar

Level 7

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

1 Accepted Solution

Avatar

Correct answer by
Level 2
2 Replies

Avatar

Correct answer by
Level 2

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 -

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