Regarding content packages in AEM

[akshayb35452619]

Hi All,

I have a query. I came across one question which was "Which of the following property/node enables author to drag and drop components to page?"

1. node named cq:editConfig of type cq:EditConfig

2. node named dialog of type cq:Dialog

As per my thought, 2 option is correct.

Any answers will be helpful.

[VeenaVikraman]

Please read the official documentation here https://helpx.adobe.com/in/experience-manager/6-3/sites/developing/using/components-basics.html

Vital Child Nodes:

• cq:editConfig (cq:EditConfig) - Defines the edit properties of the component and enables the component to appear in the Components browser or Sidekick.
  Note: if the component has a dialog, it will automatically appear in the Components browser or Sidekick, even if the cq:editConfig does not exist.

[vanegi]

You can check https://helpx.adobe.com/in/experience-manager/kb/creating-cq-widget-supports-image.html,

In order to be able to drag-and-drop assets from the Content Finder to a component on a Page, there must be a drop targets configuration node called cq:dropTargets (of type nt:unstructured) below the edit configuration node (cq:editConfig) of a component.

The cq:dropTargets node (node type nt:unstructured) defines a list of drop targets that can accept a drop from an asset dragged from the content finder. It serves as a collection of nodes of type cq:DropTargetConfig.

Note:

Multiple drop targets are only available in the classic UI.

In the touch-enabled UI only the first target will be used.

Each child node of type cq:DropTargetConfig defines a drop target in the component. The node name is important because it must be used in the JSP, as follows, to generate the CSS class name assigned to the DOM element that is the effective drop target:

<drop target css class> = <drag and drop prefix> +
                          <node name of the drop target in the edit configuration>

The <drag and drop prefix> is defined by the Java property:

com.day.cq.wcm.api.components.DropTarget.CSS_CLASS_PREFIX.

[Vaibhavi_J · Accepted solution]

Hi @akshayb35452619 

Answer is either one. (1 or 2).

I got this question in my mind long time back and tried hands on, on the same. 

Component to appear in sidekick you must have either editconfig or dialog node. Keeping one of them in component will make the component to pop up in sidekick which can be dropped over page. 

You can verify the same by adding deleting one by one. 

[BrianKasingli]

@akshayb35452619,

To quickly answer your question:

1. cq:dropTagets in cq:editConfig node in AEM enables you as a Content Author to drag and drop assets, content fragments, etc... from the Touch UI sidebar to a configured component from within the Page Editor.

If you wish to drag and drop components to a page, these out of the box components will be sufficient toward your needs:

• http://localhost:4502/crx/de/index.jsp#/libs/wcm/foundation/components/responsivegrid
• http://localhost:4502/crx/de/index.jsp#/libs/wcm/foundation/components/parsys
• http://localhost:4502/crx/de/index.jsp#/libs/wcm/foundation/components/iparsys

[khamat_bn]

Hi @akshayb35452619 ,

As per your question which specifically for a component not to assets so I guess there is no reference to editconfig property here.

Normal dialog structure which having cq:dialog will allow to visible in component structure in AEM page to drag. Specifically, parsys which is a place holder will hold a components so this placeholder is responsible for any cq:dialog to hold on the page.

If you want to ask about the assets then cq:EditConfig will the answer, and for your question for the component will be the cq:dialog.

Go through the docs for basics 

https://helpx.adobe.com/in/experience-manager/6-3/sites/developing/using/components-basics.html

Happy Coding    ~BK