Dynamic Drop in Content Fragment

Hi ​@Saiteja-09 ,
Your servlet populates the dropdowns at editor load.

• On re‑open, your script rebuilds the dropdown options, but:
  • It does not re‑apply the previously saved value as the selected option
  • The rebuilt options don’t contain an item whose value exactly matches the stored JCR value.
• The path text field works because you are not overriding its widget, it just shows whatever is in JCR.

Result: Values are in CRXDE, but the Coral <coral-select> has no matching option marked as selected, so the UI looks empty.

Assuming you’re in the classic CF editor / Touch UI with a servlet:

1. Do not replace the field or its name: Keep the original field from the CF model (e.g. ./field1, ./field2). Only change its options, not the underlying input.
2. Before clearing options, cache the persisted value

   function populateFirstDropdown(selectEl) {
     // 1) Persisted value that CF editor already loaded from JCR
     var storedValue = selectEl.value || "";
   
     // 2) Fetch options from servlet
     $.getJSON("/bin/myTagsServlet", function(items) {
       // Clear existing options
       selectEl.items.clear(); // Coral API
   
       // Rebuild options
       items.forEach(function(item) {
         var option = new Coral.Select.Item();
         option.value = item.value;        // must match JCR value
         option.content.textContent = item.text;
         selectEl.items.add(option);
       });
   
       // 3) Re‑apply saved value, if still valid
       if (storedValue) {
         selectEl.value = storedValue;    // selects the right option
       }
     });
   }
   

3. On CF editor load, run population and re‑select

   $(window).on("foundation-contentloaded", function () {
     $("coral-select.my-first-dd").each(function () {
       populateFirstDropdown(this);
   
       // If first dropdown already has a value, also repopulate the second
       var stored = this.value;
       if (stored) {
         populateSecondDropdownForTab(this); // use same function as your change handler
       }
     });
   
     $("coral-select.my-second-dd").each(function () {
       var selectEl = this;
       var storedValue = selectEl.value || "";
       if (storedValue) {
         populateSecondDropdown(selectEl, storedValue); // repopulate + select saved fragment
       }
     });
   });
   

4. Second dropdown & path field
   • Use the same pattern: when you refill the second dropdown based on the first dropdown’s value, first read its persisted value and set selectEl.value after adding the new options.
   • The path text field can stay as is; it will automatically show the stored fragment path.
5. Make sure option value matches JCR
   • Whatever gets stored (e.g. myTagId or /content/dam/.../myFragment) must be exactly the option.value you set when rebuilding, otherwise Coral can’t show it as selected.

If you’re on AEM as a Cloud Service with the new CF editor:

The official, future‑proof way to do dynamic dropdowns is via a CF Editor UI Extension, not an old‑style Granite datasource. See the sample custom field implementation: https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/developing/extensibility/ui/content-fragments/examples/editor-custom-field

In that setup, as long as your custom field writes a stable string value back to the fragment, the new editor will persist and restore the selection correctly.

Thanks,
Amit