Adobe Experience Manager Sites & More

SaiM · 11/12/2025

Hello,

I have a show-hide container inside a multi-field component. In that one container have a dynamic dropdown which uses AJAX to fetch the dropdown options(Content fragment Variation as options).Successfully fetching the data, But when I author and open the dialog again the value is getting reset/showing the first option in the list. How can we resolve this kind of issues.

Thanks in advance for your response.

arunpatidar · 16/12/2025

Hi @SaiM

You can check another example at https://medium.com/@arunpatidar26/dynamic-dropdown-in-aem-touch-ui-cc502022da24

Arun Patidar

Ver solução na publicação original

Kamal_Kishor · 11/12/2025

@SaiM - It looks like a case when your field value is not getting stored at all. Or it could be getting stored at a different node/path.

Can you check in crx/de when you author it?

If you still feel the issue is there, maybe share the dialog xml and we can see what could be the issue.
thanks.

SaiM · 11/12/2025

Hi @Kamal_Kishor ,

In CRX data is storing at the correct node, here is the dialog of the component

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Comparison Chart Dialog"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[project.authoring.dialog]">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<granite:data
jcr:primaryType="nt:unstructured"
component-path="${requestPathInfo.suffix}"/>
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true">
<items
jcr:primaryType="nt:unstructured"
sling:hideChildren="[properties]">
<general
jcr:primaryType="nt:unstructured"
jcr:title="General"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<productAnalytics
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add field' to add product analytics."
fieldLabel="Product Analytics(y-axis)"
required="{Boolean}true">
<granite:data
jcr:primaryType="nt:unstructured"
min-item="4"/>
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./productAnalytics">
<items jcr:primaryType="nt:unstructured">
<analytsVersion
granite:class="cq-dialog-dropdown-showhide-multi analytsVariation-drop-down"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Analyts Version"
name="./analytsVersion">
<items jcr:primaryType="nt:unstructured">
<analyts
jcr:primaryType="nt:unstructured"
text="Analyts"
value="analyts"/>
<products
jcr:primaryType="nt:unstructured"
text="Products"
value="products"/>
</items>
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-dropdown-showhide-multi-target=".analytsVariation-showhide-target"/>
</analytsVersion>
<analytsColumn
granite:class="analytsVariation-showhide-target analytsColumn"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
extraClientlibs="[core.wcm.components.contentfragment.v1.dialog]"
helpPath="https://www.adobe.com/go/aem_cmp_contentfragment_v1"
trackingFeature="core-components:contentfragment:v1">
<items jcr:primaryType="nt:unstructured">
<fragmentPath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
emptyText="Enter or select Content Fragment"
fieldDescription="Path to the Content Fragment to display."
fieldLabel="Content Fragment"
name="./fragmentPath"
pickerTitle="Select Content Fragment"/>

<variationName
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
granite:class="cf-variation-select"
fieldDescription="Specify which variation to display"
fieldLabel="Variation"
name="./variationName"/>
</items>
<granite:data
jcr:primaryType="nt:unstructured"
showhidemultitargetvalue="analyts"/>
</analytsColumn>
<productsColumn
granite:class="analytsVariation-showhide-target productsColumn"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<showInfoIcon
cq:showOnCreate="{Boolean}true"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
checked="{Boolean}true"
fieldDescription="Check this to show Info icon after product name"
name="./showInfoIcon"
required="{Boolean}false"
text="Show Info icon after product name"
uncheckedValue="{Boolean}false"
value="{Boolean}true"/>
<productDescriptionHeaderText
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Product Description Header Text"
fieldLabel="Product Description Header Text"
maxlength="110"
name="./productDescriptionHeaderText"
required="{Boolean}false"/>
</items>
<granite:data
jcr:primaryType="nt:unstructured"
showhidemultitargetvalue="products"/>
</productsColumn>
</items>
</field>
</productAnalytics>
</items>
</column>
</items>
</general>
</items>
</tabs>
</items>
</content>
</jcr:root>
Node data -

Dialog -
While authoring and done

when trying to reauthor variation is empty

The Variation are loading based on the content fragment path which we author above.

Kamal_Kishor · 12/12/2025

@SaiM - You need to bind the selected value on dialog-ready event.

Inside your javascript you will have to do something like this (you may have to update it if this is inside a multi-field).

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

    $(document).on("dialog-ready", function () {
        $("coral-select[data-dynamic-select]").each(function () {
            var select = this;
            var $select = $(select);

            // The value stored in JCR (already present in the field)
            var savedValue = $select.val();

            // Observe when options finish loading
            var observer = new MutationObserver(function() {
                if ($select.find("coral-select-item").length > 0) {
                    if (savedValue) {
                        select.value = savedValue;
                    }
                    observer.disconnect();
                }
            });
            observer.observe(select, { childList: true, subtree: true });
        });
    });
})(document, Granite.$);

If you still face this issue and you are ok to share the component, dialog xml and javascript as a package, someone might be able to help you with your eaxct issue.

thanks.

SaiM · 16/12/2025

Thanks for checking the issue @Kamal_Kishor . I followed the hidden field approach for saving the values. It is working as expected and saving the authored values no reset is happening.