I want to create a dynamic dropdown | Community
Skip to main content
R
Ronnie09
Level 6
November 17, 2021
Solved

I want to create a dynamic dropdown

  • November 17, 2021
  • 2 replies
  • 1124 views

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 

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 Siva_Sogalapalli

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>

 

2 replies

Siva_Sogalapalli
Community Advisor
Siva_SogalapalliCommunity AdvisorAccepted solution
Community Advisor
November 17, 2021

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
    Vijayalakshmi_S
    Level 10
    November 17, 2021

    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/ui/components/legacy/coral2/migration.html

    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 : 

      Terms & ConditionsAccessibility statement

      Loading footer...