Expand my Community achievements bar.

How to add items in multyifield

Avatar

Level 3

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

11 Replies

Avatar

Administrator

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.



Kautuk Sahni

Avatar

Level 3

<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>

Avatar

Level 3

when i resize the dialog and the fields are displayed correctly

Avatar

Level 3

width.png

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

Avatar

Community Advisor

Hi Shery

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

Thanks

Veena

Avatar

Level 10

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

Avatar

Level 3

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);