Help needed with conditional fields and dropdown value storage issue in AEM component multifield | Community
Skip to main content
G
gnaneswar88
May 29, 2025
Solved

Help needed with conditional fields and dropdown value storage issue in AEM component multifield

  • May 29, 2025
  • 4 replies
  • 1558 views

 

Hi Adobe Community,

I’m working on an AEM component that includes:

  • A dropdown with 8 options.

  • 7 fields in total, out of which 4 fields are common for all 8 dropdown options.

  • For 7 of the dropdown options, there is an additional common field (let’s call it Field A).

  • For the 8th dropdown option, I want to hide Field A (the extra field common to the other 7 options) and instead show 2 different extra fields that should be hidden for the other 7 options.

Additionally, inside this component, I have a multifield that follows the same conditional logic as described above for its fields and dropdown options.

My questions are:

  1. How can I implement this conditional showing/hiding of fields based on the dropdown selection within the component and multifield?

  2. Why are the dropdown values not storing correctly in CRXDE? After submitting the dialog and reopening it, the values seem to change unexpectedly. What might be causing this issue?

I would appreciate any guidance or best practices for setting up such conditional fields and troubleshooting the value storage problem.

Thanks in advance

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 kapil_rajoria

Hi @gnaneswar88,
please refer: https://sadyrifat.medium.com/show-hide-aem-cq-dialog-fields-based-on-select-field-selection-a-comprehensive-guide-bee591abd24c

I am assuming, your case is this:
Dropdown options: ["A", "B", "C", "D", "E", "F", "G", "H"]

Dropdown Value Show Fields
A–G Field 1–4 (common) + Field A
H Field 1–4 (common) + Field B and Field C (but hide A)


The first will be your dropdown, then the 4 common fields and then field A (show when required - refer above article link) and Field B and C (show when required - refer above article link)

Now coming to the part, you are using the above inside the multifiled. This is not a recommended approach. Instead I would suggest you to create a separate component for the above and then use data-sly-resource (to embed it) and data-sly-list (any no. of times).
The no. of times can be authorable in the parent component.

"Why are the dropdown values not storing correctly in CRXDE? After submitting the dialog and reopening it, the values seem to change unexpectedly. What might be causing this issue?"
This will not happen if your implementation is correct.

4 replies

SantoshSai
Community Advisor
SantoshSaiCommunity Advisor
Community Advisor
May 29, 2025

Hi @gnaneswar88,

1. How can I implement this conditional showing/hiding of fields based on the dropdown selection within the component and multifield?
Use granite:data with cq-dialog-dropdown-showhide

AEM provides the cq-dialog-dropdown-showhide mechanism using data attributes to conditionally show or hide fields based on a dropdown value.

Step-by-step:

  1. Dropdown field

    <dropdown jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" name="./dropdown" fieldLabel="Select an Option" class="cq-dialog-dropdown-showhide" data-cq-dialog-dropdown-showhide-target=".conditional-fields"> <items jcr:primaryType="nt:unstructured"> <option1 jcr:primaryType="nt:unstructured" text="Option 1" value="option1"/> <option2 jcr:primaryType="nt:unstructured" text="Option 2" value="option2"/> ... <option8 jcr:primaryType="nt:unstructured" text="Option 8" value="option8"/> </items> </dropdown>

  2. Wrap conditional fields with unique class names

    <fieldA jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" name="./fieldA" fieldLabel="Field A" class="conditional-fields show-for-option1 show-for-option2 show-for-option3 show-for-option4 show-for-option5 show-for-option6 show-for-option7"/> <specialField1 jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" name="./specialField1" fieldLabel="Special Field 1" class="conditional-fields show-for-option8"/> <specialField2 jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" name="./specialField2" fieldLabel="Special Field 2" class="conditional-fields show-for-option8"/>

  3. Clientlib (JS) to control visibility
    Add a custom clientlib with a JS like this:

    $(document).on("foundation-contentloaded", function () { $(".cq-dialog-dropdown-showhide").each(function () { var $select = $(this); var target = $select.data("cqDialogDropdownShowhideTarget"); function showHideFields() { var value = $select.val(); $(target).each(function () { var $field = $(this); var show = $field.hasClass("show-for-" + value); show ? $field.show() : $field.hide(); }); } $select.on("change", showHideFields); showHideFields(); // Initial call }); });

For Multifield Conditional Logic:

It’s the same logic within each multifield entry.

  • Your multifield should use composite=true and inside each field group, place the dropdown and related fields.

  • Ensure each set of fields inside the multifield entry has the same cq-dialog-dropdown-showhide setup.

  • The script above will work on these too if the selectors are scoped properly (e.g., using $(this).closest() to limit scope within multifield entry).

2. Why are the dropdown values not storing correctly in CRXDE?

This is a common headache in AEM dialogs. Here are possible causes and fixes:

1. Wrong or Missing name Attribute

Always set the name attribute (e.g., name="./dropdown") for all fields. Missing name means data won’t persist.

2. Incorrect value Matching

If the value attribute in your <items> doesn’t match the class names in the conditional fields, things might break or reset.

3. Multifield with name="./myfield" Directly on the Wrapper

If you put the name attribute on the multifield wrapper instead of each individual field inside, AEM may not store values properly. Always use:

<myMultifield jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/multifield" composite="{Boolean}true" name="./items"> <field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> ... </field> </myMultifield>

4. JS Not Setting Field Visibility Correctly on Load

If your custom show/hide logic does not properly run on dialog load, hidden fields might lose values. Make sure your JS also runs on dialog foundation-contentloaded.

Hope that helps!

Santosh Sai
    K
    Kirthika
    Level 2
    May 29, 2025

    Hi Santhosh 
    Just to add Observation though i am using in one of my component like cq:authoirng-dialog and i have tried to retain the dialog value by using both foundation-content loaded and dialog-ready.

     

    But i cant able to retain the field value.

    Please suggest like this approach of overriding coral functionality to retain the values of authoring filed is recommended and it's achievable?

    SantoshSai
    Community Advisor
    SantoshSaiCommunity Advisor
    Community Advisor
    May 29, 2025

     

    Coral UI (via Granite) does not submit the values of fields that are hidden (display: none). So even if the field was filled in previously, if it’s hidden at the time of dialog submission, AEM simply ignores it.

    This is not a bug — it’s how the Coral UI intentionally behaves.

    Here’s how you can make sure values are retained, even when using conditional logic:

    Don't use display: none directly – use Coral's built-in mechanism

    Instead of manually hiding fields using jQuery().hide(), try:

    $element.closest(".coral-Form-fieldwrapper").attr("hidden", true);

    Or better yet:

    $element.closest(".coral-Form-fieldwrapper").css("display", "none").addClass("hide");

    But keep in mind, if the field is hidden at save time, its value is ignored. So…


    Workaround: Store the value somewhere even if the field is hidden

    If you must preserve values even for hidden fields (e.g., if the user wants to switch back to a previously selected dropdown option), here are your options:

    1. Use hidden fields to store values

    For example:

    • When the visible field gets a value, copy it to a hidden field.

    • Submit that hidden field, since it's always visible.

    $(".conditional-input").on("change", function () {
  var val = $(this).val();
  $(this).closest(".field-wrapper").find(".hidden-backup").val(val);
});
    2. Use data attributes to keep values in JS

    If fields are hidden and not submitted, but you want to retain the previously entered value, you can store the value in JS memory and restore it when the field becomes visible again.

    Santosh Sai
      kapil_rajoria
      Community Advisor
      kapil_rajoriaCommunity AdvisorAccepted solution
      Community Advisor
      May 30, 2025

      Hi @gnaneswar88,
      please refer: https://sadyrifat.medium.com/show-hide-aem-cq-dialog-fields-based-on-select-field-selection-a-comprehensive-guide-bee591abd24c

      I am assuming, your case is this:
      Dropdown options: ["A", "B", "C", "D", "E", "F", "G", "H"]

      Dropdown Value Show Fields
      A–G Field 1–4 (common) + Field A
      H Field 1–4 (common) + Field B and Field C (but hide A)


      The first will be your dropdown, then the 4 common fields and then field A (show when required - refer above article link) and Field B and C (show when required - refer above article link)

      Now coming to the part, you are using the above inside the multifiled. This is not a recommended approach. Instead I would suggest you to create a separate component for the above and then use data-sly-resource (to embed it) and data-sly-list (any no. of times).
      The no. of times can be authorable in the parent component.

      "Why are the dropdown values not storing correctly in CRXDE? After submitting the dialog and reopening it, the values seem to change unexpectedly. What might be causing this issue?"
      This will not happen if your implementation is correct.

        K
        Kirthika
        Level 2
        July 2, 2025

        This is not the scenario I described earlier. In my case, the dropdown values are being loaded from a JSON file and stored at /content/page/component/root. However, my concern is about the dialog values not being persistent.
        When I select a value and then close and reopen the dialog, the selected value is not retained.
        How can I make the selected value persist across dialog sessions?

        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        May 30, 2025

        Hi @gnaneswar88 

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

        Arun Patidar
          kautuk_sahni
          Community Manager
          kautuk_sahniCommunity Manager
          Community Manager
          June 23, 2025

          @gnaneswar88 Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you.

          Kautuk Sahni
          Terms & ConditionsAccessibility statement

          Loading footer...