How to add items in multyifield

[sherybedrock]

Hi all,

I'm adding some default values in a multyfield via javascript. There is a check box on which I have a listener and if it is checked loop over the selection items of the multifield and adding items with values. On first open of the dialog and check the checkbox values are populated fine, but if I disable the checkbox, click ok. Then open again the dialog click on the check box and the stored values are not populated. There is only addItem. When I click on add item it opens the field but with broken view. Then I shoud extend the dialog and now all values are displayed correctly. Any ideas how can gix this issue.

Regards

[kautuk_sahni]

I am not very clear here, is your checkbox in multifield? If so, this is known the issue.

See:- http://sgaem.blogspot.in/2017/04/touch-ui-composite-multi-field-with.html

// When the checkbox is in the Composite Multi-Field, It doesn’t work properly. The checkbox would remain unchecked on re-opening the dialog box even if it was checked earlier.

~kautuk

When we use checkbox widget in Composite Multi-Field, It doesn’t work properly.

[sherybedrock]

[sherybedrock]

<modelBrief jcr:primaryType="cq:Widget"
   xtype="dialogfieldset"
   title="Model Brief"
   width="380"
   updateFields="function(selected){
  var multi = this.findByType('multifield')[0];
  multi.setVisible(selected);
  if (selected &amp;&amp; multi.getValue().length == 0) {
  for(var i = 0 ; i &lt; 8 ; i++) {
  multi.addItem();

  var combos = multi.findByType('selection');
  var value = combos[i].options[i].value;
  combos[i].setValue(value);
  }
  }
  multi.doLayout();
  }">

   <items jcr:primaryType="cq:WidgetCollection">

   <enable jcr:primaryType="cq:Widget"
   fieldLabel="Enable automatic data supply"
   name="./enableAutomatedModelBrief"
   type="checkbox"
   xtype="selection">

   <listeners jcr:primaryType="nt:unstructured"
   selectionchanged="function(){
  var selected = this.getValue() == 'true';
  var parent = this.findParentByType('dialogfieldset');
  parent.updateFields(selected);
  }"
   loadcontent="function(){
  var selected = this.getValue() == 'true';
  var parent = this.findParentByType('dialogfieldset');
  parent.updateFields(selected);
  }" />

   </enable>

   <showHide jcr:primaryType="cq:Widget"
   fieldLabel="Show properties"
   hideLabel="{Boolean}false"
   name="./modelbrief"
   orderable="{Boolean}true"
   width="400"
   xtype="multifield">

   <fieldConfig jcr:primaryType="cq:Widget"
   layout="hbox"
   width="380"
   xtype="multifieldpanel">

   <items jcr:primaryType="cq:WidgetCollection">

   <disclaimer
   jcr:primaryType="cq:Widget"
   key="disclaimer"
   width="150px"
   xtype="textfield"/>

   <combo jcr:primaryType="cq:Widget"
   key="combo"
   allowBlank="{Boolean}false"
   type="select"
   style="padding-left:25px"
   width="160px"
   xtype="selection">

   <listeners jcr:primaryType="nt:unstructured"
   selectionchanged="function() {
  var multi = this.findParentByType('multifield');
  var combos = multi.findByType('selection');
  for(var i = 0; i &lt; combos.length; i++) {
  if (combos[i].value == this.getValue()) {
  var err = 'Duplicates not allowed.';
  this.setValue('');
  this.markInvalid(err);
  return false;
  }
  }
  return true;
  }"/>

   <options jcr:primaryType="cq:WidgetCollection">

   <consumption jcr:primaryType="nt:unstructured"
   value="consumptionOverall"
   text="Consumption"/>

   <emissions jcr:primaryType="nt:unstructured"
   value="co2Overall"
   text="Emissions"/>

   <acceleration jcr:primaryType="nt:unstructured"
   value="acceleration"
   text="Acceleration"/>

   <topSpeed jcr:primaryType="nt:unstructured"
   value="topSpeed"
   text="Top Speed"/>

   <price jcr:primaryType="nt:unstructured"
   value="totalPrice"
   text="Price"/>

   <electricRange jcr:primaryType="nt:unstructured"
   value="electricRange"
   text="Еlectric Range"/>

   <chargingDuration jcr:primaryType="nt:unstructured"
   value="chargingDuration"
   text="Charging Duration"/>

   <cruisingRangeElectricOnly jcr:primaryType="nt:unstructured"
   value="cruisingRangeElectricOnly"
   text="Cruising Range Electric Only"/>

   </options>

   </combo>

   </items>

   </fieldConfig>

   </showHide>

   </items>

</modelBrief>

[sherybedrock]

when i resize the dialog and the fields are displayed correctly

[sherybedrock]

any ideas how can i fix this issue

[sherybedrock]

on load width is 0, but on resize it is applying a new correct size​

[VeenaVikraman]

Hi Shery

   Can you package and share a sample code so that we can test this and get back with a solution ?

Thanks

Veena

[smacdonald2008]

Why are you coding how a multifield is populated. Best practice is for an AEM Author to populate it.

[sherybedrock]

the requirement is to be easier for the author

[smacdonald2008]

also -- this article may help -- http://experience-aem.blogspot.com/2016/02/aem-61-touchui-add-items-to-multifield-based-on-value-in-...

[sherybedrock]

The problem is in set visible, because when it is false is setting some width=0 and i don't have a solution for now multi.setVisible(selected);