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
Solved! Go to Solution.
Views
Replies
Total Likes
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>
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>
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 :
<?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 :