top of page
Writer's pictureHeena

How To Pre-Populate Values In AEM Component

Updated: May 2

Let's continue with the first component we created here. This component has two text fields

Title and Description. By default these values are not set.

To set the values on include of a component follow the given steps:

1.Create a node of type"nt:unstructured" named "cq:template" inside your component.


2. We will add the default value with same name key on "cq:template" node.

cq:template node

Note: The values will be pre-filled only on include of the component.


In scenarios, where the value gets stored in sub node(For example multifield stores the values in tree structure when composite is set to TRUE), create same structure under the "cq:template" node.


Lets take another example to understand this scenario:

Component created in this post stores data in following structure.

item0 under multifieldList node

So, the "cq:template: node for this component will look like this:

multifieldList node


Wouldn't it be repetitive to add this node in each component? "cq:templatePath" can be used refer the properties saved at different location.


Follow the below steps for the same:

  1. Create a node of type "sling:Folder" anywhere in the apps folder.

  2. Under this folder create same structure we created before. You can name the node anything instead of "cq:template"

defaultConfigs node

3. Copy the absolute location of the node.

4. Create property named "cq:templatePath" on cq:Component node of the component. and paste the copied path here.


Thats it!, you can now reuse this path in multiple components.

title and description node

Note: If you use cq:templatePath in your component, then "cq:template" node created under your component will be disregarded.



Difference between setting default value for each field and cq:template:


So now a question might arise that why do we use cq:template when we have values field for each field in the dialog.


Answer to this is content authored in "value" property will be displayed only when you open the component for the first time after dragging it to the page, and the value will be saved to the content node only on click of save.


Whereas in case of "cq:template" the values are stored to the content node as soon as you add the component to the page.




That's all for today! If you've found this blog post informative or helpful, I’d greatly appreciate it if you could give it a like. It keeps me motivated 💛


Enjoying my ad-free blog? Support by buying me a coffee! I've kept this space ad-free, sponsoring it myself to maintain its purity. Your contribution would help keep the site afloat and ensure quality content. Thanks for being part of this ad-free community.




2,274 views

Related Posts

See All

© 2023 aem-blog by Heena Shirke

bottom of page