RagioGroup show/hide children into select | Community
Skip to main content
T
Tenu
Level 2
April 19, 2024
Solved

RagioGroup show/hide children into select

  • April 19, 2024
  • 4 replies
  • 1940 views

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>

 

 

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 sravs

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

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

4 replies

chavad
chavad
Level 2
April 19, 2024

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-showhide-not-working-for-checkbox/m-p/589581#M147174

    T
    TenuAuthor
    Level 2
    April 19, 2024

    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
      Community Advisor
      sravsCommunity Advisor
      Community Advisor
      April 20, 2024

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

        Mahedi_Sabuj
        Community Advisor
        Mahedi_SabujCommunity Advisor
        Community Advisor
        April 21, 2024

        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>

         

        Mahedi Sabuj
          T
          TenuAuthor
          Level 2
          April 23, 2024

          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
            Community Advisor
            sravsCommunity Advisor
            Community Advisor
            April 23, 2024

            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>

             

              sravs
              Community Advisor
              sravsCommunity Advisor
              Community Advisor
              April 25, 2024

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

                T
                TenuAuthor
                Level 2
                April 25, 2024

                @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
                  Community Advisor
                  sravsCommunity Advisor
                  Community Advisor
                  April 25, 2024

                  @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

                    Terms & ConditionsAccessibility statement

                    Loading footer...