Set a minimum and maximum for custom multifield elements in CQ5?

Question

I'm currently working on a AEM component that include custom multiefield and I have faced a problem I don't know how to solve it. I have created a custom widget for this which allows to include multiefield in multiefield. From the documentation read, as I understood there's no default configuration to this for widgets API config.

My dialog nodes:

<questions
    jcr:primaryType="cq:Widget"
    xtype="panel"
    title="Questions">
    <items jcr:primaryType="cq:WidgetCollection">
        <quiz-data
                jcr:primaryType="cq:Widget"
                fieldDescription="Click the '+' to add a new data"
                fieldLabel="Quiz"
                name="./quizData"
                xtype="multifield">
            <fieldConfig
                    jcr:primaryType="cq:Widget"
                    xtype="apps.mypath.widgets.MultieField"/>
        </quiz-data>
    </items>
</questions>

The widget is working fine, except I want to set a minimum required multiefields and a maximum. I have found on the web a example, but I don't really understand how to do it, take a look at the code bellow:

myNamespace = {};
myNamespace.myCustomFunction = function (dialog) {
    var isValid = function () {
        var valStatus = true;
        ... custom JavaScript/jQuery to check if 3 items exist ...
        return valStatus;
    };
    if (!isValid()) {
        CQ.Ext.Msg.show({title: 'Validation Error', msg: 'Must contain at least 3 items!', buttons: CQ.Ext.MessageBox.OK, icon: CQ.Ext.MessageBox.ERROR});
        return false;
    } else {
        return true;
    }
}

Would be great, if someone can explain how can I achieve this for my custom multiefield, or any other ideas? Let me know if you have any questions.

Answer 1

To implement JavaScript in the Classic UI you will use Listeners. For example:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="cq:Dialog"
          height="600"
          width="600"
          title="My Component"
          xtype="dialog">
    <listeners
        jcr:primaryType="nt:unstructured"
        beforesubmit="function(dialog){ return myNamespace.myCustomFunction(dialog); }"/>
    <items jcr:primaryType="cq:TabPanel">
        <items jcr:primaryType="cq:WidgetCollection">
        </items>
    </items>
</jcr:root>

All the listeners available to you are listed in the CQ Widgets API documentation. For example, if you look at the Dialog API you will see all the Public Events.

I can't comment on your custom widget, however this JavaScript example when used in conjunction with the dialog listener above, will validate all your multifields with custom properties of maxLimit and minLimit.

The dialog:

<quiz-data
    jcr:primaryType="cq:Widget"
    fieldDescription="Click the '+' to add a new data"
    fieldLabel="Quiz"
    name="./quizData"
    minLimit="2"
    maxLimit="4"
    xtype="multifield">
    <fieldConfig
        jcr:primaryType="cq:Widget"
        xtype="textfield"/>
</quiz-data>

The JavaScript:

var myNamespace = myNamespace || {};

myNamespace.myCustomFunction(dialog){
  var multifields
      field,
      max,
      min,
      length,
      x;

  multifields = dialog.findByType('multifield');

  for (x = 0; x < multifields.length; x++) {

    field = multifields[x];
    max = parseInt(field.maxLimit, 10);
    min = parseInt(field.minLimit, 10);
    length = field.getValue().length;

    if (max && length > max) {
      CQ.Ext.Msg.show({
        title: 'Validation Error',
        msg: field.fieldLabel + ' must have no more than ' + max + ' items.',
        buttons: CQ.Ext.MessageBox.OK, icon: CQ.Ext.MessageBox.ERROR});
      return false;
    } else if (min && length < min) {
      CQ.Ext.Msg.show({
        title: 'Validation Error',
        msg: field.fieldLabel + ' must have at least ' + min + ' items.',
        buttons: CQ.Ext.MessageBox.OK, icon: CQ.Ext.MessageBox.ERROR});
      return false;
    }
  }
}