Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Composite Component in AEM | AEM Community Blog Seeding

Avatar

Administrator

BlogImage.jpg

Composite Component in AEM by SHIVAM KUMAR CHAUHAN

Abstract

What is a Composite Component?
A Composite Component is a component where we want a component with some default component like image, title, text, etc, with authoring power, when the component is dropped.

How to make the Composite Component?
For making a composite component, you can make a container component. In our case we do not want to author container component so we are not adding cq:dialog node

If dialog or design dialog is not there then we have to make a cq:editConfig node as shown above.

Now add the cq:template node of type nt:unstructured and under cq:template node make a container node of type nt:unstructured with sling:resourceType as wcm/foundation/components/responsivegrid

Under the container node, we can add the component as we want and they will be shown by default when the composite component is dropped on the page.


And finally, here is what goes into the HTML of the component.
In this case I have used data-sly-unwrap as we do not want to author the parent component.

Read Full Blog

Composite Component in AEM

Q&A

Please use this thread to ask the related questions.



Kautuk Sahni
2 Replies

Avatar

Level 2

I found one another blog also related to this.
Composite Components in AEM using "cq:template" (prashantonkar.blogspot.com)

Now my question is I would like to know the possibility of having 3 different components with change in their layout and alignment in a composite component. In the above blog link, image and text are one below another,if i want one next to another is that possible?

Avatar

Level 2

Figured out - CSS can do the trick First Project into AEM, hence the above question.