Expand my Community achievements bar.

Join us in celebrating the outstanding achievement of our AEM Community Member of the Year!
SOLVED

Multifield hides the labels of its child fields

Avatar

Level 2

Hello, hope someone can help me on this.

First I created a multifield node with hideLabel=true because I do not need the label and its indented space for multifield itself. Also, added fieldConfig with xtype=myxtype, the custom widget. Here is the code:

{ "xtype":"multifield", "name":"./multitext", "hideLabel":true, "jcr:primaryType":"cq:Widget", "fieldConfig": { "xtype":"myxtype", "jcr:primaryType":"nt:unstructured" } }

Next, in the custom widget code CustomWidget.js, I added 2 text fields WITH the label 'My Text 1' and 'My Text 2'. Here is the code:

var Test = {}; Test.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, { /** * @private * @type CQ.Ext.form.TextField */ hiddenField: null, /** * @private * @type CQ.Ext.form.TextField */ textField1: null, textField2: null, constructor: function(config) { config = config || { }; var defaults = { "border": false, "layout": "form", "padding":5 }; config = CQ.Util.applyDefaults(config, defaults); Test.CustomWidget.superclass.constructor.call(this, config); }, // overriding CQ.Ext.Component#initComponent initComponent: function() { Test.CustomWidget.superclass.initComponent.call(this); this.hiddenField = new CQ.Ext.form.Hidden({ name: this.name }); this.add(this.hiddenField); this.textField1 = new CQ.Ext.form.TextField({ hideLabel:false, fieldLabel:"My Text 1", listeners: { change: { scope:this, fn:this.updateHidden } } }); this.add(this.textField1); this.textField2 = new CQ.Ext.form.TextField({ hideLabel:false, fieldLabel:"My Text 2", listeners: { change: { scope:this, fn:this.updateHidden } } }); this.add(this.textField2); this.doLayout(); }, // overriding CQ.form.CompositeField#setValue setValue: function(value) { var parts = value.split("/"); this.textField1.setValue(parts[0]); this.textField2.setValue(parts[1]); this.hiddenField.setValue(value); }, // overriding CQ.form.CompositeField#getValue getValue: function() { return this.getRawValue(); }, // overriding CQ.form.CompositeField#getRawValue getRawValue: function() { if (!this.textField1) { return null; } return this.textField1.getValue() + "/" + this.textField2.getValue(); }, // private updateHidden: function() { this.hiddenField.setValue(this.getValue()); } }); // register xtype CQ.Ext.reg('myxtype', Test.CustomWidget);

However, when I ran this code in the author mode, clicking 'Add Item' displays the text fields WITHOUT the labels. (see screenshot)

[img]multifield_no_label.png[/img]

As I thought the child fields inherits the parent multifield's hideLabel setting, I force set hideLabel=false in each child textfield (as you can see above), but it did not help. I appreciate if someone could help on this. I'm using AEM5.6.0. Thanks!

1 Accepted Solution

Avatar

Correct answer by
Level 2

Ok, I figured it out. cq:Panel did the trick.

I used to have the following hierarchy:

dialog + items (cq:Widget, xtype=tabpanel) + items + tab (cq:Widget, xtype=panel) + items + multitext (cq:Widget, xtype=multifield, hideLabel=true) + fieldConfig

Changed to:

dialog + items (cq:Widget, xtype=tabpanel) + items + tab (cq:Widget, xtype=panel) + items+ panel (cq:Panel) + items+ multitext (cq:Widget, xtype=multifield, hideLabel=true)                               + fieldConfig

This made the parent box width to 100%.

View solution in original post

3 Replies

Avatar

Level 10

Can you set the parent  hideLabel=true  to false -- does this put back the Labels? 

Avatar

Level 2

Thanks, Scott. However, if the parent multifield sets hideLabel=false, the parent multifield's label field space (indented) is preserved, which I do not want as I want to expand the miltifield area width to 100% in the dialog. Anyway to overwrite the parent's hideLabel in child fields?

Avatar

Correct answer by
Level 2

Ok, I figured it out. cq:Panel did the trick.

I used to have the following hierarchy:

dialog + items (cq:Widget, xtype=tabpanel) + items + tab (cq:Widget, xtype=panel) + items + multitext (cq:Widget, xtype=multifield, hideLabel=true) + fieldConfig

Changed to:

dialog + items (cq:Widget, xtype=tabpanel) + items + tab (cq:Widget, xtype=panel) + items+ panel (cq:Panel) + items+ multitext (cq:Widget, xtype=multifield, hideLabel=true)                               + fieldConfig

This made the parent box width to 100%.