Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

I want to create a dynamic dropdown

Ronnie09
Level 4
Level 4

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 

1 Accepted Solution
SivaPrasadReddyS
Correct answer by
Level 8
Level 8

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>

 

View solution in original post

2 Replies
SivaPrasadReddyS
Correct answer by
Level 8
Level 8

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>

 

View solution in original post

Vijayalakshmi_S
Community Advisor
Community Advisor

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 herehttps://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 : 

Vijayalakshmi_S_2-1637164890348.pngVijayalakshmi_S_3-1637164913310.png