How to extract & show the path of aem sites page properties thumbnail image dam asset | Community
Skip to main content
S
SwarnarghyaBa
New Member
June 18, 2025
Solved

How to extract & show the path of aem sites page properties thumbnail image dam asset

  • June 18, 2025
  • 3 replies
  • 776 views

Hello All, 

 

I am trying to extract the dam asset path & show it to a custom created read only text field dialog as soon as the user clicks on the "Select Image" button of the thumbnail tab & selects the thumbnail image from dam. To achieve this goal I have created a custom textfield dialog inside thumbnail tab pasting the xml as below: 

dialog structure:

<thumbnail
cq:showOnCreate="{Boolean}false"
jcr:primaryType="nt:unstructured"
jcr:title="Thumbnail"
sling:orderBefore="analytics"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items
jcr:primaryType="nt:unstructured"
sling:resourceSuperType="/libs/wcm/foundation/components/basicpage/v1/basicpage/tabs/thumbnail/items/column/items">
<thumbnail
jcr:primaryType="nt:unstructured"
sling:hideChildren="upload"
sling:resourceType="cq/gui/components/common/wcm/pagethumbnail"
page="${empty param.item ? requestPathInfo.suffix : param.item}"
quiet="{Boolean}true"/>
<dampath
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel=" DAM Path"
name="./dampath"
readOnly="{Boolean}true"
renderReadOnly="{Boolean}true"/>
</items>
</column>
</items>
</thumbnail>

i have also created a clintlibs folder & has written the below js 
js written in clientlibs for page component: 

document.addEventListener('DOMContentLoaded', function () {
const selectImageButton = document.querySelector('.js-browse-activator');
const damPathInput = document.querySelector('input[name="./dampath"]');

// Exit early if fields not found
if (!selectImageButton || !damPathInput) return;

selectImageButton.addEventListener('click', function () {
const thumbnailImage = document.querySelector('.cq-wcm-pagethumbnail-image');
const hiddenFileReference = document.querySelector('input[name="./image/fileReference"]');

console.log("thumbnail Image value:", thumbnailImage);
console.log("hidden file reference:", hiddenFileReference);

if (!hiddenFileReference) return;

// Immediately set if value exists
if (hiddenFileReference.value) {
damPathInput.value = hiddenFileReference.value;
}

// Set up observer to watch for changes in fileReference
const observer = new MutationObserver(() => {
const damValue = hiddenFileReference.value;
if (damValue) {
damPathInput.value = damValue;
}
});

observer.observe(hiddenFileReference, { attributes: true, attributeFilter: ['value'] });
});
});

The js is giving the asset path as below : 
Expected Result:


Issue with the code: 
The issue with my implementation is this js is only working after I am opening the page properties & then after I am selecting the thumbnail image the Dam Path is still showing the older path until I click on the Select Image button again, then only dam path is showing the correct path and after that working as expected, but the expectation is once I select the thumbnail image after opening page properties going to the tab selecting from the dam the path should could get update correctly in real time. I do not have to click on the "Select Image" button again. 

Can you kindly suggest what I am doing wrong in my implementation. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by konstantyn_diachenko

Hi @swarnarghyaba ,

 

Please ensure that page properties page tab has the following selectors:
- cq-wcm-pagethumbnail-hidden - this is an input where page thumbnail file reference is stored

- cq-wcm-pagethumbnail - this is a selector of the page thumbnail field 

 

Could you please say what exactly is not executing?

3 replies

konstantyn_diachenko
Community Advisor
konstantyn_diachenkoCommunity Advisor
Community Advisor
June 18, 2025

Hi @swarnarghyaba ,

 

Try this script:

document.addEventListener('DOMContentLoaded', function () {
    const pageThumbnail = document.querySelector('.cq-wcm-pagethumbnail');
    const pageThumbnailInput = document.querySelector('input.cq-wcm-pagethumbnail-hidden');
    const damPathInput = document.querySelector('input[name="./dampath"]');

    if (!pageThumbnail || !damPathInput) return;

    if (pageThumbnailInput) {
        damPathInput.value = pageThumbnailInput.value;
    }

    const observer = new MutationObserver(mutationRecord => {
        if (!mutationRecord || mutationRecord.length === 0) return;
        const target = mutationRecord[0].target;
        if (target.classList.contains('cq-wcm-pagethumbnail-hidden') && target.value) {
            damPathInput.value = target.value;
        }
    });
    observer.observe(pageThumbnail, {
        attributes: true,
        attributeFilter: ["value"]
    });
});

I start an observer once document is ready and try to set path from the hidden input field to your custom input on the initial load.

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
    S
    SwarnarghyaBaAuthor
    New Member
    June 18, 2025

    Hello @konstantyn_diachenko  Thank you very much for reaching out , I tried to execute the js you have provided but the issue is the code is not working as expected & while I tried to debug this using breakpoints in js the lines inside the conditional if block is not getting executed. 

    Can you kindly tell if is there anything I am missing here. 

    konstantyn_diachenko
    Community Advisor
    konstantyn_diachenkoCommunity AdvisorAccepted solution
    Community Advisor
    June 18, 2025

    Hi @swarnarghyaba ,

     

    Please ensure that page properties page tab has the following selectors:
    - cq-wcm-pagethumbnail-hidden - this is an input where page thumbnail file reference is stored

    - cq-wcm-pagethumbnail - this is a selector of the page thumbnail field 

     

    Could you please say what exactly is not executing?

    Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.
      Shashi_Mulugu
      Community Advisor
      Shashi_MuluguCommunity Advisor
      Community Advisor
      June 19, 2025

      @swarnarghyaba as @konstantyn_diachenko said issue with attaching mutation observer.. this being setup on button click.. so there is always chance that first event is missed. Better to setup mutation observer on page load, after coral UI dialog is loaded..

       

      $(document).on("foundation-contentloaded", function(e) {

       

              if (e.target.tagName === 'CORAL-DIALOG' && $(e.target).find('.cq-wcm-pagethumbnail').length) {

       

                   initializeDamPathObserver();

       

              }

          });

       

       

      full code: 

       

      (function(document, $) {

          "use strict";

       

          function updateDamPath(hiddenFileReference, damPathInput) {

              if (hiddenFileReference && damPathInput) {

                  damPathInput.value = hiddenFileReference.value || '';

              }

          }

       

          function initializeDamPathObserver() {

              const thumbnailWrapper = document.querySelector('.cq-wcm-pagethumbnail');

              if (!thumbnailWrapper) return;

       

              const hiddenFileReference = thumbnailWrapper.querySelector('input[name="./image/fileReference"]');

              const damPathInput = document.querySelector('input[name="./dampath"]');

              if (!hiddenFileReference || !damPathInput) return;

       

              updateDamPath(hiddenFileReference, damPathInput);

       

              const observer = new MutationObserver(() => {

                  updateDamPath(hiddenFileReference, damPathInput);

              });

       

              observer.observe(hiddenFileReference, { attributes: true, attributeFilter: ['value'] });

          }

       

          $(document).on("foundation-contentloaded", function(e) {

              if (e.target.tagName === 'CORAL-DIALOG' && $(e.target).find('.cq-wcm-pagethumbnail').length) {

                   initializeDamPathObserver();

              }

          });

       

      })(document, jQuery);

       

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        June 30, 2025

        @swarnarghyaba 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!

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...