How to enable asset drag-and-drop feature in the PathField

Last update: Tue May 28 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

After the Adobe Experience Manager 6.5.10 update, it is now possible to drag-and-drop assets from the asset browser into a PathField on the page editor. To enable this feature, add the droppable property to the node of PathField.

Description

Environment

Adobe Experience Manager

Issue/Symptoms

From AEM 6.5.10 onwards, you can drag and drop an asset from the asset browser into a PathField on the page editor. This feature corresponds to the below line in AEM 6.5.10 release notes:

PathField in Sites editor allows authors to drag assets from Content Finder.

This article explains how to enable this feature.

Resolution

Add the droppable property to the node of PathField.

name: droppable

  type: Boolean

  value: true

Customization Example:

A PathField with droppable=true, added to the HelloWorld component of the WKND tutorial, as

/apps/wknd/components/helloworld/cq:dialog/content/items/column/items/path/@dropable={Boolean}true

<?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        jcr:primaryType="nt:unstructured"
        jcr:title="Properties"
        sling:resourceType="cq/gui/components/authoring/dialog">
        <content
            jcr:primaryType="nt:unstructured"
            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">
                        <text
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            fieldLabel="Text"
                            name="./text"/>
                        <path
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                            fieldLabel="Path"
                            droppable="{Boolean}true"
                            name="./path"/>
                    </items>
                </column>
            </items>
        </content>
    </jcr:root>

recommendation-more-help