cq:template and cq:templatePath Properties of a Component in AEM

In this blog, we will talk about two properties of a components which are cq:template and cq:templatePath.

cq:template: This is a node having cq:template name of type nt:unstructured inside a component. The use case for this property can be if you want to provide the default values of properties of a component, then it can help you out.
cq:template node can have multiple properties and even other nodes as a children in case if you need to aggregate some of the properties (i.e., name = ./name/title).This content will be used as default values whenever you drop a new instance of the component from the sidekick.


Fig-Configure cq:template in a component

cq:templatePath: This property is of type string. If you want to share the same default values across multiple components, you can create a node with any name, put all the properties there and add the path of that node as a value in the cq:templatePath property. It works exactly like cq:template but with the help of cq:templatePath, the same values can be shared across multiple components.


Fig-Add configurationPath as the value of cq:templatePath property of the component

How these properties work?
When an author drops the component, the component fetches all the values from its templatePath or cq:template node and store them in the /content hierarchy of that component. When author opens the dialog, the values can be seen there. If the author wants to change, he/she can also do that.

Use Case: The use case of these properties can be if you have one style tab in a component where you decide font size, color, font-family ( something like a theme), you can set the initial default theme of a component.