RagioGroup show/hide children into select

[Tenu]

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>

[chavad]

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

[Tenu]

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);

[sravs]

@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...

[Mahedi_Sabuj]

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>

[Tenu]

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>

[sravs]

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>

[Tenu]

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);

[sravs · Accepted solution]

Hi @Tenu , Refer below document for multivalue show/hide

https://www.linkedin.com/pulse/aem-hideshow-drop-down-select-options-more-than-one-values-vikraman

[sravs]

@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.

[Tenu]

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

[sravs]

@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

[sravs]

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