How to use the AEM Asset Selector in a dialog?

[kalyanc42390873]

As per document Asset Selector ,   http://localhost:4502/aem/assetpicker.html?dialog=true  Use these parameters to open the asset selector as Granite Dialog. This option is only applicable when you launch the asset selector through Granite Path Field, and configure it as pickerSrc URL.

I tried the following code in the dialog XML:

<image
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
   name="./videoThumbnail"
   pickerSrc="/aem/assetpicker.html?dialog=true"

   mimeType="image"
   rootPath="/content/dam"/>

The pathfield above does not seems to use the alternative picker specified by the pickerSrcand behaves like a standard pathfield.

Also tried adding the extra URL parameters as specified in the pathfield docs but that made no change.

Please provide ur inputs how to configure assetpicker in dialog.

Regards,

Kalyan.

[smacdonald2008]

WHat are you trying to perform with the PathField - i am looking at http://localhost:4502/aem/assetpicker.html and it looks like its functioning properly.

[kalyanc42390873]

smacdonald2008

I want to launch the asset selector through Granite Path Field​ in dialog, for image asset selection.

Regards,

Kalyan

[ar79299724]

Did you find a solution for this? Would you mind sharing?

[arunpatidar]

It does works if you'll be using below path for pickerSrc

/libs/dam/gui/content/assetselector/jcr:content/body/items/assetselector.html?dialog=true&assettype=images&root=/content/dam/we-retail/en/activities

Thanks

Arun

[Maruti_Prasad]

The pickerSrc is not working with values "

/libs/dam/gui/content/assetselector/jcr:content/body/items/assetselector.html?dialog=true& assettype=images&root=/content/dam/we-retail/en/activities"

or

"/aem/assetpicker.html?dialog=true" anyone got the assetpicker ?

[arunpatidar]

use /libs/dam/gui/content/assetselector/jcr:content/body/items/assetselector.html?dialog=true

but still there is a bug, it will not allow selecting assets from assets selector.

you can log a daycare ticket.

[Alexander_Prikhodko]

Hi @arunpatidar 

Do you know if this issue is tracked and/or planned to be fixed?

Regards,

Alexander

[arunpatidar]

Hi @Alexander_Prikhodko 
Not sure if user reported the issue or not. I did not reported anything though.

[antoniom5495929 · Accepted solution]

Hi,

i've created a demo package which works in AEM 6.4.

You can find it here [0].

Let me know if you need more info.

[0] WeTransfer

Thanks,

Antonio

[DhirajAg]

Not able to view the attached package for the answer that is marked correct. Can you please post the solution again?

[sreedobe]

Did you get solution, I am looking to do same on aem 6.5 page dialog thumbnail.

@kalyanc42390873  @antoniom5495929 @arunpatidar @Maruti_Prasad 

[arunpatidar]

Here is he fix https://aemlab.blogspot.com/2022/07/aemaacs-authoring-asset-selector-in-dialog.html

[aem-enthu27]

Hi @arunpatidar 

Above solution is not working for me.

But it works with below solution : https://stackoverflow.com/questions/51366697/how-to-use-the-aem-asset-selector-in-a-coral3-dialog

One issue here is , let's say I have selected one image at path /content/dam/xyz/steps/image1.png

and now if I click on the pathfiled it will again take me to /content/dam/xyz instead of image path .

@arunpatidar could you please let us know where can i find the tutorial or any article regarding coral 3 granite framework which are helpfull for dialog customization. How did you learn.

Thanks

[aem-enthu27]

@arunpatidar  it is failing while assigning the value back to pathfiled :

else {
              var selectedItem = document.querySelector(SELECTORS.SELECTED_ITEM).getAttribute(SELECTORS.ITEM_ATTR);
              document.querySelector(SELECTORS.PATHFIELD_SELECTOR).value = selectedItem;
          }

value of document.querySelector(SELECTORS.PATHFIELD_SELECTOR) coming as null hence removed 

const PATHFIELD_TARGET = '.pathfield__asset--selector';

from 

PATHFIELD_SELECTOR: PATHFIELD_TARGET + ' input[aria-controls="asset-selector-launcher-setting"]',

then it was assigning the value properly back to pathfiled but when I submit the dialog it is not persisting , old value is still there.

[arunpatidar]

You need to add this class in the dialog field

'pathfield__asset--selector';

dialog example - https://github.com/arunpatidar02/aemaacs-aemlab/blob/844b6c21adb03ec45972b64aadff4ffeb108395a/ui.app... 

[arunpatidar]

Hi,

The fix is done in AEMaaCS. 

You can learn about Granite and Coral from

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/components.... 

[aem-enthu27]

Hi @arunpatidar 

I am using AEMaaCS and it is not working for me.

The value is getting added to pathfiled after selection but it is not persisited because. value of pathfiled is coming from coral-taglist > coral-tag > coral-tag-label .

and also as i tol earlier it works fine with pickersrc= 

/mnt/overlay/dam/cfm/admin/content/v2/associated-content/assetpicker.html?root=/content/dam&mode=single&filter=nosystem

But I am not sure should I use this or ur one.

[arunpatidar]

If other is working then you can use it

I am not sure if you are doing something wrong while using the other one because it works for me. I can see the values are saved and persisting and I can see when I open dialog again.