Pre Populated Multifield in AEM

During my project work, I got a task where I have to prepopulate a multifield with some predefined values. i.e when a multifield is loaded the first time, It should be displayed with some default values. In this post, I will discuss, How I achieve this functionality. So

Agenda of this post
Prepopulate Multifield with default values

For doing this, I am creating a project using adobe maven archetype as I created in my last post. It creates a folder structure under the app directory as shown below

Here I create a component named as a blog.

This component contains a dialog having a tab with a multifield & one listener (nt:unstructured) node under cq:dialog node.

So the final structure looks like –

multifield is created with properties
xtype = multifield
jcr:primaryType = cq:Widget
name = ./names
fieldLabel = Names

fieldconfig node have properties
xtype = textfield
jcr:primaryType = nt:unstructured

Till now whatever we create is simple work that is required to create a simple multifield.

The key point is:
Now the original work starts for prepopulating multifield. As we create an additional node named as listeners under dialog node, jcr:primaryType of this node is nt:unstructured.
here I define a function named load content as type string and Its values are a javascript function that set’s the default value for this multifield. the function value is

function(dialog) {
var field = dialog.getField(‘./names’);
if(field.getValue()){
var values = [“Pre”, “Populated”, “Multifield”];
field.setValue(values);
};
return true;

this node’s properties look like:

Now Everything is done go to a test page drop this component & open dialog. You will see your multifield is prepopulated as desired.

the final output is:


Github repository link
https://github.com/vietankur009/components.git