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.
