Composite Component in AEM | AEM Community Blog Seeding

[kautuk_sahni]

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.

[ramya726]

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?

[ramya726]

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