Composite Component in AEM

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 as shown below:

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 as shown below:

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.

<div data-sly-resource=”${‘container’ @ resourceType=’wcm/foundation/components/responsivegrid’}” data-sly-unwrap>

In this case I have used data-sly-unwrap as we do not want to author the parent component.

How will the composite component be displayed on the page?

By Avni Rajput