Ad Code

Tuesday, February 20, 2018

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

Hello Everyone,

I am a strong believer of “The more we explore, the more we learn” and today when i came to  know about the following properties of a component
I was a bit surprised why i have not gone through this previously.

So 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 theme), you can set the initial default theme of a component.

Demonstration Video on cq:template and cq:templatePath Properties of a Component:


If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.

8 comments:

  1. When there are two components with same property name & different default value, how can we handle cq:templatePath for those two components? Please clarify.

    ReplyDelete
    Replies
    1. Then create two configurations and use different templatePath

      Delete
  2. Hi,
    I totally agree it's a good thing to know and learn but I am curious, Does it have any advantage over 'value' property, as value property does the same thing and resides at the field hence provide better readability.

    ReplyDelete
    Replies
    1. @Arpit, hmm make sense.If we talk about readability, cq:template makes more sense as you can put all the default values at the same node rather going to each and individual node.Default values don't work for all the widgets sometimes also and it has some more use cases other than this. I will add in this blog soon. Thanks.

      Delete
    2. One more point I would like to add for cq:template & value property which I noticed.
      When you drag n drop a component it automatically picks default values from cq:template nodes and saves them inside content,without opening dialogue.
      But in case of value property,you need to open the component dialogue once and save.

      Delete
    3. @Sauarbh nice point you came out with. Appreciate.

      Delete
    4. @saurabh, this is a very useful feature, thank you for letting us know.

      Delete
  3. how to add default value in page properties ?

    ReplyDelete