Composite Components in AEM using "cq:template"

Use case

There is a requirement to display an image, title and text on a page with authoring capabilities where an author can change the image, image size, title text, text content, text style.

Considerations

As an AEM developer

•          I want to be able to develop and maintain these components independently.

As an AEM author

•          I want to drag and drop only one component, I do not want to drag and drop three different components
•          I want to be able to see default content authored when I drag and drop the component
•          I want to be able to modify the default authoring if required using respective component dialogs.
•          I want to be able to delete any of the sub-components i.e., image, title or text.

Solution

An AEM composite component using �cq:template�

We can create a simple component as follows

Observe the "cq:template" node. Its a node of type "nt:unstructured"

It contains the blueprint of the content which will become part of the page where this component is used. Here, we can add as many components and default authoring we need.

And finally, here is what goes into the HTML of the component.

<div data-sly-resource="${'container-par' @ resourceType='foundation/components/parsys'}" data-sly-unwrap>

Please note the name of the parsys. It should match the node under cq:template.

Now, when the author drags and drops this test-comp. The visual showed at the beginning of the blog will be rendered.

If you want to have the cq:template node outside the component, you can achieve it using "cq:templatePath" property. Just create the cq:template node anywhere, and provide the path in "cq:templatePath" property.

References:
https://stackoverflow.com/questions/33976132/what-is-the-difference-between-the-cqtemplate-and-cqtemplatepath-properties-in