I want to create a dynamic dropdown

[Ronnie09]

I have 2 color dropdown --- Background and font color

Background Color

1.) White is selected ---------------  font color --->black, green, grey should appear

2.) Black is selected ---------------- font color -----> white,grey should appear

How to do this dynamically 

[Siva_Sogalapalli · Accepted solution]

Hi @Ronnie09 

I've created sample dialog for you & you can update options based on your need. Hope this will help you.

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

[Vijayalakshmi_S]

Hi @Ronnie09,

Please find below dialog content xml for your use case. 

Note :

We need to use either Coral UI 2 or Coral UI 3 resource, do not mix both. 

If you are looking to create layouts like tabs or fixed columns, we have an equivalent resource in Coral UI 3. You can use the same if desired. 

Full list of available UI2 and UI 3 components is available here - https://www.adobe.io/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite...

Example : 

• Coral UI 2 tabs : granite/ui/components/foundation/layouts/tabs
• Coral UI 3 tabs : granite/ui/components/coral/foundation/tabs

<?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="Dynamic Dropdown"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        margin="{Boolean}true">
        <items jcr:primaryType="nt:unstructured">
            <content
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <background
                        granite:class="cq-dialog-dropdown-showhide"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                        fieldLabel="Background"
                        name="./background">
                        <items jcr:primaryType="nt:unstructured">
                            <option1
                                jcr:primaryType="nt:unstructured"
                                text="White"
                                value="white"/>
                            <option2
                                jcr:primaryType="nt:unstructured"
                                text="Black"
                                value="black"/>
                        </items>
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            cq-dialog-dropdown-showhide-target=".background-showhide-target"/>
                    </background>
                    <fontgrp-black
                        granite:class="hide background-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="black"/>
                        <items jcr:primaryType="nt:unstructured">
                            <fontcolorblack
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                fieldLabel="Font color"
                                name="./font">
                                <items jcr:primaryType="nt:unstructured">
                                    <option1
                                        jcr:primaryType="nt:unstructured"
                                        text="White"
                                        value="white"/>
                                    <option2
                                        jcr:primaryType="nt:unstructured"
                                        text="Grey"
                                        value="grey"/>
                                </items>
                            </fontcolorblack>
                        </items>
                    </fontgrp-black>
                    <fontgrp-white
                        granite:class="hide background-showhide-target foundation-layout-util-vmargin"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <fontcolor
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                fieldLabel="Font color"
                                name="./font">
                                <items jcr:primaryType="nt:unstructured">
                                    <option1
                                        jcr:primaryType="nt:unstructured"
                                        text="Black"
                                        value="black"/>
                                    <option2
                                        jcr:primaryType="nt:unstructured"
                                        text="Green"
                                        value="green"/>
                                    <option3
                                        jcr:primaryType="nt:unstructured"
                                        text="Grey"
                                        value="grey"/>
                                </items>
                            </fontcolor>
                        </items>
                        <granite:data
                            jcr:primaryType="nt:unstructured"
                            showhidetargetvalue="white"/>
                    </fontgrp-white>
                </items>
            </content>
        </items>
    </content>
</jcr:root>

Screenshot :