Adding RichText to custom multifield widget is not working properly in cq5

Question

When a CQ.form.RichText is added to a custom multifield widget in cq5 , the content of rich text component is disappearing when the dialog is opened again for editing or adding new entry of custom widget. Clicking OK makes the content disapper on cq component's .html page.

Looking for inputs and if any one has come across such issue, could you please direct me to the solution approach.

EDIT :

here is the code sample from custom.js (just posting RichText portion, there is a DateTime and TextField along with richtext in the custom widget)

this.news= new CQ.form.RichText({
        cls: "customwidget-4",
        fieldLabel: "News",
        allowBlank: false,
        listeners: {
            change: {
                scope: this,
                fn: this.updateHidden
            },
            destroy: {
                scope: this,
                fn: this.descDestroy
            }
        }
    });
    this.add(this.news);

and here is the descDestroy snippet:

descDestroy: function() {
    this.news.el.dom = {};
}

then registering custom widget as xtype:

CQ.Ext.reg("CustomNews", CQ.form.CustomNews);

Using the above "CustomNews" in dialog.json:

{
"title": "Custom News Widget",
"jcr:primaryType": "cq:Dialog",
"xtype": "dialog",
"items": {
    "jcr:primaryType": "cq:WidgetCollection",
    "tab1": {
        "jcr:primaryType": "cq:Widget",
        "title": "News Component",
        "xtype": "panel",
        "items": {
            "jcr:primaryType": "cq:WidgetCollection",
            "news": {
                "jcr:primaryType": "cq:Widget",
                "fieldDescription": "Press + to add more links",
                "fieldLabel": "News",
                "hideLabel": false,
                "name": "./news",
                "width": 1000,
                "xtype": "multifield",
                "fieldConfig": {
                    "jcr:primaryType": "cq:Widget",
                    "xtype": "CustomNews"
                }
            }
        }
    }
}

}

Thanks in advance.

Answer 1

Just wanted to update the question with my answer, just to keep it as a reference for others if they come across the similar issue:

Actually this problem was faced when the richtext is the last component in your custom xtype and I don't know why , but the change listener assigned to the richtext was not firing when ever the text changed in that component. So that caused the issue of value not getting updated on the CQ5 page when the OK button on the dialog was clicked. To overcome this, I just used beforesubmit listener in the dialog to do component.setValue(component.getValue()) to again update the values of the components in the custom xtype. Here is my dialog:

{
"title": "Custom News Widget",
"jcr:primaryType": "cq:Dialog",
"xtype": "dialog",
"items": {
    "jcr:primaryType": "cq:WidgetCollection",
    "tab1": {
        "jcr:primaryType": "cq:Widget",
        "title": "News Component",
        "xtype": "panel",
        "items": {
            "jcr:primaryType": "cq:WidgetCollection",
            "news": {
                "jcr:primaryType": "cq:Widget",
                "fieldDescription": "Press + to add more links",
                "fieldLabel": "News",
                "hideLabel": false,
                "name": "./news",
                "width": 1000,
                "xtype": "multifield",
                "fieldConfig": {
                    "jcr:primaryType": "cq:Widget",
                    "xtype": "CustomNews"
                }
            }
        }
    }
},
 "listeners": {
        "jcr:primaryType": "nt:unstructured",
        "beforesubmit": "function(){var comp= this.findByType(\"CustomNews\"); for(var i=0;i<comp.length;i++){ comp[i].setValue(comp[i].getValue());}}"
    }
}

Answer 2

To create richtext in custom multifield of extjs, i have done all the steps mentioned above but my richtext node in dialog in my AEM page gets disabled.

I have enclosed my extjs code, please let me know whether i am making any mistake.

/** * @class Ejst.CustomPathFieldWidget * @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

*/

CustomPathFieldWidget = 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
*/
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": 125,
        "layout": "form"
    };
    config = CQ.Util.applyDefaults(config, defaults);
    CustomPathFieldWidget.superclass.constructor.call(this, config);
},

//overriding CQ.Ext.Component#initComponent
initComponent: function () {
    CustomPathFieldWidget.superclass.initComponent.call(this);

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

    this.linkText = new CQ.form.RichText({
    cls: "customwidget-1",
    fieldLabel: "Link Text11: ",
    allowBlank: true,
    enableSourceEdit: true,
    hidden:true,
    externalStyleSheets:"[/etc/designs/web-2013/clientlibs_all.css]",
    emptyText: "Enter the text to show to the customer on answer selection",
    width: 500,
    rtePlugins :{
        spellcheck:{features:"*"},
        image:{features:"*"},
        edit:{features:"*"},
        justify:{features:"*"},
        misctools:{features:"*"},
        table:{features:"*"},
        undo:{features:"*"}
    },
    listeners : {
        change :{
            scope : this,
            fn : this.updateHidden
        },
        destroy: {
            scope:this,
            fn:this.destroyRichText
        }
    }
    });
    this.add(this.linkText);

    this.linkURL = new CQ.form.PathField({
        cls: "customwidget-2",
        fieldLabel: "Link Path: ",
        width: 400,
        listeners: {
            change: {
                scope: this,
                fn: this.updateHidden
            },
            dialogclose: {
                scope: this,
                fn: this.updateHidden
            }
        }
    });
    this.add(this.linkURL);
},

processInit: function (path, record) {
    this.linkText.processInit(path, record);
    this.linkURL.processInit(path, record);
},

setValue: function (value) {
    var link = JSON.parse(value);
    this.linkText.setValue(link.text);
    this.linkURL.setValue(link.url);
    this.hiddenField.setValue(value);
},

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

getRawValue: function () {
    var link = {
        "text": this.linkText.getValue(),
        "url": this.linkURL.getValue(),
    };
    return JSON.stringify(link);
},

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

destroyRichText : function() {
     this.el.dom={};

}

}); CQ.Ext.reg('linkscustom',CustomPathFieldWidget);