Expand my Community achievements bar.

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