javascript - Override Multivalue component in Adobe CQ -
i working on project need implement custom multifield component. specific fact need create nodes (which can number) when user specifies value instead of key, value property.
i have added pathfield , textbox.. loaded using http , when user tries input value http post custom extjs.
as shown above prefer lhs store entered values in nodes instead of rhs. have created component of following structure
as i'm going make http calls , not insert jcr:content or other path i've decided remove node reference "./multishort" below?
but when component loads doesnt load node properties. can suggest me how handle kind of loading nodes instead of properties?
please see sample js file below. note: doesnt have details post yet havent included since not sure has instantiated.
/** * @class ejst.customwidget * @extends cq.form.compositefield * custom widget based on {@link cq.form.compositefield}. * @constructor * creates new customwidget. * @param {object} config config object */ ejst.customwidget = cq.ext.extend(cq.form.compositefield, { /** * @private * @type cq.ext.form.textfield */ hiddenfield: null, /** * @private * @type cq.ext.form.combobox */ allowfield: null, /** * @private * @type cq.ext.form.combobox */ allowfield2: null, /** * @private * @type cq.ext.form.textfield */ otherfield: null, /** * @private * @type cq.ext.form.textfield */ shortfield: null, /** * @private * @type cq.ext.form.textfield */ mediumfield: null, /** * @private * @type cq.ext.form.textfield */ longfield: null, /** * @private * @type cq.ext.form.textfield */ linkurl: null, context1: null, price1: null, constructor: function(config) { config = config || { }; var defaults = { "border": false, "layout": "table", "columns":2 }; config = cq.util.applydefaults(config, defaults); ejst.customwidget.superclass.constructor.call(this, config); }, // overriding cq.ext.component#initcomponent initcomponent: function() { alert("initcomponent") ejst.customwidget.superclass.initcomponent.call(this); alert("after super initcomponent") this.hiddenfield = new cq.ext.form.hidden({ name: this.name }); this.add(this.hiddenfield); this.allowfield = new cq.form.selection({ type:"select", cls:"ejst-customwidget-1", listeners: { selectionchanged: { scope:this, fn: this.updatehidden } }, optionsprovider: this.optionsprovider // optionsprovider:[{text:"en",value:"en"},{text:"fr",value:"fr"}] }); this.add(this.allowfield); //this test pathfield this.allowfield2 = new cq.form.pathfield({ type:"select", cls:"ejst-customwidget-2", listeners: { change: { scope:this, fn: this.updatehidden } }, optionsprovider: this.optionsprovider //optionsprovider:[{text:"en",value:"en"},{text:"fr",value:"fr"}] }); this.add(this.allowfield2); this.otherfield = new cq.ext.form.textfield({ cls:"ejst-customwidget-3", listeners: { change: { scope:this, fn:this.updatehidden } } }); this.add(this.otherfield); }, // overriding cq.form.compositefield#processpath processpath: function(path) { alert("processpath") console.log("customwidget#processpath", path); this.allowfield.processpath(path); this.allowfield2.processpath(path); }, // overriding cq.form.compositefield#processrecord processrecord: function(record, path) { alert("processrecord") console.log("customwidget#processrecord", path, record); this.allowfield.processrecord(record, path); this.allowfield2.processrecord(record, path); }, // overriding cq.form.compositefield#setvalue setvalue: function(value) { alert("value ==>> "+value) //alert("setvalue"+parts[0]+" = "+parts[1]+" = "+parts[2]+ " = "+parts[3]+" = "+parts[4]) var currentpath = window.location.pathname+window.location.search; var curl = currentpath.split('.html'); var suppressforbiddencheck = true; alert(curl[0]) cq.shared.http.get(curl[0]+'/jcr:content/context-price.3.json', function(options, success, response) { // console.log(options); // request options //console.log(success); // true/false //console.log(response); // response obj if(response.body != null){ console.log("json data ======>> "+response.body) var json = json.parse(response.body); var key, val, context, count = 0; var stringified; for(key in json.context){ if(json.context.hasownproperty(key)) { console.log("key - "+key+" ,value - "+json.context[key]) // stringified = json.stringify(key); val = json.context[key]; //this.context1.set // console.log("stringified -->> "+value+" == "+stringified) console.log(key + " : " + val) for(context in val){ if(val.hasownproperty(context)) { var temp = context; if(temp.indexof("price") != -1) { // this.price1 = val[context]; this.otherfield.setvalue(val[context]); console.log(context+"------------"+this.price1) } if(temp.indexof("context") != -1){ // this.context1 = val[context]; this.allowfield2.setvalue(val[context]); console.log(context+"------------"+this.context1) } } } //} count++; } } // console.log("logging-- "+ count) } if(success) { // eval turns json response js obj // var mypage = cq.shared.http.eval(response); //console.log(mypage['jcr:primarytype']) // console.log('url success ==>> '+response.body) }else{ // console.log('falied url') } }, this, suppressforbiddencheck); var parts = value.split("/"); //this.allowfield.setvalue(parts[0]); //this.allowfield2.setvalue(parts[1]); //this.otherfield.setvalue(parts[2]); this.allowfield.setvalue("fr"); //this.allowfield2.setvalue(parts[0]); //this.otherfield.setvalue(parts[1]); this.hiddenfield.setvalue(value); }, // overriding cq.form.compositefield#getvalue getvalue: function() { alert("getvalue") return this.getrawvalue(); }, // overriding cq.form.compositefield#getrawvalue getrawvalue: function() { alert("getrawvalue") if (!this.allowfield) { return null; } if (!this.allowfield2) { return null; } // return (this.context1 + "/" + this.price1); return (this.allowfield.getvalue() + "/" + this.allowfield2.getvalue()+ "/" +this.otherfield.getvalue() + "/" +this.price1 + "/" + this.context1); }, //private updatehidden: function() { alert("updatehidden") this.hiddenfield.setvalue(this.getvalue()); } }); // register xtype cq.ext.reg('testfield', ejst.customwidget); thanks in advance
if want remove node reference "./multishort", can add listeners , code on events.
Comments
Post a Comment