Drag and Drop Pathfield

[Antiguo miembro de la comunidad]

Hi,

I have a requirement to have a multifield pathfield with drag and drop support (from content finder).

 [img]Screen Shot 2014-03-04 at 10.10.24 AM.png[/img]   

Below is my Dialog.xml 

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Dialog" activeTab="0" xtype="tabpanel"> <items jcr:primaryType="cq:WidgetCollection"> <tab1 jcr:primaryType="cq:Panel" title="Title"> <items jcr:primaryType="cq:WidgetCollection"> <title jcr:primaryType="cq:Widget" allowBlank="{Boolean}false" fieldLabel="Title" name="./jcr:content/title" xtype="textfield"/> </items> </tab1> <tab2 jcr:primaryType="cq:Panel" title="Other Pages"> <items jcr:primaryType="cq:WidgetCollection"> <properties jcr:primaryType="cq:Widget" fieldLabel="Content List" name="./jcr:content/text" xtype="multifield"> <fieldConfig jcr:primaryType="cq:Widget" name="./info" xtype="ddpathfield"/> </properties> </items> </tab2> </items> </jcr:root>

Below is custom xtype as mentioned here (https://github.com/Adobe-Consulting-Services/acs-aem-commons/commit/a1d2050ab766f0456c9988329a8e4f98... 

CQ.Ext.ns("DDPathField"); DDPathField = CQ.Ext.extend(CQ.form.PathField, { /** * @cfg {String} ddGroups * Drag &amp; drop which will be accepted by this widget * (defaults to "asset", "page") */ constructor : function(config) { // DDPathField.superclass.constructor.call(this); config = CQ.Util.applyDefaults(config, { "ddGroups" : [ CQ.wcm.EditBase.DD_GROUP_ASSET, CQ.wcm.EditBase.DD_GROUP_PAGE ], "listeners" : { "render" : this.initHrefDragAndDrop } }); DDPathField.superclass.constructor.call(this, config); }, initHrefDragAndDrop : function() { var field = this, dialog = this.findParentByType('dialog'), inMultiField = CQ.Ext.isDefined(this.findParentByType('multifield')), target, i; console.log(this); if (this.ddGroups) { if (typeof (this.ddGroups) === "string") { this.ddGroups = [ this.ddGroups ]; } target = new CQ.wcm.EditBase.DropTarget(this.el, { "notifyDrop" : function(dragObject, evt, data) { var record, path; if (dragObject && dragObject.clearAnimations) { dragObject.clearAnimations(this); } if (dragObject.isDropAllowed(this)) { if (data.records && data.single) { record = data.records[0]; path = record.get("path"); field.setValue(path); evt.stopEvent(); return true; } return false; } } }); if (inMultiField) { CQ.WCM.registerDropTargetComponent(field); } console.log(dialog); dialog.on("activate", function(dialog) { var dialogZIndex; if (dialog && dialog.el && this.highlight) { dialogZIndex = parseInt(dialog.el.getStyle("z-index"), 10); if (!isNaN(dialogZIndex)) { this.highlight.zIndex = dialogZIndex + 1; } } }, target); dialog.on("deactivate", function(dialog) { var dialogZIndex; if (dialog && dialog.el && this.highlight) { dialogZIndex = parseInt(dialog.el.getStyle("z-index"), 10); if (!isNaN(dialogZIndex)) { this.highlight.zIndex = dialogZIndex + 1; } } }, target); dialog.on("show", function() { if (!inMultiField) { CQ.WCM.registerDropTargetComponent(field); } }, target); dialog.on("hide", function() { CQ.WCM.unregisterDropTargetComponent(field); }, target); for (i = 0; i < this.ddGroups.length; i++) { target.addToGroup(this.ddGroups[i]); } target.removeFromGroup(CQ.wcm.EditBase.DD_GROUP_DEFAULT); this.dropTargets = [ target ]; } } }); CQ.Ext.reg('ddpathfield', DDPathField);

But i am getting below error message in firebug:

TypeError: dialog is null

     

dialog.on("activate", function(dialog) {

Any help will be greatly appreciated.

Cheers ! ~TD 

[justin_at_adobe · Accepted solution]

Hi,

This xtype only works inside a dialog at present. As far as I can tell, you aren't using a dialog (the screenshot doesn't look like you have a dialog and apparently this.findParentByType("dialog") is returning null).

If you want to create an issue here: https://github.com/Adobe-Consulting-Services/acs-aem-commons/issues describing your use case for using this widget is a non-dialog context we can look at adding support for your use case in a future release. Alternatively, you can engage with Adobe Consulting to ensure that this happens to meet your project timeline.

Regards,

Justin

[smacdonald2008]

This code was written by one of our community members justin_at_adobe. I am sure that he will comment on this thread.