Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

RagioGroup show/hide children into select

Avatar

Level 2

Hello, I have the following XML code, the behavior I am trying to do is that, depending on the selects, I can show/hide the corresponding radiobuttons, with multiple classes.

The thing is, I couldn't get my XML to work or show the "showhidetargetvalue" class even though I included it.

							<themeColor jcr:primaryType="nt:unstructured"
									sling:resourceType="granite/ui/components/foundation/form/select"
									fieldLabel="Tema" 
									name="./themeColor"
									class="cq-dialog-dropdown-showhide"
									cq-dialog-dropdown-showhide-target=".tipo01">
								<items jcr:primaryType="nt:unstructured">
									<select
											jcr:primaryType="nt:unstructured"
											text="Selecciona un tema"
											value=""/>
									<primaryBg
											jcr:primaryType="nt:unstructured"
											text="Primary backgroung"
											value="primary-bg"/>
									<secondaryBg
											jcr:primaryType="nt:unstructured"
											text="Secondary backgroung"
											value="secondary-bg"/>

								</items>
							</themeColor>
							<radiogroup-columns
								jcr:primaryType="nt:unstructured"
								sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
								deleteHint="{Boolean}false"
								fieldLabel="Color de texto"
								name="./radioColor"
								vertical="{Boolean}false">
								<items jcr:primaryType="nt:unstructured">
									<column1
										jcr:primaryType="nt:unstructured"
										text="White font color"
										value="white-font-color"
										granite:class="tipo01 hide"
										granite:showhidetargetvalue="primary-bg"
										sling:resourceType="granite/ui/components/foundation/form/radio"/>

								</items>
							</radiogroup-columns>

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
12 Replies

Avatar

Level 2

Hi @Tenu 

You will need dialog level JS for show hide to work. You can refer this similar question for more details - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/cq-dialog-checkbox-showhid...

Avatar

Level 2

Hi, i already have dialog level JS for show hide to work, its working in others selects, my problems are with radiobuttons.

(function (document, $, Coral) {
    "use strict";

    $(document).on("foundation-contentloaded", function (e) {
        $(".cmp-list__editor coral-select.cq-dialog-dropdown-showhide", e.target).each(function (i, element) {
            var target = $(element).data("cqDialogDropdownShowhideTarget");
            if (target) {
                Coral.commons.ready(element, function (component) {
                    showHide(component, target);
                    component.on("change", function () {
                        showHide(component, target);
                    });
                });
            }
        });
        showHide($(".cq-dialog-dropdown-showhide", e.target));
    });

    function showHide(component, target) {
        var value = component.value;
        $(target).not(".hide").addClass("hide");
        $(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
    }

})(document, Granite.$, Coral);

Avatar

Community Advisor

@Tenu please make sure that the property showhidetargetvalue added in right place in the dialog. 

Follow below article for creating show/hide fields based on drop down selection

https://medium.com/@mayursatav/show-hide-cq-dialog-fields-based-on-drop-down-selection-in-aem-cf30f6...

Avatar

Community Advisor

Hi @Tenu, You can check the below article to Show/Hide AEM Dialog Fields on Dropdown Selection in AEM https://ms-29.com/aem/sites/show-hide-aem-dialog-fields-on-dropdown-selection

<themeColor jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/select"
  fieldLabel="Tema"
  name="./themeColor"
  granite:class="cq-dialog-dropdown-showhide">
  <items jcr:primaryType="nt:unstructured">
    <select jcr:primaryType="nt:unstructured"
      text="Selecciona un tema"
      value=""/>
    <primaryBg jcr:primaryType="nt:unstructured"
      text="Primary backgroung"
      value="primary-bg"/>
    <secondaryBg jcr:primaryType="nt:unstructured"
      text="Secondary backgroung"
      value="secondary-bg"/>
  </items>
  <granite:data jcr:primaryType="nt:unstructured"
    cq-dialog-dropdown-showhide-target=".theme-color-show-hide"/>
</themeColor>
<primaryBgContainer jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/container"
  granite:class="hide theme-color-show-hide">
  <items jcr:primaryType="nt:unstructured">
    <radiogroup-columns jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
      deleteHint="{Boolean}false"
      vertical="{Boolean}false"
      fieldLabel="Color de texto"
      name="./radioColor">
      <items jcr:primaryType="nt:unstructured">
        <column1 jcr:primaryType="nt:unstructured"
          text="White font color"
          value="white-font-color"
          sling:resourceType="granite/ui/components/foundation/form/radio"/>
      </items>
    </radiogroup-columns>
  </items>
  <granite:data jcr:primaryType="nt:unstructured"
    showhidetargetvalue="primary-bg"/>
</primaryBgContainer>

 

Avatar

Level 2

That doesnt works, i have something like that, but cannot works... i wanna add custom attr to my radiobutton 

 

 

							<themeColor jcr:primaryType="nt:unstructured"
									sling:resourceType="granite/ui/components/foundation/form/select"
									fieldLabel="Tema" 
									name="./themeColor"
									class="cq-dialog-dropdown-showhide"
									cq-dialog-dropdown-showhide-target=".tipo01">
								<items jcr:primaryType="nt:unstructured">
									<select
											jcr:primaryType="nt:unstructured"
											text="Selecciona un tema"
											value=""/>
									<primaryBg
											jcr:primaryType="nt:unstructured"
											text="Primary backgroung"
											value="primary-bg"/>
									<secondaryBg
											jcr:primaryType="nt:unstructured"
											text="Secondary backgroung"
											value="secondary-bg"/>
									<tertiaryBg
											jcr:primaryType="nt:unstructured"
											text="Tertiary backgroung"
											value="tertiary-bg"/>
									<inverseBg
											jcr:primaryType="nt:unstructured"
											text="Inverse backgroung"
											value="inverse-bg"/>
									<disabledBg
											jcr:primaryType="nt:unstructured"
											text="Disabled backgroung"
											value="disabled-bg"/>
									<brandPrimaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand primary backgroung"
											value="brand-primary-bg"/>
									<brandSecondaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand secondary backgroung"
											value="brand-secondary-bg"/>
									<brandTertiaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand tertiary backgroung"
											value="brand-tertiary-bg"/>
								</items>
							</themeColor>

							<radiogroup-columns
								jcr:primaryType="nt:unstructured"
								sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
								deleteHint="{Boolean}false"
								fieldLabel="Color de texto"
								name="./radioColor"
								vertical="{Boolean}false">
								<items jcr:primaryType="nt:unstructured">
									<column1
										jcr:primaryType="nt:unstructured"
										text="White font color"
										value="white-font-color"
										sling:resourceType="granite/ui/components/foundation/form/radio"/>												
									<column2 
										jcr:primaryType="nt:unstructured"
										text="Black font color"
										value="black-font-color"
										checked="{Boolean}true"
										sling:resourceType="granite/ui/components/foundation/form/radio"/>
									<column3
										jcr:primaryType="nt:unstructured"
										text="Content interactive primary font color"
										value="content-inter-primary-font-color"
										sling:resourceType="granite/ui/components/foundation/form/radio"/>
								</items>
							</radiogroup-columns>

 

Avatar

Community Advisor

Hi @Tenu ,

 

Can you please try the below snippet, It will work.

<themeColor jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldLabel="Tema"
name="./themeColor"
class="cq-dialog-dropdown-showhide"
cq-dialog-dropdown-showhide-target=".tipo01">
<items jcr:primaryType="nt:unstructured">
<select
jcr:primaryType="nt:unstructured"
text="Selecciona un tema"
value=""/>
<primaryBg
jcr:primaryType="nt:unstructured"
text="Primary backgroung"
value="primary-bg"/>
<secondaryBg
jcr:primaryType="nt:unstructured"
text="Secondary backgroung"
value="secondary-bg"/>

</items>
</themeColor>
<radioGroup
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container"
class="hide tipo01"
showhidetargetvalue="primary-bg">
<items jcr:primaryType="nt:unstructured">
<radiogroup-columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
deleteHint="{Boolean}false"
fieldLabel="Color de texto"
name="./radioColor"
vertical="{Boolean}false">
<items jcr:primaryType="nt:unstructured">
<column1
jcr:primaryType="nt:unstructured"
text="White font color"
value="white-font-color"
sling:resourceType="granite/ui/components/foundation/form/radio"/>
</items>
</radiogroup-columns>
</items>
</radioGroup>

 

Avatar

Level 2

Hi, i tried this and works.

But now I have to modify my js code so that it works for multiple values ​​of the showhidetargetvalue.

 

<themeColor jcr:primaryType="nt:unstructured"
									sling:resourceType="granite/ui/components/foundation/form/select"
									fieldLabel="Tema" 
									name="./themeColor"
									class="cq-dialog-dropdown-showhide"
									cq-dialog-dropdown-showhide-target=".tipo01">
								<items jcr:primaryType="nt:unstructured">
									<select
											jcr:primaryType="nt:unstructured"
											text="Selecciona un tema"
											value=""/>
									<primaryBg
											jcr:primaryType="nt:unstructured"
											text="Primary backgroung"
											value="primary-bg"/>
									<secondaryBg
											jcr:primaryType="nt:unstructured"
											text="Secondary backgroung"
											value="secondary-bg"/>
									<tertiaryBg
											jcr:primaryType="nt:unstructured"
											text="Tertiary backgroung"
											value="tertiary-bg"/>
									<inverseBg
											jcr:primaryType="nt:unstructured"
											text="Inverse backgroung"
											value="inverse-bg"/>
									<disabledBg
											jcr:primaryType="nt:unstructured"
											text="Disabled backgroung"
											value="disabled-bg"/>
									<brandPrimaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand primary backgroung"
											value="brand-primary-bg"/>
									<brandSecondaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand secondary backgroung"
											value="brand-secondary-bg"/>
									<brandTertiaryBg
											jcr:primaryType="nt:unstructured"
											text="Brand tertiary backgroung"
											value="brand-tertiary-bg"/>
								</items>
							</themeColor>
							<radiogroup-columns
								jcr:primaryType="nt:unstructured"
								sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
								deleteHint="{Boolean}false"
								fieldLabel="Color de texto"
								name="./radioColor"
								vertical="{Boolean}false">
								<items jcr:primaryType="nt:unstructured">
									<radio1
										jcr:primaryType="nt:unstructured"
										text="White font color"
										value="white-font-color"
										granite:class="hide tipo01">
										<granite:data jcr:primaryType="nt:unstructured"
											showhidetargetvalue="inverse-bg brand-primary-bg 
											brand-secondary-bg"/>
									</radio1>											
									<radio2
										jcr:primaryType="nt:unstructured"
										text="Black font color"
										granite:class="hide tipo01"
										value="black-font-color"
										checked="{Boolean}true">
										<granite:data jcr:primaryType="nt:unstructured"
										showhidetargetvalue="primary-bg brand-primary-bg brand-tertiary-bg"/>
									</radio2>	
									<radio3
										jcr:primaryType="nt:unstructured"
										text="Content interactive primary font color"
										value="content-inter-primary-font-color"
										granite:class="hide tipo01">
										<granite:data jcr:primaryType="nt:unstructured"
											showhidetargetvalue="secondary-bg tertiary-bg disabled-bg brand-primary-bg brand-tertiary-bg"/>
									</radio3>
								</items>
							</radiogroup-columns>

 

(function (document, $, Coral) {
    "use strict";

    $(document).on("foundation-contentloaded", function (e) {
        $(".cmp-list__editor coral-select.cq-dialog-dropdown-showhide", e.target).each(function (i, element) {
            var target = $(element).data("cqDialogDropdownShowhideTarget");
            if (target) {
                Coral.commons.ready(element, function (component) {
                    showHide(component, target);
                    component.on("change", function () {
                        showHide(component, target);
                    });
                });
            }
        });
        showHide($(".cq-dialog-dropdown-showhide", e.target));
    });

    function showHide(component, target) {
        var value = component.value;
        $(target).not(".hide").addClass("hide");
        $(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
    }

})(document, Granite.$, Coral);

Avatar

Correct answer by
Community Advisor

Avatar

Community Advisor

@Tenu, Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

Avatar

Level 2

@sravs Another question, now I have a small bug where when opening the dialogue for the first time, my radio buttons are hidden and won't change until the select is opened or changed. Any solution?

Avatar

Community Advisor

@Tenu , Please check for which options you are showing the radio buttons and for which you are hiding.

 

Please keep a default value as selected in your dropdown for which the radio buttons will be populated

Avatar

Community Advisor

@Tenu, I can see from previous comments from you that you are adding showhidetargetvalue under each and every radio button instead of keeping it in parent container level, Please update your dialog in this way and check.

<themeColor jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/select"
            fieldLabel="Tema"
            name="./themeColor"
            class="cq-dialog-dropdown-showhide"
            cq-dialog-dropdown-showhide-target=".tipo01">
    <items jcr:primaryType="nt:unstructured">
        <select
            jcr:primaryType="nt:unstructured"
            text="Selecciona un tema"
            value=""/>
        <primaryBg
            jcr:primaryType="nt:unstructured"
            text="Primary backgroung"
            value="primary-bg"/>
        <secondaryBg
            jcr:primaryType="nt:unstructured"
            text="Secondary backgroung"
            value="secondary-bg"/>

    </items>
</themeColor>
<radioGroup
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    class="hide tipo01"
    showhidetargetvalue="primary-bg">
    <items jcr:primaryType="nt:unstructured">
        <radiogroup-columns
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
            deleteHint="{Boolean}false"
            fieldLabel="Color de texto"
            name="./radioColor"
            vertical="{Boolean}false">
            <items jcr:primaryType="nt:unstructured">
                <column1
                    jcr:primaryType="nt:unstructured"
                    text="White font color"
                    value="white-font-color"
                    sling:resourceType="granite/ui/components/foundation/form/radio"/>
            </items>
        </radiogroup-columns>
    </items>
</radioGroup>