How to Dynamically Change Asset Browser Root Path Based on PathBrowser Selection in AEM Dialog?

Hi @srimi1 

Use this method Client-side JavaScript using Coral / Granite APIs

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

$(document).on("dialog-ready", function () {
const postPathField = $("input[name='./selectSpecificPost']");
const assetBrowserField = $("input[name='./imagePath']");

if (!postPathField.length || !assetBrowserField.length) return;

function updateAssetBrowserRootPath(newPostPath) {
if (!newPostPath.startsWith("/content/mysite/")) return;

// Convert content path to DAM path
const localePath = newPostPath.replace("/content/mysite/", "");
const damPath = "/content/dam/mysite/" + localePath;

// Coral3 workaround: recreate assetbrowser with new root path
const wrapper = assetBrowserField.closest(".coral-Form-fieldwrapper");
const nameAttr = assetBrowserField.attr("name");
const valueAttr = assetBrowserField.val();

// Remove old
assetBrowserField.closest(".coral-Form-fieldwrapper").remove();

// Create new
const $newField = $(`
<input is="coral-textfield"
class="coral-Textfield assetbrowser"
name="${nameAttr}"
value="${valueAttr}"
data-assettype="images"
data-mimetype="image/*"
data-mode="single"
data-rootpath="${damPath}"
placeholder="Select an image"
aria-label="Image Path">
`);

wrapper.parent().append($newField);

// Re-init
Coral.commons.ready($newField[0], function () {
// Coral3 will auto-init the assetbrowser via class
});
}

// Initial binding
postPathField.on("change", function () {
const newPath = $(this).val();
updateAssetBrowserRootPath(newPath);
});
});
})(jQuery, Coral);

Keep a eye on it if needed.

• Use Coral.commons.ready() for safe component lifecycle.
• Handles dynamic recreation of the Asset Browser to apply new data-rootpath.
•  Minimal DOM manipulation; scoped only to dialog.
•  Scales for multifield usage (with adjustments).
•  Avoids backend load or unnecessary servlet calls.

Hi @srimi1 ,

Client-side JavaScript using Granite UI (Coral 3) APIs - most efficient and reliable solution

Why this is the Best Practice:

1. Runs in Dialog Context Only

  - No server-side overhead.

  - Lightweight and fast, triggered only during authoring in the dialog.

2. No Page Reloads / Server Round-Trips

  - Instant interaction between fields.

  - No AJAX calls or Sling servlets needed.

3. Granite/Coral APIs Are Meant for This

  - Officially supported way to work with dialogs.

  - Supports dynamic recreation of Coral components like pathfield, textfield, assetbrowser, etc.

4. Flexible and Scalable

  - Works with multifields, nested components, etc.

  - Can be enhanced with conditional logic or regex mapping.

Regards,
Amit

@karishma_begumsh Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!