CQ5 Custom Widget development - Keeping my hardcoded values outside the widget script - Using global variables

Question

I am new to CQ5 and ExtJS. I have created a cq extjs widget. Now there are a lot of hardcoded strings in my widget js file. Like fieldLabel, fieldDescription, addItemLabel, rootPath etc etc... I wish to pass this widget on to another team but don't want them to make any changes in my widget js script, as they might make mistakes as they completely non technical people.

I wish I could create another separate js file and declare some global variables and set values of the above mentioned many many fields, by reading the values from the global variables.

I would name this separate js file mywidgetconfig.js and will request the other team to make changes as per their needs only and only in this file.

For example, in my widget I have hardcoded -->

{
fieldLabel : 'Multi Field to setup links'
}

I wish I could keep this value in the mywidgetconfig.js as :

INNERMULTIFIELD_FIELD_LABEL_TEXT_STRING : 'Multi Field to setup links',

and so on like

INNERMULTIFIELD_FIELD_DESC_TEXT_STRING : 'blah blah blah'

and in my actual widget js I could access the values as -->

{
fieldLabel : MyNamespace.INNERMULTIFIELD_FIELD_LABEL_TEXT_STRING,
fieldDescription: MyNamespace.INNERMULTIFIELD_FIELD_DESC_TEXT_STRING
}

Is this possible?

Answer 1

Yes, it is possible. You can create variables within your namespace, and then create a new js file(mywidgetconfig.js as you wanted) which would contain only the configuration that you want the new team to change.

As an example, you can have your custom widget (customwidget.js) as shown below, which defines the variables within its namespace

/**
 * @class Myns.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
 */
var Myns = {};
Myns.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

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

    constructor: function(config) {
        config = config || { };
        var defaults = {
            "border": true,
            "layout": "form"
        };
        config = CQ.Util.applyDefaults(config, defaults);
        Myns.CustomWidget.superclass.constructor.call(this, config);
    },


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

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

        this.textf = new CQ.Ext.form.TextField({
            fieldLabel: Myns.TEXTFIELDLABEL, //using variable
            allowBlank: false
        });
        this.add(this.textf);

        this.numberf = new CQ.Ext.form.NumberField({
            fieldLabel: Myns.NUMBERFIELDLABEL, //using variable
            allowBlank: false
        });
        this.add(this.numberf);
    }
    // rest of the code goes here
});
Myns.TEXTFIELDLABEL = "Enter Text"; //defining variable
Myns.NUMBERFIELDLABEL = "Enter a number"; //defining variable
// register xtype 
CQ.Ext.reg('customwidget', Myns.CustomWidget);

And your mywidgetconfig.js would contain those variables which can be modified by others.

/*
* Field Label for the text field
*/
Myns.TEXTFIELDLABEL = "New Text"; 

/*
* Field label for number field
*/
Myns.NUMBERFIELDLABEL = "New number"; 

And in your js.txt, make sure you add mywidgetconfig.js below your customwidget.js

#base=js
customwidget.js
mywidgetconfig.js