Custom xtype in cq5 / Creating multifield in AEM

Creating custom Xtype in CQ5 / creating multifield in AEM as are follows,

In AEM we can achieve this by creating a widgets clienlibrary, which holds the custom multifield structure and it should call before the comps/page loads in CQ.

Create a clientlibrary in the root folder called apps. Here i am creating a folder called advtraining in apps. In this im creating the clientlibrary called “cqwidgets” having categories as “cq.widgets”.

Custom xtype in cq5 – widget properties

 

And now we will call js.txt as follows.

Custom Xtype – widgets js txt file

Now after creating this , place our custom multifield code in the created js file that is here titleUrl.js

The code for the custom multifield as follows,
console.log(“—————-in training titleUrl ————“);
/**
* @class CQ.form.CustomMultiField
* @extends CQ.form.CompositeField
* This is a custom path field with link text and target
* @param {Object} config the config object
*/

/**
* @class Ejst.CustomWidget
* @extends CQ.form.CompositeField
* This is a custom widget based on {@link CQ.form.CompositeField}.
* @constructor
* Creates a new CustomWidget.
* @param {Object} config The config object
*/

CQ.form.CustomMultiField = CQ.Ext.extend(CQ.form.CompositeField, {

/**
* @private
* @type CQ.Ext.form.TextField
*/
hiddenField: null,

/**
* @private
* @type CQ.Ext.form.TextField
*/
linkText: null,

/**
* @private
* @type CQ.Ext.form.TextField
*/
linkTxt: null,

/**
* @private
* @type CQ.Ext.form.TextField
*/
linkUrl: null,

/**
* @private
* @type CQ.Ext.form.CheckBox
*/
openInNewWindow: null,

/**
* @private
* @type CQ.Ext.form.FormPanel
*/
formPanel: null,

constructor: function (config) {
config = config || {};
var defaults = {
“border”: true,
“labelWidth”: 75,
“layout”: “form”
};
config = CQ.Util.applyDefaults(config, defaults);
CQ.form.CustomMultiField.superclass.constructor.call(this, config);
},
//overriding CQ.Ext.Component#initComponent
initComponent: function () {
CQ.form.CustomMultiField.superclass.initComponent.call(this);

// Hidden field
this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);

// Link Title
this.add(new CQ.Ext.form.Label({
cls: “customwidget-label”
}));

this.linkTxt = new CQ.Ext.form.TextField({
cls: “customwidget-2”,
allowBlank: true,
emptyText: “Enter Title”,
width: 335,
listeners: {
change: {
scope: this,
fn: this.updateHidden
},

dialogclose: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.linkTxt);

this.add(new CQ.Ext.form.Label({
cls: “customwidget-label”
}));

this.linkUrl = new CQ.form.PathField({
cls: “customwidget-2”,
allowBlank: true,
emptyText: “Specify Url”,
width: 335,
listeners: {
change: {
scope: this,
fn: this.updateHidden
},

dialogclose: {
scope: this,
fn: this.updateHidden
}
}
});
this.add(this.linkUrl);
},

processInit: function (path, record) {
this.linkTxt.processInit(path, record);
this.linkUrl.processInit(path, record);
},

setValue: function (value) {
var link = JSON.parse(value);
this.linkTxt.setValue(link.txt);
this.linkUrl.setValue(link.url);
this.hiddenField.setValue(value);
},

getValue: function () {
return this.getRawValue();
},

getRawValue: function () {
var link = {
“txt”: this.linkTxt.getValue(),
“url”: this.linkUrl.getValue(),
};
return JSON.stringify(link);
},

updateHidden: function () {
this.hiddenField.setValue(this.getValue());
}

});
CQ.Ext.reg(“titleurl”, CQ.form.CustomMultiField);

console.log(“—————-end of training titleUrl————-“);

 

Here we can track our js file by using the console logs mentioned above.

After succesful calling of our clientLibraries, we need to create component withe created multifield xtype above.

Create a normal component as usually created, and for the child node of “items” which is of type widgetcollection, create a node called “carouselfield”.

Propertis for this node as follows,

filedLabel  –  String   –  Specify Fields

name –  String  –  ./carousel

xtype  –  multifield

FYI

Custom Xtype in AEM – Node properties

Now after creating this, need to create one more node under “carouselfiled” node, called “filedConfig”.

Propertis for this filedConfig node as follows,

 

xtype  –  titleurl (“Which xtype we are getting from widgets clientlib”)

Custom Xtype in AEM – custom xtype declaration

Now finally, drag our component into the page . You will be able to get the two text fileds for each adding, one is for Title and other is for URL as specified above.

Custom xtype AEM – multifield component

So use the code and pattern mentioned above and happy coding !!!

Cheers!!!