Regarding content packages in AEM

Avatar

Avatar
Ignite 1
Level 2
akshayb35452619
Level 2

Likes

5 likes

Total Posts

7 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 5
Boost 3
View profile

Avatar
Ignite 1
Level 2
akshayb35452619
Level 2

Likes

5 likes

Total Posts

7 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 5
Boost 3
View profile
akshayb35452619
Level 2

15-06-2020

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Affirm 50
MVP
Vaibhavi
MVP

Likes

216 likes

Total Posts

181 posts

Correct reply

61 solutions
Top badges earned
Affirm 50
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
Vaibhavi
MVP

16-06-2020

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. 

Answers (4)

Answers (4)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

16-06-2020

@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:

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,049 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,049 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

16-06-2020

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.

 

 

Avatar

Avatar
Ignite 1
Level 3
khamat_bn
Level 3

Likes

31 likes

Total Posts

55 posts

Correct reply

12 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 5
Boost 3
View profile

Avatar
Ignite 1
Level 3
khamat_bn
Level 3

Likes

31 likes

Total Posts

55 posts

Correct reply

12 solutions
Top badges earned
Ignite 1
Give Back 3
Give Back
Boost 5
Boost 3
View profile
khamat_bn
Level 3

17-06-2020

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

Avatar

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
vanegi
Employee

Likes

392 likes

Total Posts

378 posts

Correct reply

148 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
vanegi
Employee

16-06-2020

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.