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

[gnaneswar88]

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

[SantoshSai]

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!

[Kirthika]

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]

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.

[Kirthika]

Exactly I can be able to get the values through the hidden filed which I have written through html for reference but can be able to show that in the dialog field.

Any Suggestions for that?

[Kirthika]

I have tried multiple approaches but can't able to show that selected value again opening the dialog.

[SantoshSai]

Add a JS script in your component's cq:dialog clientlib or page-level clientlib to hook into the dialog lifecycle.

[kapil_rajoria]

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

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.

[arunpatidar]

Hi @gnaneswar88 

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