How to use the AEM Asset Selector in a coral3 dialog?

Question

As described on Adobe's page at https://helpx.adobe.com/experience-manager/6-3/assets/using/asset-selector.html AEM provides an OOTB asset selector which includes bigger image previews than the standard Coral3 pathfield or pathbrowser.

In the page above it also says that you can use the picker from a granite dialog:

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="./image/fileReference"
    pickerSrc="/aem/assetpicker.html?dialog=true"
    predicate="nosystem"
    rootPath="/content/dam/"/>

The pathfield above does not seem seem to use the alternative picker specified with pickerSrc and behaves like a standard pathfield.

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

Any pointers as to what is wrong in the dialog definition?

priyanka biswal priyanka biswal · Accepted Answer · 2019-01-17T06:42:17

The URL /aem/assetpicker.html is a vanity path you can use the absolute URL /libs/dam/gui/content/assetselector/jcr:content/body/items/assetselector.html however, this is not working properly.

You can try with commerce /gui/components/common/assetpicker with some additional clientLibs as mentioned below.

<assetpicker
   jcr:primaryType="nt:unstructured"
   jcr:title="Thumbnail"
   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">
            <section
               jcr:primaryType="nt:unstructured"
               sling:resourceType="/libs/granite/ui/components/coral/foundation/form/fieldset">
               <items jcr:primaryType="nt:unstructured">
                  <thumbnail
                     jcr:primaryType="nt:unstructured"
                     sling:resourceType="cq/gui/components/coral/common/wcm/pagethumbnail"
                     page="${empty param.item ? requestPathInfo.suffix : param.item}"/>
                  <edit
                     jcr:primaryType="nt:unstructured"
                     sling:resourceType="commerce/gui/components/common/assetpicker"
                     name="./image/fileReference"
                     previewTarget=".foundation-layout-thumbnail-image coral-card-asset img"
                     text="Change"
                     type="image"/>
                  <charset
                     jcr:primaryType="nt:unstructured"
                     sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
                     ignoreData="{Boolean}true"
                     name="_charset_"
                     value="utf-8"/>
               </items>
            </section>
         </items>
      </column>
   </items>
</assetpicker>

And the extraClientLibs property (multi) in your dialog node as below

extraClientlibs="[cq.common.wcm,core.wcm.page.properties,cq.wcm.msm.properties,cq.authoring.editor.plugin.commerce]"

How to use the AEM Asset Selector in a coral3 dialog?

1 Answers